Change Shiny navbarPage tabPanel programmatically

Question

I have a Shiny app with several tabPanels within a navbarPage.

ui<-shinyUI(
  navbarPage(
  theme = "cyborgBootstrap.css",
  "Shiny panel append",
    tabPanel(
      "First Panel",
      strong("panel 1")
      ),
    tabPanel(
      "Second Panel",
      strong("panel 1")
      ),
    tabPanel(
      "Third Panel",
      strong("panel 1")
      )
    )
  )

When the app loads, "First Panel" will be active. I would like to be able to add some server functions that toggle the panels when certain tasks complete. How could I toggle between panels programmatically?

You might want to use updateNavbarPage (but you'll need to set the navbarPage id) — HubertL
@HubertL - That works great.. Want to fill in an answer so I can mark as accepted? — jotamon

jpdugo17 jpdugo17 · Accepted Answer · 2021-05-29T21:11:50

library(shiny)
library(purrr)
data(iris)

ui<-
    navbarPage(
        theme = "cyborgBootstrap.css",
        "Shiny panel append",
        tabPanel(
            "First Panel",
            #upon clicking a dataset will loaded and the tab will switch after completition
            actionButton('load_iris', 'Load Iris Dataset'), 
            dataTableOutput('iris')
        ),
        tabPanel(
            "Second Panel",
            strong("panel 2"),
            value = 'secondPanel' ##added value to tell updateNavbarPage where to go.
        ),
        tabPanel(
            "Third Panel",
            strong("panel 3")
        ), id = 'navbar'
    )


server <- function(input, output, session) {
    
    #upon clicking in 'load Iris' the dataset is rendered and after that process is complete the second tab will be selected
    observeEvent(input$load_iris, {
        output$iris <- renderDataTable(withProgress({ #simulate to perform a time consuming action
            map(rep(.1, 10), ~{
            Sys.sleep(.1)
            incProgress(.x, 'performing task')})
            iris},
            min = 0, max = 1,value = .1) )
        #now tell the app to select the secondPanel
        updateNavbarPage(session, 'navbar', selected = 'secondPanel')
    })
    
   
    
}

shinyApp(ui, server)

Change Shiny navbarPage tabPanel programmatically

1 Answers