r语言 - 当使用dashboardPage时，在闪亮的应用程序中独立游览两个不同的tabitem

Question

我使用dashboardPage来构建一个闪亮的应用程序的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"))))

}