Join Brian Thurston Bralczyk for an in-depth discussion in this video What is a dynamic panel?, part of Axure for UX Design.
So far, all of our interactions have involved affecting a target that consisted only of a single widget. Some interactions played off one another, creating sort of a daisy chain of actions, but all the targets were individual widgets. In this chapter we're going to talk about dynamic panels. And in the simplest sense, a dynamic panel is a group of widgets that can be targeted for interaction as one unit. Let's take a look at an example here. In the last chapter, we created this form, and when the user clicked on the submit button she was taken to a separate page with a confirmation message on it.
But what if we instead wanted the confirmation message to appear as a pop up overlay on the same page. Something like this. Because the pop-up is made up of several widgets, it's necessary to actually put them all inside of a dynamic panel first, and then we can target that dynamic panel with the show and hide functions. Now I've included this example file in the exercise files as chapter 10_01_ShowHideExample and you can take a look at that if you're interested in seeing how I built it. After you've viewed the rest of this chapter.
Now in addition to creating a single target out of multiple widgets, dynamic panels also give us access to some interactions that weren't available when we were targeting those individual items. And specifically, I'm talking about the powerful concept of dynamic panel states. States are easiest to explain with an example. So let's take a look at this third scenario for our forms confirmation message. I'm going to scroll down so I can see the form a little bit better. And instead of a new page, or a pop up message like we just saw, we could have the form fade away completely and a new confirmation message appear in its place.
Right on the same page, and what we just saw there is one dynamic panel with two states. The first state contained the entirety of the form and the second state is this containing the confirmation message and this image. Once we've created the content on both of those two states. We can then tell the Submit button to initiate an action that changes from one state to another, and this is a fade animation as it does it. So in the next few videos, I'm going to walk you through creating this exact interaction, step by step.
AuthorBrian Thurston Bralczyk
- Using and styling widgets
- Setting up interactions
- Creating hide/show options for content
- Creating an accordion menu
- Applying web fonts
- Using flow widgets
- Creating and placing masters
- Styling pages
- Adding form fields with widgets
- Building a slideshow with dynamic panels
- Setting up adaptive views
Skill Level Intermediate
1. Getting Started
2. Shape and Text Widgets
3. Adding Interactivity
4. Generating and Sharing Prototypes
5. Web Fonts
Setting up web fonts4m 7s
6. Flows and Sitemaps
8. Page Options
9. Form Widgets
10. Dynamic Panels
11. Adaptive Web Design
Next steps1m 12s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.