CODEWITHSUNDEEP
javascriptrshiny
firmo23
firmo23

Reputation: 8404

Displaying widget according to click event does not work when the app is loaded for first time

I have the shiny dashboard below where the widget of the right sidebar is supposed to be displayed only when the "Plot" tabpanel is active and this actually happens except of the 1st time the app is loaded when the widget is displayed in the 'Summary' tabpanel as well. I understand that this is happening because the activation comes with the click on tabpanel name. But how can I fix it?

library(golem)
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
shinyApp(
  ui = dashboardPagePlus(
    header = dashboardHeaderPlus(
      enable_rightsidebar = TRUE,
      rightSidebarIcon = "gears"
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      golem::activate_js(),
      navbarPage("Navbar!",
                 tabPanel("Summary"

                 ),
                 tabPanel("Plot"
                 )), 
      tags$script(
        '$("a[data-toggle=\'tab\']").click(function(){
          Shiny.setInputValue("tabactive", $(this).data("value"))
        })'
      )
    ),
    rightsidebar = rightSidebar(
      background = "dark",
      rightSidebarTabContent(
        id = 1,
        title = "Tab 1",
        icon = "desktop",
        active = TRUE,
        uiOutput("sl")

      )

    ),
    title = "Right Sidebar"
  ),
  server = function(input, output) {
    output$sl<-renderUI({
      sliderInput(
        "obs",
        "Number of observations:",
        min = 0, max = 1000, value = 500
      )
    })

    observeEvent( input$tabactive , {
      if (input$tabactive == "Plot"){
        golem::invoke_js("showid", "sl")
      } else {
        golem::invoke_js("hideid", "sl")
      }
    })



  }
)

Upvotes: 0

Views: 176

Answers (1)

ismirsehregal
ismirsehregal

Reputation: 33417

You can suppress the initial rendering via adding req(input$tabactive) to your renderUI call:

library(golem)
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = dashboardPagePlus(
    header = dashboardHeaderPlus(
      enable_rightsidebar = TRUE,
      rightSidebarIcon = "gears"
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      golem::activate_js(),
      navbarPage("Navbar!",
                 tabPanel("Summary"

                 ),
                 tabPanel("Plot"
                 )), 
      tags$script(
        '$("a[data-toggle=\'tab\']").click(function(){
          Shiny.setInputValue("tabactive", $(this).data("value"))
        })'
      )
    ),
    rightsidebar = rightSidebar(
      background = "dark",
      rightSidebarTabContent(
        id = 1,
        title = "Tab 1",
        icon = "desktop",
        active = TRUE,
        uiOutput("sl")

      )

    ),
    title = "Right Sidebar"
  ),
  server = function(input, output) {
    output$sl <- renderUI({
      req(input$tabactive)
      sliderInput(
        "obs",
        "Number of observations:",
        min = 0, max = 1000, value = 500
      )
    })

    observeEvent( input$tabactive , {
      if (input$tabactive == "Plot"){
        golem::invoke_js("showid", "sl")
      } else {
        golem::invoke_js("hideid", "sl")
      }
    })
  }
)

Upvotes: 1

Related Questions