时间戳

首页 > 解决方案 > 使用dashboardPage时，闪亮应用程序中两个不同tabItems的独立游览

r - 使用dashboardPage时，闪亮应用程序中两个不同tabItems的独立游览

问题描述

我正在使用dashboardPage构建闪亮应用程序的 UI。在这dashboardPage我有两个tabItems（MENU1 和 MENU2）。每一项都执行不同的任务tabItems，我需要指导用户完成这些任务。为了指导用户，我在下面的代码中actionButton为每个用户tabItem添加了相应的内容。observeEvent为此，我分别使用和introBox控制了步骤和介绍。data.stepdata.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)

标签： rshiny

解决方案

这是一个带有一次游览的解决方案，但是在显示第二部分之前会翻转页面。我求助于一些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"))))
   
}

推荐阅读