This Dynamic Panels (Basic) tutorial shows you how to show and hide content using the Dynamic Panel widget, multiple OnClick cases, and the “Show Panel(s)” action.

Dynamic Panel Tutorial

Show Hidden Panel

Show Hidden Error Message

The dynamic panel is now your friend. We hope you're ready to enjoy the rest of your rich, interactive life together.

First, open ShowHiddenPanel.rp and open the "Login Error" page.

In this example, we'll create an error message that shows when the login fails.

Drag and drop a Dynamic Panel widget from the Widgets to the wireframe under the Login button.

While the dynamic panel is selected, go to the top of the Widget Properties pane and label the widget "Error Panel".

Notice that the widget name also updates in the Dynamic Panel Manager. If this pane is not visible, go to View -> Dynamic Panel Manager in the main menu.

Still need help? Check out the forum or drop us a line at support@axure.com.

© 2002-2012 Axure Software Solutions, Inc. All rights reserved.

The Round Up

(AxureShowHiddenPanel.zip)

This zip file contains the RP file needed to complete this tutorial

Now, let's create our error message inside the dynamic panel. Double-click on State1 in the Dynamic Panel Manager to open up state for editing.

You'll notice a blue dotted line on the wireframe, which indicates the boundaries of the dynamic panel. Add a Rectangle widget and resize it to fit inside the boundaries, and use the formatting tools to create a red box with white text with your error message.

Once you've finished formatting the widget, go back to the "Login Error" page (you can use the tabs at the top, or double-click on the page in the Sitemap pane).

Select the Error Panel on the wireframe, right-click, and choose Edit Dynamic Panel > Set Hidden. This hides the contents of the panel by default on the page, and you'll see a yellow mask.

Now, let's add interactions to the Login button. For the first case, we want to open the My Account page if the login succeeds.

Select the Login button on the wireframe. Add a case to the OnClick event, and change the case description to, "If login succeeds" (Step 1: Description in the Case Editor dialog). Then, add an action to "Open Link in Current Window", and choose the "My Account" page. Click "OK" to close the Case Editor.

For the second case, we want to show the Error Panel if the login fails.

Add a second case to the OnClick event with the case description "If login fails". Then, add an action to "Show Panel(s)", choosing the Error Panel. Click "OK".

Generate the prototype (Generate -> Prototype in the main menu). You'll see that clicking on the Login button will present the two cases. Clicking "If login fails" shows the error message, and clicking "If login succeeds" takes you to the My Account page.

Step 1: Add a Dynamic Panel widget

Step 2: Label the widget

Step 3: Create an error message

Step 4: Set the panel to hidden

Step 5: Add case for "If login succeeds"

Step 6: Add case for "If login fails"

Step 7: Generate the prototype

Next: Tab Control Tutorial

Back to Dynamic Panels (Basic)