DYNAMIC PANEL STATE CHANGE ON LINKED PAGE

Now you know how to use variables to communicate the widget values from one page to another.

First, open AxureSetPanelOnNextPage.rp and open the “Set Panel On Next Page” page.

 

Select the OpenState1 Button in the design area and add a case to the OnClick event. This opens the Case Editor dialog.

In this case, we want to store a variable and open the Flower Page. So, we select the action  "Set Variable Value" action and select the checkbox for the OnPageLoad variable. 

 

In the dropdown, select "selected option of" and "Flower Droplist" is automatically selected.

© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure is a registered trademark of Axure Software Solutions Inc.

u13_start u13_end u13_line

Add an action to "Open Link" and specify "Flower Page". It's important to note here that this action needs to come AFTER setting the variable value--if we opened the page first, the variable value would never be set. Click OK to close the Case Editor dialog.

Next, open the Flower Page from the Sitemap pane. Here, we want to check which variable value was set on the previous page, and set the dynamic panel state accordingly.

 

In the Page Interactions tab of the bottom pane, add a case to the OnPageLoad event.

Add a condition to the case in the Case Editor. This opens the Condition Builder dialog.

 

Set it to check the "value of variable OnLoadVariable equals value" and then enter "Poppy" for the value. Variable values are case sensitive, so make sure this matches the item in the droplist from the previous page. Click OK to close the Condition Builder dialog.

If the OnLoadVariable value is "Poppy", we want to show the image of poppies in the dynamic panel on the page. So, we add the action "Set Panel State", choose the Flower Panel, and select the "Poppy" state from the dropdown menu.

 

Click OK to close the Case Editor dialog.

On the OnPageLoad event, add 3 more cases. In each case, add a condition to check the OnLoadVariable value for each of the numbers (1, 2 and 3) and set the Flower Panel dynamic panel to the appropriate state. The final OnPageLoad cases should look like the one in the above screenshot.

Preview your prototype and test it out.  Selecting a button will take you to the following page and show you the associated state.

Step 1: Add case to OnClick of Submit button

Step 2: Store droplist selection in a variable

Step 3: Add action

to open Page 1

Step 4: Add

OnPageLoad

case to Page 1

Step 5: Add condition

to check variable value

Step 6: Set state

of Flower Panel

Step 7: Add OnPageLoad case for each option

Step 8:

Preview the prototype

VARIABLES

Set Panel On Next Page Tutorial

u68_start u68_end u68_line
u70_start u70_end u70_line
u72_start u72_end u72_line
u74_start u74_end u74_line
u76_start u76_end u76_line
u78_start u78_end u78_line
u80_start u80_end u80_line

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

THE ROUNDUP

DOWNLOAD

u103_start u103_end u103_line

MORE VARIABLES ARTICLES ::

This is an archived Axure 7 training resource. You can update to Axure 8 for free at www.axure.com/update.