R Shiny - Detect Cicerone guide start and end

code
r
shiny
Author

Ruben

Published

October 18, 2024

cicerone1 is a nice package that allows to integrate a tour in your Shiny app. Though I had the problem, that the guide was not really usable with accordions from the bslib package. When they were closed, the guide would just stop moving on. In this post I’ll present a quick fix to detect the start and end of the guide.

Install the package 2

When searching for a fix I saw in a GitHub issue that the maintainer included a new event to detect the end of a tour. So to this date it is necessary (to my knowledge) to install the development version of the package. You can do this with the following code: remotes::install_github("JohnCoene/cicerone").

Detecting the start and end of the guide

To detect the start I just observed a button I use to start the guide, because I didn’t want the guide started each time someone uses the app. In your UI you could integrate a button like this and start the guide when the button is pressed:

library(shiny)
library(bslib)
library(cicerone)

ui <- page_fluid(
  use_cicerone(),
  action_button("start", "Start guide")
  #...here should be the code for e.g. the accordions or other elements 
)

server <- function(input, output, session) {
  observeEvent(input$start, {
    # Now we can open the panels and then start the guide!
    bslib::accordion_panel_open(id = "your-accordion-id", values = TRUE)
    guide$init()$start()
  })
}

One problem that can occur is that the guide will still not start but the accordion opens. A simple but maybe not so nice workaround is to use the action Button as the first step of the guide, when it’s always visible in the app. The detect the end of the guide you can use the event input$cicerone_reset. In your server function this could look like this:

  observeEvent(input$cicerone_reset, {
    # Now we can close the panels again
    bslib::accordion_panel_close(id = "your-accordion-id", values = TRUE)
  })

Footnotes

  1. See on GitHub: https://github.com/JohnCoene/cicerone↩︎

  2. Emoji designed by OpenMoji – the open-source emoji and icon project. License: CC BY-SA 4.0↩︎