Question

我有一个闪亮的仪表板，其导航栏页面由两个tabPanels "Summary“和"Available Funds"组成。然后"Available Funds"由一个tabsetPanel()以及两个tabPanels {{1 }}和"Plot"。单击"Plot2"时，会显示右侧栏中的闪亮小部件，除了第一次加载应用程序并单击"Plot"之外，这是因为我还没有点击"Available funds"，我想知道如何将导航栏tabPanel "Plot"与小部件显示连接起来。

"Available funds"

具有更多标签的编辑版本

library(golem)
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = tags$body(class="skin-blue sidebar-mini control-sidebar-open", dashboardPagePlus(
    header = dashboardHeaderPlus(
      enable_rightsidebar = TRUE,
      rightSidebarIcon = "gears"
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      golem::activate_js(),
      navbarPage("Navbar!",
                 tabPanel("Summary"

                 ),
                 tabPanel("Available funds",
                          tabsetPanel(
                            id="tabA",
                            type = "tabs",
                            tabPanel("Plot"),
                            tabPanel("Plot2"))
                 )), 
      tags$script(
        '$("a[data-toggle=\'tab\']").click(function(){
          Shiny.setInputValue("tabactive", $(this).data("value"))
        })'
      )
    ),
    rightsidebar = rightSidebar(
      background = "dark",
      rightSidebarTabContent(
        id = 1,
        title = "Tab 1",
        icon = "desktop",
        active = TRUE,
        uiOutput("sl")

      )

    ),
    title = "Right Sidebar"
  )),
  server = function(input, output) {
    output$sl <- renderUI({
      req(input$tabactive)
      sliderInput(
        "obs",
        "Number of observations:",
        min = 0, max = 1000, value = 500
      )
    })

    observeEvent( input$tabactive , {
      if (input$tabactive == "Plot"){
        golem::invoke_js("showid", "sl")
      } else {
        golem::invoke_js("hideid", "sl")
      }
    })
  }
)

Answer 1

请检查以下内容（我只是修改了您的if条件）：

library(golem)
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = tags$body(class="skin-blue sidebar-mini control-sidebar-open", dashboardPagePlus(
    header = dashboardHeaderPlus(
      enable_rightsidebar = TRUE,
      rightSidebarIcon = "gears"
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      golem::activate_js(),
      navbarPage("Navbar!",
                 id = "tabactive",
                 tabPanel("Summary"),
                 tabPanel("Available funds",
                          tabsetPanel(
                            id="tabA",
                            type = "tabs",
                            tabPanel("Plot"),
                            tabPanel("Plot2"))
                 ))
    ),
    rightsidebar = rightSidebar(
      background = "dark",
      rightSidebarTabContent(
        id = 1,
        title = "Tab 1",
        icon = "desktop",
        active = TRUE,
        uiOutput("sl")
      )
    ),
    title = "Right Sidebar"
  )),
  server = function(input, output) {
    output$sl <- renderUI({
      sliderInput(
        "obs",
        "Number of observations:",
        min = 0, max = 1000, value = 500
      )
    })

    observe({
      if (input$tabactive == "Available funds" && input$tabA == "Plot"){
        golem::invoke_js("showid", "sl")
      } else {
        golem::invoke_js("hideid", "sl")
      }
    })
  }
)

顺便说一句。您不需要该JS代码来获得input$tabactive，因为navbarPage也有一个id参数。

另一种方法是将uiOutput("sl")包裹在conditionalPanel中，如下所示：

library(golem)
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = tags$body(class="skin-blue sidebar-mini control-sidebar-open", dashboardPagePlus(
    header = dashboardHeaderPlus(
      enable_rightsidebar = TRUE,
      rightSidebarIcon = "gears"
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      golem::activate_js(),
      navbarPage("Navbar!",
                 id = "tabactive",
                 tabPanel("Summary"),
                 tabPanel("Available funds",
                          tabsetPanel(
                            id="tabA",
                            type = "tabs",
                            tabPanel("Plot"),
                            tabPanel("Plot2"))
                 ))
    ),
    rightsidebar = rightSidebar(
      background = "dark",
      rightSidebarTabContent(
        id = 1,
        title = "Tab 1",
        icon = "desktop",
        active = TRUE,
        conditionalPanel(condition = "input.tabactive == 'Available funds' && input.tabA == 'Plot'", {uiOutput("sl")})
      )
    ),
    title = "Right Sidebar"
  )),
  server = function(input, output) {
    output$sl <- renderUI({
      sliderInput(
        "obs",
        "Number of observations:",
        min = 0, max = 1000, value = 500
      )
    })
  }
)

OP编辑后：

library(golem)
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = tags$body(class="skin-blue sidebar-mini control-sidebar-open", dashboardPagePlus(
    header = dashboardHeaderPlus(
      enable_rightsidebar = TRUE,
      rightSidebarIcon = "gears"
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      golem::activate_js(),
      navbarPage("Navbar!",
                 id = "tabactive",
                 tabPanel("Summary",
                          tabsetPanel(
                            id="tabB",
                            type = "tabs",
                            tabPanel("Plot3"),
                            tabPanel("Plot4"))),
                 tabPanel("Available funds",
                          tabsetPanel(
                            id="tabA",
                            type = "tabs",
                            tabPanel("Plot"),
                            tabPanel("Plot2"))
                 ))
    ),
    rightsidebar = rightSidebar(
      background = "dark",
      rightSidebarTabContent(
        id = 1,
        title = "Tab 1",
        icon = "desktop",
        active = TRUE,
        uiOutput("sl"),
        uiOutput("sl2"),
        uiOutput("sl3"),
        uiOutput("sl4")
      )
    ),
    title = "Right Sidebar"
  )),
  server = function(input, output) {
    output$sl <- renderUI({
      req(input$tabactive)
      sliderInput(
        "obs",
        "Number of observations:",
        min = 0, max = 1000, value = 500
      )
    })
    output$sl2 <- renderUI({
      req(input$tabactive)
      sliderInput(
        "obs2",
        "Number of observations:",
        min = 0, max = 100, value = 50
      )
    })
    output$sl3 <- renderUI({
      req(input$tabactive)
      sliderInput(
        "obs3",
        "Number of observations:",
        min = 0, max = 100, value = 50
      )
    })
    output$sl4 <- renderUI({
      req(input$tabactive)
      sliderInput(
        "obs4",
        "Number of observations:",
        min = 0, max = 100, value = 50
      )
    })
    observe({
      if (input$tabactive == "Available funds" && input$tabA == "Plot"){
        golem::invoke_js("showid", "sl")
      } else {
        golem::invoke_js("hideid", "sl")
      }
    })
    observe({
      if (input$tabactive == "Available funds" && input$tabA == "Plot2"){
        golem::invoke_js("showid", "sl2")
      } else {
        golem::invoke_js("hideid", "sl2")
      }
    })
    observe({
      if (input$tabactive == "Summary" && input$tabB == "Plot3"){
        golem::invoke_js("showid", "sl3")
      } else {
        golem::invoke_js("hideid", "sl3")
      }
    })
    observe({
      if (input$tabactive == "Summary" && input$tabB == "Plot4"){
        golem::invoke_js("showid", "sl4")
      } else {
        golem::invoke_js("hideid", "sl4")
      }
    })
  }
)

这是仅UI的解决方案：

library(golem)
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = tags$body(class="skin-blue sidebar-mini control-sidebar-open", dashboardPagePlus(
    header = dashboardHeaderPlus(
      enable_rightsidebar = TRUE,
      rightSidebarIcon = "gears"
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      golem::activate_js(),
      navbarPage("Navbar!",
                 id = "tabactive",
                 tabPanel("Summary",
                          tabsetPanel(
                            id="tabB",
                            type = "tabs",
                            tabPanel("Plot3"),
                            tabPanel("Plot4"))),
                 tabPanel("Available funds",
                          tabsetPanel(
                            id="tabA",
                            type = "tabs",
                            tabPanel("Plot1"),
                            tabPanel("Plot2"))
                 ))
    ),
    rightsidebar = rightSidebar(
      background = "dark",
      rightSidebarTabContent(
        id = 1,
        title = "Tab 1",
        icon = "desktop",
        active = TRUE,
        conditionalPanel(condition = "input.tabactive == 'Available funds' && input.tabA == 'Plot1'", {
          sliderInput(
            "obs1",
            "Number of observations 1:",
            min = 0, max = 1000, value = 500
          )}),
        conditionalPanel(condition = "input.tabactive == 'Available funds' && input.tabA == 'Plot2'", {
          sliderInput(
            "obs2",
            "Number of observations 2:",
            min = 0, max = 100, value = 50
          )}),
        conditionalPanel(condition = "input.tabactive == 'Summary' && input.tabB == 'Plot3'", {
          sliderInput(
            "obs3",
            "Number of observations 3:",
            min = 0, max = 100, value = 50
          )}),
        conditionalPanel(condition = "input.tabactive == 'Summary' && input.tabB == 'Plot4'", {
          sliderInput(
            "obs4",
            "Number of observations 4:",
            min = 0, max = 100, value = 50
          )})
      )
    ),
    title = "Right Sidebar"
  )),
  server = function(input, output) {}
)

使用特定的导航栏tabPanel（）选择连接闪亮的小部件显示

1 个答案: