search

BennettForville / Bshiny2

0 stars 3 forks source link

Add action button #5

Closed leeyap closed 2 years ago

leeyap commented 2 years ago

Hi @BennettForville (@bpbond),

Like we talked about at our last meeting, I took a stab at figuring out how to add an actionButton() that will take the user from one tab to the next. Thanks to your attempt, Steph's code, and Stack Overflow, I figured it out.

For the actionButton() code:

In UI:

  1. Changing tabsetPanel() to navbarPage() in line 61. This allows us to assign an inputId to our list of tabs, which we need in order to use the corresponding server functions. One caveat, and you can play around with this - there is also a "title" argument that would put a title in the left corner of the tabs bar. I left it blank, you can add a title if you'd like or leave as is.
  2. Each tabPanel gets a "title" and "value" argument. This again is necessary for the server part of the code.
  3. The actual actionButton code needs its own unique inputId as well as a label (what the button will say). I have "Next page" as the label, feel free to change to whatever you'd like!

In server:

  1. In line 205, I needed to add another argument to server() called session. This passes in information about the user's current Shiny session, and allows for functional changes while they're using the app. This was necessary in order to be able to switch tabs.
  2. The actual function that makes an actionButton work is observeEvent(). First, we pass in the inputId of the actionButton.
  3. Next, we use the function updateTabsetPanel(). This is what changes the tab. Its arguments are the current session (which is why we needed step 4), then the inputId of the entire navbarPage. Just like with radioButtons, there is one inputId for all of the tabs. Finally, we tell it what the value argument of the tabsetPanel we want to go to (which is why we need step 2).

Happy to talk more about this in person if this is confusing! Let me know if you have questions.

(I also formatted your "impacts" tab to break up the paragraphs where you had left spaces, like we talked about on Friday. One tricky bit is that to get bullet points on your list of impacts, I actually had to wrap the code in an HTML function and use HTML notation for bullet points. That's what the <ul> <li> </li> </ul> bit is.)

bpbond commented 2 years ago

I am totally confused but 👏 @leeyap — great work!