Hello Everyone, I'm trying to build a guided tour among tabs which have conditional panels. While I can move through tabs, I cannot do that over conditional panels. I define the steps on the server side

DEFINITION OF STEPS

element <- c('#elem_A_tab1', '#elem_B_tab2_inCondPanel', '#elem_C_tab2_outOfCondPanel') intro <- paste0('text ', length(element)) tourData_rintro <- data.frame(element, intro)

START TOUR

introjs(session, options = list(steps = tourData_rintro), events = list(onbeforechange = readCallback("switchTabs")))

Steps involving hidden conditional panels are not properly shown when the panel is hidden. Is there any trick to open/close a conditional panel during the steps?

Many thanks for any insight Paolo

Can you please provide a full reproducible example? In general, all elements of the intro need to be in the DOM when the intro starts. I can't remember off the top of my head but there may be a way to tell Shiny to render hidden elements to DOM even if they aren't shown.

Hello Carl, sorry for the late reply. I did some steps forward opening/closing conditionalpanels during rintrojs steps but there're some open issues and the solution I got until now is not elegant

I add a simple reprex

Many thanks for any help, Paolo

#

======================== RINTROJS WITH CONDITIONALPANELS

===================== #

library(shiny) library(shinyWidgets) library(rintrojs)

COMMENTS FOR ME

- open closing conditional panels during steps => ok however the

switchFilter doesn't change visually

- the first introjs step defined on #switchFilter doesn't work correctly

- find a way to put onchange events in the global data.frame

tourData_rintro_1

RINTROJS STEPS

element <- c('#switchFilter', '#n', '#input_text') intro <- c('Choose histogram or text','Here you can choose nr of observations','Here you can insert text') tourData_rintro_1 <- data.frame(element, intro)

n <- 200

ui <- bootstrapPage(

br(), br(), br(), introjsUI(),

START INTROJS

actionButton("btn_tour", "Tour"),

SWITCH BETWEEN TWO PANELS

shinyWidgets::materialSwitch(inputId = "switchFilter", label = "Filter", status = "danger", value = FALSE),

PANEL HISTOGRAM

conditionalPanel(condition = 'input.switchFilter', div(numericInput('n', 'Number of obs', n), plotOutput('plot'))),

PANEL TEXT

conditionalPanel(condition = '!input.switchFilter', textInput('input_text', 'write here'))

)

Define the server code

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

output$plot <- renderPlot({ hist(runif(input$n)) })

INTROJS TOUR

ONCHANGE BASED ON NR OF STEP ENABLE/DISABLE THE TWO CONDITIONAL PANELS

observeEvent(input$btn_tour, { rintrojs::introjs(session, options = list(steps = tourData_rintro_1) , events = list(onbeforechange = readCallback("switchTabs"), onchange = I(' (function(obj){

                                      if (obj._currentStep == 1){

Shiny.setInputValue("switchFilter", true, {priority: "event"}); }

                                      if (obj._currentStep == 2){

Shiny.setInputValue("switchFilter", false, {priority: "event"}); }

                                    })(this);
                      '))
)

})

}

Return a Shiny app object

shinyApp(ui = ui, server = server)

https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail Mail priva di virus. www.avast.com https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail <#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2>

Il giorno lun 20 lug 2020 alle ore 22:58 Carl Ganz notifications@github.com ha scritto:

Can you please provide a full reproducible example? In general, all elements of the intro need to be in the DOM when the intro starts. I can't remember off the top of my head but there may be a way to tell Shiny to render hidden elements to DOM even if they aren't shown.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/carlganz/rintrojs/issues/49#issuecomment-661329662, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABHVRLQAFAJM2RDRCOTV3F3R4SVXVANCNFSM4PCBGTMQ .

I solved two open points in my previous message

materialSwitch rintrojs selection (by putting #switchFilter inside a div)
materialSwitch animation during steps by using $("#switchFilter").prop() method

The remaining open point is putting onchange events inside tourData_rintro_1 is still unsolved.

Best, Paolo

#

======================== RINTROJS WITH CONDITIONALPANELS

===================== #

library(shiny) library(shinyWidgets) library(rintrojs)

COMMENTS

- open closing conditional panels during steps

=> for control animation put $("#switchFilter").prop("checked", true);

- the first introjs step defined on #switchFilter doesn't work correctly

=> PUT switchFilter INSIDE A DIV and focus on this one inside rintrojs

steps

- find a way to put onchange events in the global data.frame

tourData_rintro_1

UNSOLVED

RINTROJS STEPS

element <- c('#divswitch', '#n', '#numeri', '#input_text') intro <- c('Choose histogram or text','Here you can choose nr of observations', 'Here are all input numbers', 'Here you can insert text') tourData_rintro_1 <- data.frame(element, intro)

n <- 200

ui <- bootstrapPage(

br(), br(), br(), introjsUI(),

START INTROJS

actionButton("btn_tour", "Tour"),

SWITCH BETWEEN TWO PANELS

div(id = 'divswitch', shinyWidgets::materialSwitch(inputId = "switchFilter", label = "Filter", status = "danger", value = FALSE)),

PANEL HISTOGRAM

conditionalPanel(condition = 'input.switchFilter',

               div(id = 'numeri',
               numericInput('n', 'Number of obs', n),
               numericInput('m', 'FAKE Number of obs', n),
               ),

                   plotOutput('plot')),

PANEL TEXT

conditionalPanel(condition = '!input.switchFilter', textInput('input_text', 'write here'))

)

Define the server code

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

output$plot <- renderPlot({ hist(runif(input$n)) })

INTROJS TOUR

ONCHANGE BASED ON NR OF STEP ENABLE/DISABLE THE TWO CONDITIONAL PANELS

observeEvent(input$btn_tour, { rintrojs::introjs(session, options = list(steps = tourData_rintro_1) , events = list(onbeforechange = readCallback("switchTabs"), onchange = I(' (function(obj){

                                      if (obj._currentStep == 1){

Shiny.setInputValue("switchFilter", true, {priority: "event"});

$("#switchFilter").prop("checked", true); }

                                      if (obj._currentStep == 3){

Shiny.setInputValue("switchFilter", false, {priority: "event"});

$("#switchFilter").prop("checked", false); }

                                    })(this);
                      '))
)

})

}

Return a Shiny app object

shinyApp(ui = ui, server = server)

Il giorno sab 1 ago 2020 alle ore 10:08 Paolo Tenconi < paolo.tenconi@gmail.com> ha scritto:

Hello Carl, sorry for the late reply. I did some steps forward opening/closing conditionalpanels during rintrojs steps but there're some open issues and the solution I got until now is not elegant

I add a simple reprex

Many thanks for any help, Paolo

#

======================== RINTROJS WITH CONDITIONALPANELS

===================== #

library(shiny) library(shinyWidgets) library(rintrojs)

COMMENTS FOR ME

- open closing conditional panels during steps => ok however the

switchFilter doesn't change visually

- the first introjs step defined on #switchFilter doesn't work correctly

- find a way to put onchange events in the global data.frame

tourData_rintro_1

RINTROJS STEPS

element <- c('#switchFilter', '#n', '#input_text') intro <- c('Choose histogram or text','Here you can choose nr of observations','Here you can insert text') tourData_rintro_1 <- data.frame(element, intro)

n <- 200

ui <- bootstrapPage(

br(), br(), br(), introjsUI(),

START INTROJS

actionButton("btn_tour", "Tour"),

SWITCH BETWEEN TWO PANELS

shinyWidgets::materialSwitch(inputId = "switchFilter", label = "Filter", status = "danger", value = FALSE),

PANEL HISTOGRAM

conditionalPanel(condition = 'input.switchFilter', div(numericInput('n', 'Number of obs', n), plotOutput('plot'))),

PANEL TEXT

conditionalPanel(condition = '!input.switchFilter', textInput('input_text', 'write here'))

)

Define the server code

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

output$plot <- renderPlot({ hist(runif(input$n)) })

INTROJS TOUR

ONCHANGE BASED ON NR OF STEP ENABLE/DISABLE THE TWO CONDITIONAL PANELS

observeEvent(input$btn_tour, { rintrojs::introjs(session, options = list(steps = tourData_rintro_1) , events = list(onbeforechange = readCallback("switchTabs"), onchange = I(' (function(obj){
                                      if (obj._currentStep == 1){
Shiny.setInputValue("switchFilter", true, {priority: "event"}); }
                                      if (obj._currentStep == 2){
Shiny.setInputValue("switchFilter", false, {priority: "event"}); }
                                    })(this);
                      '))
)
})

}

Return a Shiny app object

shinyApp(ui = ui, server = server)

https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail Mail priva di virus. www.avast.com https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail <#m_-2765150087243535537_DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2>

Il giorno lun 20 lug 2020 alle ore 22:58 Carl Ganz < notifications@github.com> ha scritto:

Can you please provide a full reproducible example? In general, all elements of the intro need to be in the DOM when the intro starts. I can't remember off the top of my head but there may be a way to tell Shiny to render hidden elements to DOM even if they aren't shown.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/carlganz/rintrojs/issues/49#issuecomment-661329662, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABHVRLQAFAJM2RDRCOTV3F3R4SVXVANCNFSM4PCBGTMQ .

Hi lampoverde, I tried your solution with a radiobutton but doesn't work. Here's my code:

library(shiny)
library(shinyWidgets)
library(rintrojs)

# COMMENTS

# - open closing conditional panels during steps
# => for control animation put $("#switchFilter").prop("checked", true);

# - the first introjs step defined on #switchFilter doesn't work correctly

# => PUT switchFilter INSIDE A DIV and focus on this one inside rintrojs
steps

# - find a way to put onchange events in the global data.frame
tourData_rintro_1
# UNSOLVED

# RINTROJS STEPS
element <- c('#divswitch', '#n', '#numeri', '#input_text', "#divradio", "#unoid", "#minestraid")
intro <- c('Choose histogram or text','Here you can choose nr of
observations', 'Here are all input numbers',
'Here you can insert text', "select radio here", "ti piace uno", "ti piace minestra")
tourData_rintro_1 <- data.frame(element, intro)

n <- 200

ui <- bootstrapPage(

  br(), br(), br(), introjsUI(),

  # START INTROJS
  actionButton("btn_tour", "Tour"),

  # SWITCH BETWEEN TWO PANELS
  div(id = 'divswitch', shinyWidgets::materialSwitch(inputId =
                                                       "switchFilter", label = "Filter", status = "danger", value = FALSE)),
  div(id = "divradio", radioButtons("radio1", "seleziona una cosa", choices = c("uno", "minestra"))),
  # PANEL HISTOGRAM
  conditionalPanel(condition = 'input.switchFilter',

                   div(id = 'numeri',
                       numericInput('n', 'Number of obs', n),
                       numericInput('m', 'FAKE Number of obs', n),
                   ),

                   plotOutput('plot')),
  conditionalPanel(condition = "input.radio1 == 'uno'", div(h4("questo dice che è uno"), id = "unoid")),
  conditionalPanel(condition = "input.radio1 == 'minestra'", div(h4("questo dice che è minestra"), id = "minestraid")),

  # PANEL TEXT
  conditionalPanel(condition = '!input.switchFilter',
                   textInput('input_text', 'write here'))

)

# Define the server code
server <- function(input, output, session) {

  output$plot <- renderPlot({
    hist(runif(input$n))
  })

  # INTROJS TOUR
  # ONCHANGE BASED ON NR OF STEP ENABLE/DISABLE THE TWO CONDITIONAL PANELS
  observeEvent(input$btn_tour, {
    rintrojs::introjs(session, options = list(steps = tourData_rintro_1)
                      ,
                      events = list(onbeforechange =
                                      readCallback("switchTabs"),
                                    onchange = I('
                                        (function(obj){

                                          if (obj._currentStep == 1){

Shiny.setInputValue("switchFilter", true, {priority: "event"});

$("#switchFilter").prop("checked", true);
                                          }

                                          if (obj._currentStep == 3){

Shiny.setInputValue("switchFilter", false, {priority: "event"});

$("#switchFilter").prop("checked", false);
                                          }
                                          if (obj._currentStep == 5){

Shiny.setInputValue("radio1", "uno", {priority: "event"});

$("#radio1").prop("checked", "uno");
                                          }

                                          if (obj._currentStep == 6){

Shiny.setInputValue("radio1", "minestra", {priority: "event"});

$("#radio1").prop("checked", "minestra");
                                          }

                                        })(this);
                          '))
    )

  })

}

# Return a Shiny app object
shinyApp(ui = ui, server = server)

carlganz / rintrojs

Conditional panels #49

DEFINITION OF STEPS

START TOUR

#

======================== RINTROJS WITH CONDITIONALPANELS

===================== #

COMMENTS FOR ME

- open closing conditional panels during steps => ok however the

- the first introjs step defined on #switchFilter doesn't work correctly

- find a way to put onchange events in the global data.frame

RINTROJS STEPS

START INTROJS

SWITCH BETWEEN TWO PANELS

PANEL HISTOGRAM

PANEL TEXT

Define the server code

INTROJS TOUR

ONCHANGE BASED ON NR OF STEP ENABLE/DISABLE THE TWO CONDITIONAL PANELS

Return a Shiny app object

#

======================== RINTROJS WITH CONDITIONALPANELS

===================== #

COMMENTS

- open closing conditional panels during steps

=> for control animation put $("#switchFilter").prop("checked", true);

- the first introjs step defined on #switchFilter doesn't work correctly

=> PUT switchFilter INSIDE A DIV and focus on this one inside rintrojs

- find a way to put onchange events in the global data.frame

UNSOLVED

RINTROJS STEPS

START INTROJS

SWITCH BETWEEN TWO PANELS

PANEL HISTOGRAM

PANEL TEXT

Define the server code

INTROJS TOUR

ONCHANGE BASED ON NR OF STEP ENABLE/DISABLE THE TWO CONDITIONAL PANELS

Return a Shiny app object

#

======================== RINTROJS WITH CONDITIONALPANELS

===================== #

COMMENTS FOR ME

- open closing conditional panels during steps => ok however the

- the first introjs step defined on #switchFilter doesn't work correctly

- find a way to put onchange events in the global data.frame

RINTROJS STEPS

START INTROJS

SWITCH BETWEEN TWO PANELS

PANEL HISTOGRAM

PANEL TEXT

Define the server code

INTROJS TOUR

ONCHANGE BASED ON NR OF STEP ENABLE/DISABLE THE TWO CONDITIONAL PANELS

Return a Shiny app object