JohnCoene / cicerone

🏛️ Give tours of your Shiny apps
https://cicerone.john-coene.com
Other
187 stars 7 forks source link

How to include `use_cicerone()` in a UI that uses `bslib::page_sidebar()`? #61

Closed asadow closed 4 months ago

asadow commented 4 months ago

Should I switch to using the fluid variant page_fluid()?

JohnCoene commented 4 months ago

It does not let you pass it to the ...?

asadow commented 4 months ago

It does but the tour does not start. Below is a reprex.

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

accordion_filters <- accordion(
  open = TRUE,
  actionButton("start", "Start Tour"),
  accordion_panel(
    "Dropdowns", 
    icon = bsicons::bs_icon("menu-app"),
    selectInput("building", "Building", choice = "My Building"),
  ),
)

guided_tour <- Cicerone$
  new()$
  step(
    el = "building",
    title = "Text Input",
    description = "This is where you enter the text you want to print."
  )

ui <- bslib::page_sidebar(
  use_cicerone(),
  title = "Title",
  sidebar = accordion_filters,
)

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

  start_tour <- FALSE
  observe({
    guided_tour$init()$start()
    start_tour <<- TRUE
  }) |> 
    bindEvent(input$start)
}

shinyApp(ui, server)
JohnCoene commented 4 months ago

Sorry, I've had the most hectic week.

It's in the documentation

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

accordion_filters <- accordion(
  open = TRUE,
  actionButton("start", "Start Tour"),
  accordion_panel(
    "Dropdowns", 
    icon = bsicons::bs_icon("menu-app"),
    div(
      id = "building-wrapper",
      selectInput("building", "Building", choice = "My Building")
    )
  )
)

guided_tour <- Cicerone$
  new()$
  step(
    el = "building-wrapper",
    title = "Text Input",
    description = "This is where you enter the text you want to print."
  )

ui <- bslib::page_sidebar(
  use_cicerone(),
  title = "Title",
  sidebar = accordion_filters,
)

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

  start_tour <- FALSE
  observe({
    guided_tour$init()$start()
    start_tour <<- TRUE
  }) |> 
    bindEvent(input$start)
}

shinyApp(ui, server)