navlistPanel: Make tabs sequentially active in shiny app

Question

I am trying to write a shiny app in which the tabs are active sequentially. For example, the user can only move to the second tab after he's completed a task on the first tab. In that case, the first tab will have a green checkmark added (for example) and the second tab will become active. (And the same for the next tabs.)

As an example, here are the ui.R and server.R files:

shinyUI(fluidPage(  
   titlePanel("New Project"), 
   navlistPanel(selected="Data Upload",
   tabPanel("Data Upload",           
         textInput("aInSummary", label = h5("Please type a"), 
                   value = "Enter value...")
         ),   
   tabPanel("Data Check",
         textInput("bInDataCheck", label = h5("Please type b"), 
                   value = "Enter value...")             
         ),   
   tabPanel("Dry Run",
         textInput("cInDryRun", label = h5("Please type c"), 
                   value = "Enter value...")            
        ),                 
   tabPanel("Output"),
   "-----",
   tabPanel("Help-FAQ")
   )
))


shinyServer(function(input, output,server) {
})

I understand that I should be adding "id" in "navlistPanel" and "tabPanel" but I'm not sure about the logic I should include in the server.R file since I don't see how the user will modify such id.

I've searched the shiny google group, threads here, and read on Conditional Panels.. but that's not really what I'm looking for. Any help/tutorial or reading suggestion is much appreciated!

Matthew Plourde Matthew Plourde · Accepted Answer · 2014-08-25T13:29:18

Here's an example. All but the first nav links are disabled when the page loads. I've added 'Done' buttons to each section. When you press a Done button, the next nav link becomes enabled.

 ui <- fluidPage(  
   tags$head(tags$script("
        window.onload = function() {
            $('#mynavlist a:contains(\"Data Check\")').parent().addClass('disabled');
            $('#mynavlist a:contains(\"Dry Run\")').parent().addClass('disabled');
            $('#mynavlist a:contains(\"Output\")').parent().addClass('disabled');
        };

        Shiny.addCustomMessageHandler('activeNavs', function(nav_label) {
            $('#mynavlist a:contains(\"' + nav_label + '\")').parent().removeClass('disabled');
        });
   ")),
   titlePanel("New Project"), 
   navlistPanel(selected="Data Upload", id='mynavlist',
   tabPanel("Data Upload",           
         textInput("aInSummary", label = h5("Please type a"), 
                   value = "Enter value..."),
         br(),
         actionButton('data_upload_done', 'Done')
         ),   
   tabPanel("Data Check",
         textInput("bInDataCheck", label = h5("Please type b"), 
                   value = "Enter value..."),
         br(),
         actionButton('data_check_done', 'Done')
         ),   
   tabPanel("Dry Run",
         textInput("cInDryRun", label = h5("Please type c"), 
                   value = "Enter value..."),
         br(),
         actionButton('dry_run_done', 'Done')
        ),                 
   tabPanel("Output"),
   "-----",
   tabPanel("Help-FAQ")
   )
)


server <- function(input, output,session) {

    observe({
        if (input$data_upload_done > 0) {
            session$sendCustomMessage('activeNavs', 'Data Check')
        }
    })

    observe({
        if (input$data_check_done > 0) {
            session$sendCustomMessage('activeNavs', 'Dry Run')
        }
    })

    observe({
        if (input$dry_run_done > 0) {
            session$sendCustomMessage('activeNavs', 'Output')
        }
    })
}

runApp(list(ui=ui, server=server))

navlistPanel: Make tabs sequentially active in shiny app

1 Answers