闪亮的如何阻止用户访问选项卡？答案

【问题标题】：Shiny how to block the user from accessing a tab?闪亮的如何阻止用户访问选项卡？
【发布时间】：2021-12-14 09:20:29
【问题描述】：

我需要阻止用户访问其他选项卡，直到完成某些操作。在这个可重现的示例中，我想阻止用户访问Tab 2，直到他按下按钮。

这是应用程序的外观：

这是应用程序的代码：

library(shiny)

ui <- shinyUI(navbarPage("",
                         tabPanel(h1("Tab1"), value = "nav1",
                                  mainPanel(
                                            br(),
                                            h2("The user must press this button to access the other tab."),
                                            br(),
                                            shiny::actionButton('button', 'press the button')
                                  )
                         ),
                         tabPanel(h1("Tab2"),
                                  value = "nav2",

                                  h3('Block access until user presses button')
                         )
)
)

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


})

# Run the application
shinyApp(ui = ui, server = server)

我希望用户能够看到 Tab2 存在，但在按下按钮之前使其无法点击。

有什么想法吗？

【问题讨论】：

我的第一印象是，最简单的方法是使用renderUI() 生成选项卡2 的内容。添加对input$button 的依赖，以便在按下按钮之前 UI 为空，之后不再为空。

标签： javascript r shiny shinydashboard

【解决方案1】：

在我上面的评论中添加细节：

library(shiny)

ui <- shinyUI(navbarPage("",
        tabPanel(
          h1("Tab1"), 
          value = "nav1",
          mainPanel(
            br(),
            h2("The user must press this button to access the other tab."),
            br(),
            shiny::actionButton('button', 'press the button')
          )
        ),
        tabPanel(
          h1("Tab2"),
          value = "nav2",
          uiOutput("tab2contents")
        )
      )
    )    

server <- shinyServer(function(input, output) {
   v <- reactiveValues(tab2Active=FALSE)
   
  observeEvent(input$button, { v$tab2Active <- TRUE})

  output$tab2contents <- renderUI({
    if (v$tab2Active) {
      h3('Tab 2 is active')
    } else {
      h3('Block access until user presses button')
    }
  })
})

# Run the application
shinyApp(ui = ui, server = server)

【讨论】：

谢谢@Limey，是的，让标签为空是一种解决方法，但并不完全是我想要的。或者，另一个选项而不是阻止第二个选项卡，是在按下按钮后显示第二个选项卡。但我也没有做到这一点。无论如何，谢谢！
您可以使用相同的技术在按钮按下后使第二个选项卡“出现”：只需在renderUI 调用中生成整个tabPanel。碰巧，那将是我的首选选项，但是我将您的“阻止访问”表示您希望该选项卡在那里但无法访问。第三个选项是隐藏或停用第二个选项卡上的所有小部件以开始。但这需要单独切换每个小部件，因此比其他两种方法都需要更多工作。
酷！我现在正在尝试摆弄 CSS。仍在尝试实现被阻塞的部分。 stackoverflow.com/questions/40147856/…

【解决方案2】：

使用conditionalPanel()。健康）状况？该按钮的点击次数不应为零。

你的例子现在变成了：

library(shiny)

ui <- shinyUI(
  navbarPage(
    title = "", 
    
    tabPanel(
      title = h1("Tab1"), 
      value = "nav1",
      
      mainPanel(
        br(),
        h2("The user must press this button to access the other tab."),
        br(),
        shiny::actionButton('button', 'press the button')
      )
    ), 
    
    tabPanel(
      h1("Tab2"),
      value = "nav2",
      
      # ----conditional panel here----
      conditionalPanel(
        condition = "input.button != 0", 
        
        h3('Block access until user presses button')
      )
    )
  )
)

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

# Run the application
shinyApp(ui = ui, server = server)

【讨论】：

【解决方案3】：

不需要使用任何服务器端处理。现代 Web 应用程序开发概念之一是前端和后端分离。如果你可以在前端完成，那么就不要使用服务器来完成这项工作。
conditionalPanel 是一个更好的解决方案，但用户仍然可以单击标签按钮，只需给他们一个空白页面。

这里有一个更好的解决方案，让我们使用一些 js 来禁用选项卡按钮，除非用户单击操作按钮。用户可以看到选项卡按钮，但它是灰色的并且在开始时无法点击：

library(shiny)

ui <- shinyUI(navbarPage(
  "",
  tabPanel(
    h1("Tab1"), 
    value = "nav1",
    mainPanel(
      br(),
      h2("The user must press this button to access the other tab."),
      br(),
      shiny::actionButton('button', 'press the button', onclick = "$(tab).removeClass('disabled')")
    )
  ),
  tabPanel(
    h1("Tab2"),
    value = "nav2",
    uiOutput("tab2contents")
  ),
  tags$script(
    '
    var tab = $(\'a[data-value="nav2"]\').parent().addClass("disabled");
    $(function(){
      $(tab.parent()).on("click", "li.disabled", function(e) {
        e.preventDefault();
        return false;
      });
    });
    '
  )
))    

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

})

# Run the application
shinyApp(ui = ui, server = server)

【讨论】：