r - 添加 UI 元素的一部分作为 introjs() 教程的步骤

Question

使用 introjs() 时是否可以将 UI 的一部分(例如 renderDataTable 的过滤器部分)添加到介绍步骤？

示例: 我希望用户知道他们可以使用表的过滤器部分来过滤结果。因此，作为附加步骤，我想突出显示数据表的过滤器部分，作为本教程的步骤之一。

library(shiny)
library(DT)
library(rintrojs)

ui <- fluidPage(
    introjsUI(),  # include introjs
    div(id = "intro", h3("Intro")),
    dataTableOutput("my_table")
)


server <- function(input, output, session) {
    output$my_table <- renderDataTable({
        datatable(iris, filter = 'top')
    })
    
    # Trigger introjs on app start
        introjs(session, options = list(steps = list(
            list(element = "#intro", intro = "Intro"),
            list(element = "#my_table", intro = "This is the table. Now zooming in on filters...")
        )))
}

shinyApp(ui, server)

Answer 1

您可以添加任何有效的 CSS 选择器，因此您所需要做的就是找到一种正确的方法来寻址包含过滤器元素的行。此外，由于数据表是动态呈现的，因此您不应该太早调用 introjs，否则您尝试定位的元素尚不存在。一个不错的选择是在系统第一次刷新时调用 introjs，其中数据表已填充。

将所有内容放在一起，以下代码片段实现了该功能:

# Trigger introjs on app start but not before the system is flushed
session$onFlushed(function() {
  introjs(session, options = list(steps = list(
    list(element = "#intro", intro = "Intro"),
    list(element = "#my_table", intro = "This is the table. Now zooming in on filters..."),
    ### :nth-of-type will select the second row (<tr>), that is where the filters are
    list(element = "tr:nth-of-type(2)", intro = "Here you can apply filters")
  )))
})