Skip to content

Toggling a conditionalPanel within rintrojs #58

@natehawk2

Description

@natehawk2

I would like an introduction using rintrojs that highlights a button that toggles between showing and not showing a conditionalpanel. If the conditional panel is not showing, when the intro gets to that step I would like it to be selected so that it is showing. This I have accomplished using Shiny.setInputValue.

The trouble is that the toggle action button no longer works after doing the introduction. The value of the action button will still increase but it will no longer toggle the conditionalPanel.

Here is an example that has two intro steps and changes the conditionalPanel in the 'onchange' option of the introjs function in the observeEvent.

library(shiny)
library(shinyjs)
library(rintrojs)

ui <- fluidPage(
useShinyjs(),
introjsUI(),
sidebarPanel(
introBox(
actionButton(
"toggle",
"Toggle"
),
data.step = 1,
data.intro = "Step 1"
),
conditionalPanel(condition = 'input.toggle % 2 == 1',
style = "display: none;",
introBox(
tags$h4("some text displayed when toggled"),
data.step = 2,
data.intro = "Step 2"
)
),
br(),
actionButton("help", "Take Tour")
))

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

observeEvent(input$toggle, {
print(input$toggle)
})

observeEvent(input$help, {
print("in input$help observe event")
introjs(
session,
options = list(
"nextLabel" = "Next",
"prevLabel" = "Back",
"skipLabel" = "Exit"
),

  events = list(
    onchange = I(
      'if (this._currentStep==1) {
              Shiny.setInputValue("toggle", 1)
        }'
    )
    #, 
    # oncomplete = {print("yes")
    #   updateActionButton(session = session, 
    #                      inputId = "Toggle", 
    #                      label = "Boggle"
    #   )
    #   print("done")}
  )
)

})

}

shinyApp(ui, server)
I'm not sure why this is happening. I am open to other solutions that solve the toggle between conditional panel problem in other ways (not using Shiny.setInputValue inside the 'onchange' portion). In the commented code you can see I have tried to update the toggle action button in the 'oncomplete' portion but the introjs function doesn't seem to like that.

Thank you!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions