navlistPanel:在闪亮的应用程序中按顺序激活标签

时间:2014-08-22 20:33:15

标签: r tabs shiny

我正在尝试编写一个闪亮的应用程序,其中标签按顺序处于活动状态。例如, 用户只能在第一个选项卡上完成任务后移动到第二个选项卡。在这种情况下,第一个选项卡将添加绿色复选标记(例如),第二个选项卡将变为活动状态。 (对于下一个标签也一样。)

例如,这里是ui.R和server.R文件:

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

我知道我应该在“navlistPanel”和“tabPanel”中添加“id”但我不确定我应该包含在server.R文件中的逻辑,因为我看不到用户将如何修改这样的身份。

我搜索了闪亮的谷歌群组,这里的主题,并阅读条件面板..但这不是我真正想要的。 非常感谢任何帮助/教程或阅读建议!

1 个答案:

答案 0 :(得分:7)

这是一个例子。页面加载时禁用除第一个导航链接之外的所有链接。我在每个部分添加了“完成”按钮。按完成按钮后,下一个导航链接将启用。

 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))
相关问题