Introbox on the Server Side without an ID

[KevinHua93]

So I saw the two examples on the introduction but I would like to do mix of the two. I would like to put the intro box on the server side but it seems that we need an ID for each element in that case. How can I put an intro box on, for example, the titlePanel which doesn't have an ID here?

library(rintrojs)

ui <- shinyUI(fluidPage(
      introjsUI(),
      titlePanel("Old Faithful Geyser Data"),
      mainPanel(
        textInput("intro","Enter an introduction"),
         actionButton("btn","Press me")
      )
   )
)

server <- shinyServer(function(input, output, session) {

  steps <- reactive(data.frame(element = c(NA,"#btn"),
                               intro = c(input$intro,"This is a button")))

  observeEvent(input$btn,{
    introjs(session,options = list(steps=steps()))

  })

})

# Run the application 
shinyApp(ui = ui, server = server)

I think I need to do it that way as I have multiple rintrojs in my App

[carlganz]

You'd have to look at intro.js docs but I am pretty sure you have to choose between static and dynamic intros; I don't think you can mix them.

The elements you want to select don't necessarily need IDs for dynamic server intros, any CSS selector will work like so:

library(rintrojs)
library(shiny)

ui <- shinyUI(fluidPage(
  introjsUI(),
  titlePanel("Old Faithful Geyser Data"),
  mainPanel(
    textInput("intro","Enter an introduction"),
    actionButton("btn","Press me")
  )
)
)

server <- shinyServer(function(input, output, session) {

  steps <- reactive(data.frame(element = c(NA,".container-fluid > h2:nth-child(1)","#btn"),
                               intro = c(input$intro,"This CSS selector works in this case but you may need to use a different selector depending on what you are trying to select","This is a button")))

  observeEvent(input$btn,{
    introjs(session,options = list(steps=steps()))

  })

})

# Run the application 
shinyApp(ui = ui, server = server)

Hopefully that helps

[KevinHua93]

Thank you very much ! Any easy way to find the CSS selector of an element of the app?

[carlganz]

If you open your app without the intro in a web browser like Firefox or Chrome, right click the element you want to highlight and click "inspect element". Then in the inspector in the browser you'll see the raw HTML highlighted. If you right click that, select copy, then select CSS Selector it'll give you what you want.

Caution: CSS selectors, especially the ones the browser gives you are finnicky so it's likely if you make changes to an application you'll have to update the CSS selectors. The reason we try to use IDs is they are unique and don't change so they are most reliable CSS selector