Search code examples
rshinyshinydashboardshiny-servershinyapps

Render dashboardSidebar dynamically only when user clicks tabPanel


I am trying to render the dashboardSidebar dynamically on the click of tabPanel, so that controls on all the tabs are not loaded at the initialization time of the app. For that I have created a function load_tab2 but this function is not rending anything on the tab click. Can someone please point out the issue with the code below?

library(shiny)
library(shinydashboard)

sidebar <- dashboardSidebar(
  collapsed = FALSE,
  sidebarMenu(
    id = "menu_sidebar",
    conditionalPanel(
      condition = "input.main_tab == 'tab_1'",
      selectizeInput(inputId = "t1", label = "Select by:", choices = c(as.character(30:40))),
      div("Hello Tab 1")
    ))
)

body <- dashboardBody(
  fluidRow(
    tabsetPanel(
      id = "main_tab",
      selected = "tab_1",
      tabPanel(title = "tab_1", "Tab content 1"),
      tabPanel(title = "tab_2", "Tab content 2")
    )
  )
)

load_tab2 <- function(input, output, session){
  observeEvent(input$main_tab == 'tab_2', {
    insertUI(
      selector = "#menu_sidebar",
      where = "afterEnd",
      ui = conditionalPanel(
        condition = "input.main_tab == 'tab_2'",
        selectizeInput(inputId = "t2", label = "Select by:", choices = c(as.character(40:50))),
        div("Hello Tab 2")
      ),
      immediate = TRUE,
      session = getDefaultReactiveDomain()
    )
  }, ignoreInit = TRUE, once = TRUE)
}

shinyApp(
  ui = dashboardPage(
    dashboardHeader(title = "tabBoxes"),
    sidebar,
    body
  ),
  server = function(input, output, session) {
    callModule(load_tab2, "load_tab2_id")
  }
)

Solution

  • I fixed the problem by directly calling load_tab2 function inside server function.

    library(shiny)
    library(shinydashboard)
    
    sidebar <- dashboardSidebar(
      collapsed = FALSE,
      sidebarMenu(
        id = "menu_sidebar",
        conditionalPanel(
          condition = "input.main_tab == 'tab_1'",
          selectizeInput(inputId = "t1", label = "Select by:", choices = c(as.character(30:40))),
          div("Hello Tab 1")
        ))
    )
    
    body <- dashboardBody(
      fluidRow(
        tabsetPanel(
          id = "main_tab",
          selected = "tab_1",
          tabPanel(title = "tab_1", "Tab content 1"),
          tabPanel(title = "tab_2", "Tab content 2")
        )
      )
    )
    
    load_tab2 <- function(input, output, session){
      observeEvent(input$main_tab == 'tab_2', {
        insertUI(
          selector = "#menu_sidebar",
          where = "afterEnd",
          ui = conditionalPanel(
            condition = "input.main_tab == 'tab_2'",
            selectizeInput(inputId = "t2", label = "Select by:", choices = c(as.character(40:50))),
            div("Hello Tab 2")
          ),
          immediate = TRUE,
          session = getDefaultReactiveDomain()
        )
      }, ignoreInit = TRUE, once = TRUE)
    }
    
    shinyApp(
      ui = dashboardPage(
        dashboardHeader(title = "tabBoxes"),
        sidebar,
        body
      ),
      server = function(input, output, session) {
        load_tab2(input, output, session)
      }
    )