使用dashboardPage时shiny应用程序中两个不同tabItems的独立游览

Question

我正在使用dashboardPage构建 shiny 应用程序的 UI。 在这个dashboardPage中，我有两个tabItems （MENU1 和MENU2）。 在每个tabItems中执行不同的任务，我需要指导用户完成这些任务。 为了指导用户，我在下面的代码中为每个tabItem包含了一个actionButton ，并带有相应的observeEvent 。 为此，我使用了introBox并分别使用data.step和data.intro控制了步骤和介绍。

不幸的是，这不是一个好的解决方案，因为data.steps是链接的，总共有 2 个步骤。 在 MENU1 中，当我单击第一个actionButton时，我必须完成两个步骤才能完成此导览。 在 MENU2 中，当我单击第二个actionButton时，此游览从 MENU1 的第一步开始。

我想要的是 MENU1 的一次巡演和 MENU2 的另一次巡演。 有什么建议么？

这是我目前的解决方案：

library(shiny)
library(shinydashboard)
library(rintrojs)
library(leaflet)

ui<-dashboardPage(
  dashboardHeader(title = "shinyApp"),
  dashboardSidebar(
    sidebarMenu(
      menuItem("Menu1", tabName = "MENU1"),
      menuItem("Menu2", tabName = "MENU2")
    )
  ),
  
  dashboardBody(
    tabItems(
      
      tabItem("MENU1",
              fluidRow(
                introjsUI(),
                
                column(3,
                       actionButton("start", "START", class="btn-link")
                )#,
                ),
              fluidRow(
                column(9,
                       fluidRow(
                         column(7,
                                introBox(
                                  actionButton("button1", "Button1"),
                                  data.step=1,
                                  data.intro = wellPanel(
                                    p("Press here, button1")
                                    )
                                  )
                                )
                         )
                       )
                
              )
      ),
      
      tabItem("MENU2",
        fluidRow(
          introjsUI(),
                    column(2,
                           actionButton("start2", "START2", class="btn-link")
                    )

        ),

                fluidRow(
                  column(7,
                         introBox(
                           wellPanel(
                             leafletOutput("mapLocal", width = "100%", height = 600)
                           ),
                           data.step=2,
                           data.intro = wellPanel(
                             p("Press here, button2")
                           )
                         )
                  )
                )
      )
    )
  )
  
)

server <- function(input, output, session){
  
  observeEvent(input$start,
               introjs(session))
  
  observeEvent(input$start2,
               introjs(session))
  
  }


shinyApp(ui = ui, server = server)

Answer 1

这是一个带有一次游览的解决方案，但是在显示第二部分之前会翻转页面。 我求助于一些JavaScript来添加beforechange事件。 在这种情况下，您可以检查是否要显示您的第二步，如果是这种情况，您可以通过模拟单击相应的菜单项来手动触发页面更改。

library(shiny)
library(shinydashboard)
library(rintrojs)

ui<-dashboardPage(
   dashboardHeader(title = "shinyApp"),
   dashboardSidebar(
      sidebarMenu(
         menuItem("Menu1", tabName = "MENU1"),
         menuItem("Menu2", tabName = "MENU2")
      )
   ),
   
   dashboardBody(
      introjsUI(),
      tabItems(
         tabItem("MENU1",
                 fluidRow(
                    actionButton("start", "START", class="btn-link"),
                    introBox(
                       actionButton("button1", "Button1"),
                       data.step = 1,
                       data.intro = wellPanel(
                          p("Press here, button1")
                       )
                    )
                 )
         ),
         tabItem("MENU2",
                 fluidRow(
                    introBox(
                       plotOutput("mapLocal", width = "100%", height = 600),
                       data.step = 2,
                       data.intro = wellPanel(
                          p("Plot Area")
                       )
                    )
                 )
         )
      )
   )
)

js <- paste0("if (targetElement.getAttribute('data-step') === '2') {",
             "$(\"a[data-value='MENU2']\").trigger('click')",
             "}")

server <- function(input, output, session){
   observeEvent(input$start, introjs(session, events = list(onbeforechange = I(js))))
   
}


shinyApp(ui = ui, server = server)

---

更新

在查看rintrojs的源代码时，我发现有一个rintrojs元素，这让我很好奇。 经过一番搜索，我发现切换窗格任务是rintrojs的创建者已经预见到的。 因此，上面的代码可以进一步简化（并且更健壮，因为我们不必手动检查选项卡）：

server <- function(input, output, session){
   observeEvent(input$start, introjs(session, 
                events = list(onbeforechange = readCallback("switchTabs"))))
   
}