Shiny Forms with Accordions 🎉
Learn how to elevate your Shiny forms from basic to professional with dynamic accordions. This tutorial demonstrates how to implement intelligent form organization and visual feedback using Shiny's accordion components
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
We have something that's like a super basic form that most people when they are first using Shiny, they would end up creating and this is very basic and it kind of works, but we can make it a lot more better, a lot more cooler.
If I take a look at an accordion like this, let me run it over here, simple accordion form would look something like this, when you can actually fill up a name, the email, the phone number, you can hit submit or you can collapse it, separate it in different chunks.
Dynamic accordion with visual feedback
So in Dynamic Accordion, what we do is the same way you would do an accordion, but we end up actually maximize the usage of our accordion panel. So we can actually have icons, which says like, hey, which are the accordion panels that need attention from the user. In this case, I have an exclamation mark with like red, which says like, hey, these sections are supposed to be filled up.
On hitting the submit button for like the person section, what I end up doing is I update the accordion panel, which the new title and the title is the information they ended up filling up. Also update the icon, which is a green check mark.
On hitting the submit button for like the person section, what I end up doing is I update the accordion panel, which the new title and the title is the information they ended up filling up. Also update the icon, which is a green check mark.
If you want to learn more about how to update the accordion panel, feel free to read the documentation for either the express mode or the core mode by going to the function reference documentation and find out different things you can do to update your accordion panel when the user has finished filling up that section.