rshinyshinydashboard
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
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.
Solution
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).
- Create a Grouping Column/Variable from other Columns in R
- Specify the height of the bars in the gglikert function in R
- modelsummary modelplot: change linewidth
- How to create a conditional panel using a reactive object that is passed from another module?
- renderHighchart output not displaying in Shiny App
- How can I specify GeoTiff configuration of PixelIsPoint when exporting a raster using R package terra?
- Create a list from a dataframe in R
- Fast way of converting large list to dataframe
- rintrojs only shows first dialog in Safari
- Automatically read a column of lowercases True and False as logical
- How do I add counts to a stacked bar graph?
- Counting the number of rows between each pair of months?
- Plot multiple normalized stock charts from different dates into a single plot
- Select columns based on string match - dplyr::select
- Looking for a more efficient way to replace matrix elements
- custom R function with group argument does not work while using the filter
- ggsurvplot function, risk table alignment problem
- plot running average in ggplot2
- Calling variable in df within function
- How to find position of running minimum (runMin) in a vector in R?
- Using httr2::last_response() in conjunction with purrr::possibly()
- Cropping a raster using terra does not return the expected extent
- Can janitor::clean_names be used on only certain columns in a data frame?
- Efficient way of row binding time series in a data.table, with correctly sorted timestamps
- Defining optional arguments in R when more complex function
- Can I change the cursor in plotly only when hovering over points?
- Issue Loading RStoolbox: "Cannot find proj.db" Error
- Filter CSV files for specific value before importing
- Matching the same lines from 2 different files and 2 columns
- Conditional coloring and outer borders in pdf KableExtra table in R