Transform Boring Forms into Eye-Catching UI: Shiny Party Tricks That Will Make You Look Like a Pro 🎉
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. We cover both basic accordion implementation and advanced dynamic features including status indicators, automatic title updates, and section validation. Perfect for developers looking to enhance their Shiny applications with modern, user-friendly form interfaces. Key features covered: Basic form to accordion conversion Dynamic panel updates Status indicator implementation Visual feedback systems Section validation techniques Reference Documentation: For accordion implementation, see: https://shiny.posit.co/r/reference/shiny/latest/accordion For dynamic updates, see: https://shiny.posit.co/r/reference/shiny/latest/updateAccordion For input validation, see: https://shiny.posit.co/r/reference/shiny/latest/validate For modular development, see: https://shiny.posit.co/r/articles/build/modules/ Timestamps: 0:00 - Introduction 0:23 - Basic form structure overview 0:50 - Introduction to accordion components 1:11 - Basic accordion implementation 1:35 - Dynamic accordion enhancement 2:00 - Status indicators and visual feedback 2:29 - Updating accordion panels 2:55 - Documentation resources 3:18 - Conclusion
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
Hi everyone, I'm Karan Gathani, I work in the Shiny team and for today's video we'll be looking at some cool shiny party tricks wherein like if you go to a party and someone is boasting about their achievements but you have nothing to share, you could actually show these cool shiny tricks and like woo the crowd.
The first one we'll be taking a look at is a basic contact form or any form that you would actually want a user to end up using and so in this case 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 they have these input text fields and how you ask them like a personal information, the company information or whatever and this is very basic and it kind of works but we can make it a lot more better, a lot more cooler if you ask.
Instead of that what we can do is since there's so many text fields we can actually end up using accordions which end up condensing different sections.
Basic accordion form
So if I take a look at an accordion like this, let me run it over here and let me collapse this. Okay so a simple accordion form would look something like this when you can actually fill up a name over here, the email, the phone number, you can hit submit or you can collapse it and then you can separate it in different chunks and so user can actually focus on where they are filling.
Dynamic accordion with status indicators
To make it even a step above, a little more professional, a little more classy, what we can do is we can use a much more dynamic accordion. How we do that is by, let me collapse this, let me run this, alright, okay so in dynamic accordion what we do is the same way you would do an accordion but we end up actually maximizing 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 red which says hey these sections are supposed to be filled up so you can have people fill up these ones and then 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 and then I also update the icon which is a green checkmark so in a way I just first glance they know this is the information they filled up so if they want to go back and update it they can do it.
then I also update the icon which is a green checkmark so in a way I just first glance they know this is the information they filled up so if they want to go back and update it they can do it.
The same thing for company as well, they can have something filled up over here and submit it so now you can just looking and let's say you have a lot of accordion panels this like in a glance it tells you which are the information they filled up and which ones are left.
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 so thank you for watching.