Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

navlistPanel: Make tabs sequentially active in shiny app

Tags:

tabs

r

shiny

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!

like image 487
user3570398 Avatar asked Aug 22 '14 20:08

user3570398


1 Answers

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))
like image 114
Matthew Plourde Avatar answered Oct 18 '22 09:10

Matthew Plourde