Robust solution for multi-page apps (such as navbar layout) #17

Open
thercast opened this Issue Feb 2, 2017 · 3 comments

Projects

None yet

2 participants

@thercast
thercast commented Feb 2, 2017

I've been using rintrojs for more of my Shiny apps but came across a problem with my apps that use the navbarPage layout in shiny as seen in this gist. Basically the tool text appears on the screen but the focus is still on the first tabPanel and does not go to the second like it should. One of the listeners to my podcast also has experienced this issue and alerted me to a solution you posted as a workaround. I was just curious if there is a more robust solution we could use so that it would support going back towards the first tabPanel and not just for going forward. Thanks again for your great work, I highlighted as my package pick in episode 19 👍

@carlganz
Owner
carlganz commented Feb 2, 2017

Hi Eric,

Thanks for the shoutout in the podcast!

Can you explain exactly what you mean by 'go back to the first tabPanel'? I find that when I hit next, then back, it does bring me back to the first tabPanel. Are you asking if it is possible to make it go back to the first tab upon completion and/or exiting?

Regards,
Carl

@thercast
thercast commented Feb 2, 2017

Hi Carl, thanks for your quick reply! I did a little more troubleshooting and figured out I hadn't adapted the code correctly. After changing the code to the following I can now at least step back to the first tabPanel after visiting the item in the second one:

  observeEvent(input$btn, {
    introjs(
      session,
      events = list(
        "onchange" = "if (this._currentStep==0) {
        $('a[data-value=\"Summaries\"]').removeClass('active');
        $('a[data-value=\"Plot\"]').addClass('active');
        $('a[data-value=\"Plot\"]').trigger('click');
        }
        if (this._currentStep==1) {
        $('a[data-value=\"Summaries\"]').removeClass('active');
        $('a[data-value=\"Plot\"]').addClass('active');
        $('a[data-value=\"Plot\"]').trigger('click');
        }
        if (this._currentStep==2) {
        $('a[data-value=\"Plot\"]').removeClass('active');
        $('a[data-value=\"Summaries\"]').addClass('active');
        $('a[data-value=\"Summaries\"]').trigger('click');
        }"
      ))
  })

But it would be nice if when the user hits Done the app would go back to the first tab, and yes the same for exiting. While this toy app only had two tabPanels and not many elements, I have a much larger app with 5 tabPanels and most of then have additional tabs within (approximate 30 inputs/outputs I want to highlight), so I'm looking for a way to implement the logic above in a more intuitive way at least from a shiny perspective.

@carlganz carlganz added the enhancement label Feb 2, 2017
@carlganz
Owner
carlganz commented Feb 2, 2017

I get what you are saying. I agree there should be a nicer way to deal with tabs, and events. I will spend some time thinking about this.

Thanks for the feedback!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment