Using the ‘rintrojs’ in Shiny to create e step-by-step introductions on app usage; dialog box appears top left corner for some tabs but not others

Question

I am using the rintrojs package to create pop-up text boxes within my shiny dashboard app which will help the user understand the functions within the shiny app. My app includes multiple tabs.

My issue is that in some of the tabs, the dialog box appears at the top left corner of the screen. For instance, when I activate the dialog box, this happens:-

This happens on the first and second tab. However, on the third tab, it works normally and the way it is intended:-

Here is my shiny code:-

ui<-fluidPage(
  introjsUI(),
  titlePanel('My dashboard'),
  tabsetPanel(
    
    
    
    #=============================================Firsttab==================================================
    
    tabPanel("First tab", 
             
             
             sidebarLayout(
               sidebarPanel(width = 5,
                            actionButton("help_tab1", "About this Page"),
                            h5("Before you begin any analysis, you may to read this text"),
                            br(),
                            h5("Here is some text that explains some stuff"),
                            introBox(
                              numericInput("numericinput1", "Put a number in here",1000),data.step = 1,
                              data.intro = "You should put a number in this box"),
                            useShinyalert(),
                            #add_busy_spinner(spin = "fading-circle"),
                            introBox(
                              actionButton(inputId = "actionbutton1", "Button"),data.step = 2,
                              data.intro = "Press this button for something to happen")),
               mainPanel(fluidRow(
                 column(5, textOutput("text1")),
                 column(8, textOutput("text2")),
                 
                 column(8, textOutput("text3")),
                 
                 column(8, textOutput("text4")),
                 
                 column(8, h4("Table 1") ,DT::dataTableOutput("table1")),
                 
                 column(8, h4("Table 2") ,DT::dataTableOutput("table2")),
                 
                 column(8,h4("Table 3") , DT::dataTableOutput("table3")),
                 
                 column(8, h4("Table 4"), DT::dataTableOutput("table4")),
                 
                 column(12, h4("Table 5"),DT::dataTableOutput("table5")))))),#end of tab panel
    
    #==================================================================Secondtab===========================================
    tabPanel("Second tab",
             sidebarPanel(width = 4,
                          
                          actionButton("help_tab2", "About this Page"),
                          h5("Here is some text"),
                          introBox(
                            numericInput("numericinput2","Put a number in here",5), data.step = 1, 
                            data.intro = "Put a number in this box"),
                          br(),
                          h5("Some more text"),
                          introBox( 
                            numericInput("numericinput3", "Put a number in here", 100), data.step = 2,
                            data.intro = "Put a number in this box"),
                          h5("Here is some text"),
                          introBox( 
                            actionButton("actionbutton2", "Button"), data.step = 3, 
                            data.intro = "Something will happen if you press this button")),
             mainPanel(
               textOutput("text5"),
               h4("Plot 1"),
               plotOutput("plot1", width = "100%"),
               h4("Plot 2"),
               plotOutput("plot2",width = "100%"),
               h4("Plot 3"),
               plotOutput("plot3",width="100%"))),#end of tab
    
    #===================================================================================Thirdtab=================================
   
    
    tabPanel("Third tab",
             sidebarPanel(width = 4,
                          
                          actionButton("help_tab3", "About this Page"),
                          h5("Here is some text"),
                          introBox(
                            numericInput("numericinput4","Put a number in here",5), data.step = 1, 
                            data.intro = "Put a number in this box"),
                          br(),
                          h5("Some more text"),
                          introBox( 
                            numericInput("numericinput5", "Put a number in here", 100), data.step = 2,
                            data.intro = "Put a number in this box"),
                          h5("Here is some text"),
                          introBox( 
                            actionButton("actionbutton3", "Button"), data.step = 3, 
                            data.intro = "Something will happen if you press this button")),
             mainPanel(
               textOutput("text6"),
               h4("Plot 4"),
               plotOutput("plot4", width = "100%"),
               h4("Plot 5"),
               plotOutput("plot5",width = "100%"),
               h4("Plot 6"),
               plotOutput("plot6",width="100%")))))



server <- function(input, output, session) {
  
  observeEvent(input$help_tab1,
               introjs(session, options = list("showBullets"="false", "showProgress"="true", 
                                               "showStepNumbers"="false","nextLabel"="Next","prevLabel"="Prev","skipLabel"="Skip"))
  )
  
  observeEvent(input$help_tab2,
               introjs(session, options = list("showBullets"="false", "showProgress"="true", 
                                               "showStepNumbers"="false","nextLabel"="Next","prevLabel"="Prev","skipLabel"="Skip"))
  )
  
  observeEvent(input$help_tab3,
               introjs(session, options = list("showBullets"="false", "showProgress"="true", 
                                               "showStepNumbers"="false","nextLabel"="Next","prevLabel"="Prev","skipLabel"="Skip"))
  )
  
}

shinyApp(ui,server)

How can I get this feature to work in the first/second tab as it is working within the third tab? This is my first time using this function so any pointers would be appreciated.

score 1 · Accepted Answer · edited Apr 01 '21 at 18:51

I added your 'intro's' in a dataframe and subset the items in a reactive for the specific tabs. Below a working example:

library(shiny)
library(rintrojs)
ui<-fluidPage(
  introjsUI(),
  titlePanel('My dashboard'),
  tabsetPanel(
    #=============================================Firsttab==================================================
    tabPanel(
      "First tab",
      sidebarLayout(
        sidebarPanel(
          width = 5,
          actionButton("help_tab1", "About this Page"),
          h5("Before you begin any analysis, you may to read this text"),
          br(),
          h5("Here is some text that explains some stuff"),
          numericInput("numericinput1", "Put a number in here",1000),
          actionButton(inputId = "actionbutton1", "Button")),
        mainPanel(
          fluidRow(
            column(5, textOutput("text1"))
          )
        )
      )
    ),
    
    #==================================================================Secondtab===========================================
    tabPanel(
      "Second tab",
      sidebarPanel(
        width = 4,
        actionButton("help_tab2", "About this Page"),
        h5("Here is some text"),
        numericInput("numericinput2","Put a number in here",5), 
        br(),
        h5("Some more text")
      ),
      
      mainPanel(
        textOutput("text5")
      )
    ),#end of tab
    
    #===================================================================================Thirdtab=================================
    tabPanel(
      "Third tab",
      sidebarPanel(
        width = 4,
        actionButton("help_tab3", "About this Page"),
        h5("Here is some text op tab 3"),
        numericInput("numericinput4","Put a number in here",3), 
        br(),
        h5("Some more text"),
        mainPanel(
          textOutput("text6")
        )
      )
    )
  )
)



server <- function(input, output, session) {
  
  help_text <- reactive({
    if (input$help_tab1) whichtab <- "help_tab1"
    if (input$help_tab2) whichtab <- "help_tab2"
    if (input$help_tab3) whichtab <- "help_tab3"
    subset(helptext, tab == whichtab)
  })
  
  observeEvent(input$help_tab1,
               introjs(session, options = list("showBullets"="false", "showProgress"="true", 
                                               "showStepNumbers"="false","nextLabel"="Next","prevLabel"="Prev","skipLabel"="Skip", steps=help_text()))
  )
  
  observeEvent(input$help_tab2,
               introjs(session, options = list("showBullets"="false", "showProgress"="true", 
                                               "showStepNumbers"="false","nextLabel"="Next","prevLabel"="Prev","skipLabel"="Skip", steps=help_text()))
  )
  
  observeEvent(input$help_tab3,
               introjs(session, options = list("showBullets"="false", "showProgress"="true", 
                                               "showStepNumbers"="false","nextLabel"="Next","prevLabel"="Prev","skipLabel"="Skip", steps=help_text()))
  )
  
}

helptext <- data.frame(
  tab = c("help_tab1", "help_tab1", "help_tab2", "help_tab3")
  , step = c(1,2,1,1)
  , element = c("#numericinput1", "#actionbutton1", "#numericinput2", "#numericinput4")
  , intro = c("You should put a number in this box","Press this button for something to happen","Put a number in this box","Put a number in this box")
)


shinyApp(ui,server)

It might also possible to give each tab a specific id, so you know which tab is selected. You can make a general general help-button (instead of one on each page).

This is great and done exactly what I was needing it to do. Thank you :) — metaltoaster, Apr 15 '21 at 09:05
Your answer is good but it's flawed. It doesn't work if you click on all the buttons and then start over. It doesn't work on many cases actually. I posted a solution based on your answer that works. — Leonardo Siqueira, Nov 30 '21 at 00:02

score 0 · Answer 2 · answered Nov 30 '21 at 00:02

Based on Roelof's answer but working with edge cases.

library(shiny)
library(rintrojs)
library(data.table)

ui<-fluidPage(
  introjsUI(),
  titlePanel('My dashboard'),
  tabsetPanel(
    #=============================================Firsttab==================================================
    tabPanel(
      "First tab",
      sidebarLayout(
        sidebarPanel(
          width = 5,
          actionButton("help_tab1", "About this Page"),
          h5("Before you begin any analysis, you may to read this text"),
          br(),
          h5("Here is some text that explains some stuff"),
          numericInput("numericinput1", "Put a number in here",1000),
          actionButton(inputId = "actionbutton1", "Button")),
        mainPanel(
          fluidRow(
            column(5, textOutput("text1"))
          )
        )
      )
    ),
    
    #==================================================================Secondtab===========================================
    tabPanel(
      "Second tab",
      sidebarPanel(
        width = 4,
        actionButton("help_tab2", "About this Page"),
        h5("Here is some text"),
        numericInput("numericinput2","Put a number in here",5), 
        br(),
        h5("Some more text")
      ),
      
      mainPanel(
        textOutput("text5")
      )
    ),#end of tab
    
    #===================================================================================Thirdtab=================================
    tabPanel(
      "Third tab",
      sidebarPanel(
        width = 4,
        actionButton("help_tab3", "About this Page"),
        h5("Here is some text op tab 3"),
        numericInput("numericinput4","Put a number in here",3), 
        br(),
        h5("Some more text"),
        mainPanel(
          textOutput("text6")
        )
      )
    )
  )
)



server <- function(input, output, session) {
  
  helptext <- reactive(data.table(
    tab = c("help_tab1", "help_tab1", "help_tab2", "help_tab3"),
    step = c(1,2,1,1),
    element = c("#numericinput1", "#actionbutton1", "#numericinput2", "#numericinput4"),
    intro = c("You should put a number in this box","Press this button for something to happen","Put a number in this box","Put a number in this box")
  ))
  
  observeEvent(
    eventExpr = input$help_tab1,
    handlerExpr = {
      introjs(session, 
              options = list(
                "showBullets"="false", "showProgress"="true", 
                "showStepNumbers"="false","nextLabel"="Next","prevLabel"="Prev","skipLabel"="Skip",
                steps=helptext()[tab == "help_tab1"]
              )
      )
    }
  )
  
  observeEvent(
    eventExpr = input$help_tab2,
    handlerExpr = {
      introjs(session, 
              options = list(
                "showBullets"="false", "showProgress"="true", 
                "showStepNumbers"="false","nextLabel"="Next","prevLabel"="Prev","skipLabel"="Skip",
                steps=helptext()[tab == "help_tab2"]
              )
      )
    }
  )
  
  observeEvent(
    eventExpr = input$help_tab3,
    handlerExpr = {
      introjs(session, 
              options = list(
                "showBullets"="false", "showProgress"="true", 
                "showStepNumbers"="false","nextLabel"="Next","prevLabel"="Prev","skipLabel"="Skip",
                steps=helptext()[tab == "help_tab3"]
              )
      )
    }
  )
  
}



shinyApp(ui,server)

Using the ‘rintrojs’ in Shiny to create e step-by-step introductions on app usage; dialog box appears top left corner for some tabs but not others

2 Answers2

Linked