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

Answer 1

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))