JohnCoene / cicerone

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

disable 'Next' until user hits a button #26

Closed mihirp161 closed 3 years ago

mihirp161 commented 3 years ago

Hello @JohnCoene. This is a very nice package, thanks for making it! I have a question (or a feature request??) for you:

Is it possible to disable the 'Next' button until user actually clicks on an asked input?

Thanks in advance!

Here is a reproducible example-

options(scipen = 99999) #converts the sci numbers to their regular format
library(shiny)
library(shinyjs)
library(shinyWidgets)
library(DT)
#remotes::install_github("JohnCoene/cicerone")
library(cicerone)

#------------ Tour
#Cicerone guide
guide <- Cicerone$
  new(id = "Guide")$
  step(
    "navbar",
    "Navigation Tabs",
    "You can cycle through these tabs to look specific type of reports."
  )$
  step(
    el = "Sidebar",
    "Choose report type",
    "Click on a radio button to select a specific report. For now, please SELECT 'iris.'"
  )$
  step( 
    #*****This approach doesn't work, I tried to at least auto select the 'iris' for the user.*****
    "[data-value='iris']",
    is_id = FALSE,
    # on_next = "function(element){
    #       $('#controller').click(2);
    #     }"
    on_highlighted = "function(element){
      $('#controller').click(2);
    }"
  )$
  step(
    el = "main_panel",
    "Observations",
    "Here you can see the output from the current selection in the Data tab."
  )$
  step(
    "[data-value='Some Plot']",
    "For Plots",
    "Now, SELECT 'Some Plot' tab to see a plot. But it's not there. Magic.",
    is_id = FALSE
  )

#---------------------------------------------- Shiny UI -------------------------------------------

ui <- fluidPage(

  cicerone::use_cicerone(),

  shinyjs::useShinyjs(), 

  # Create Right Side Text
  navbarPage( 

    title= div(HTML("G<em>T</em>")),
    id = "navbar",
    #------------------------------------------------------- General reports
    tabPanel("General Reports",

             sidebarLayout(
               # radio/action buttons
               sidebarPanel(

                 id = "Sidebar",

                 shinyWidgets::prettyRadioButtons(
                   inputId = "controller",
                   label = "Choose:", 
                   choices = c("About"= 1,
                               "iris"= 2),
                   icon= icon("check"),
                   selected = 1,
                   status = "success",
                   animation="smooth"
                 ),

                 br(),
                 br(),
                 a(actionButton(inputId = "admin_email", label = "Contact", 
                                icon = icon("envelope", lib = "font-awesome")),
                   href="mailto:xyz@email.us")
               ),

               #panel where output is shown from server
               mainPanel(
                 id = "main_panel",

                 tabsetPanel(
                   id = "hidden_tabs",
                   type = "hidden",
                   tabPanelBody(
                     "panel1", "Text coming soon in tab1."
                   ),

                   tabPanelBody(
                     "panel2", 
                     tabsetPanel(
                       tabPanel("Data", DT::DTOutput('panel2_data')),
                       tabPanel(
                         "Some Plot"
                       )
                     )
                   )
                 )
               )
             )
    ),

    #------------------------------------------------------------- Other reports
    tabPanel("Other Reports"),

    #resizes the navbar tabs
    tags$head(tags$style(HTML('.navbar-brand {width: 270px; font-size:35px; text-align:left;
                              font-family: "serif";')))
  )
)

#---------------------------------------------- Shiny Server -------------------------------------------
server <- function(input, output, session) {

  guide$init()$start()

  # here we put all the data
  data_sets <- list(df1 = data.frame(), 
                    df2 = iris,
                    df3 = data.frame(), 
                    df4 = mtcars)

  # store current dataset in reactive so we can work with plot panels
  data_to_use <- reactiveValues(name = "df", data = data.frame())

  observeEvent(input$controller, {

    # skip first panel since it is used to display navigation
    updateTabsetPanel(session, inputId= "hidden_tabs", selected = paste0("panel", input$controller))

    # ensure value is available throught selected tabSet
    req(input$controller)

    # get current data and df name
    data_to_use$data <- data_sets[[as.numeric(input$controller)]]
    data_to_use$name <- names(data_sets[as.numeric(input$controller)])

    # update table and sum. Use server = FALSE to get full table
    output[[paste0('panel',  input$controller, '_data')]] <- DT::renderDT(server = FALSE, {
      DT::datatable(data_to_use$data,
                    filter = 'top', 
                    extensions = 'Buttons')})

  })

  # observeEvent(input$guide, {
  #   guide$start()
  # })

  observeEvent(input$cicerone_reset, {
    print("Done")
  })
}
mihirp161 commented 3 years ago

No longer need help. I will work with the current set of tools available in this package.