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

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

 

SET DYNAMIC PANEL STATE ON NEXT PAGE

Set the state of a dynamic panel based on a selection made on a previous page.

STEP 1: SETUP

In the training document, open the page named "Set Panel on Next Page". On the canvas are four radio button widgets and a submit button. The radio buttons have already been added to a radio group so that selecting one will automatically unselect the others.

STEP 5: PREVIEW

Switch back to the "Set Panel on Next Page" tab and preview the page. In the web browser, select one of the radio buttons and click the "Submit" button. When the "Flower Panel Page" page loads, the "Flower Panel" dynamic panel should display the flower corresponding to the radio button you selected.

MORE RESOURCES

CORE TRAINING

Getting Started

Flow Diagrams

Static Wireframes

Interactive Prototyping

Collaboration

TUTORIALS

Interactive Button

Text Link

Show Hidden Widget

Navigation Menu

Tab Control

Lightbox

Flyout Menu / Custom

     Tooltip

Accordion Control

Account Login

Image Carousel

Auto-Tab Fields

Required Fields

Dynamically Set

     Droplist Options

Set Text with Droplist

Pass Text to Next Page

Full-Width Image or

     Banner

Scroll-Activated Sticky

     Header

Slider

Drag and Drop

Embed Media

Scrollable Table

Set Dynamic Panel State

     on Next Page

Table with Images

Terms and Conditions

MOBILE TUTORIALS

Swiping Slideshow

Scrolling Content

Sliding Menu

Toggle Switch

Animated

     Screen Transition

REFERENCE GUIDE

STEP 0: DOWNLOAD THE TRAINING FILE

If you don't already have it, download AxureTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials on the Axure training site. We recommend always completing the tutorials using our prepared file, but if you can't, that's okay too—we'll always tell you what to build in a new file in order to complete each tutorial without using AxureTraining.rp.

STEP 2: SET GLOBAL VARIABLE VALUE WHEN RADIO BUTTONS ARE SELECTED

Select one of the radio buttons, and double-click "OnSelected" in the Properties tab of the Inspector to give it a new OnSelected case.


In the Case Editor, choose the "Set Variable Value" action. Under "Configure actions", check the "FlowerVar" variable.


At the bottom of the right column, select "text on widget" in the first dropdown and "This" in the second dropdown. This will set the "FlowerVar" variable's value to the radio button's label text.


Click "OK" to close the Case Editor.

"This" refers to the widget whose event is currently firing. As such, this exact same OnSelected case can be used for all four radio button widgets. Rather than setting it up again for each widget, though, we can copy and paste it.

 

Back in the Properties tab of the Inspector, right-click "Case 1" and select "Copy" in the context menu. Then, right-click one of the other radio button widgets and select "Paste". This will paste the copied case under that widget's OnSelected event.


Paste this case onto the other two radio button widgets as well so that all four have the same OnSelected case.

STEP 3: OPEN LINK TO NEXT PAGE WITH BUTTON

Select the "Submit Button" rectangle widget, and double-click "OnClick" in the Properties tab of the Inspector to give it a new OnClick case.


In the Case Editor, choose the "Open Link" action. Under "Configure actions", select the page named "Flower Panel Page".


Click "OK" to close the Case Editor.

 

 

 

STEP 4: SET DYNAMIC PANEL STATE TO VARIABLE VALUE

Now, open the page named "Flower Panel Page". On the canvas is a dynamic panel with four states. Notice that the names of the states match the text on the four radio button widgets exactly.

 

 

Select the "Flower Panel" dynamic panel, and double-click "OnLoad" in the Properties tab of the Inspector to give it a new OnLoad case.


In the Case Editor, choose the "Set Panel State" action. Under "Configure actions", check "This Widget".


At the bottom of the right column, select "Value" in the "Select state" dropdown. Then, click the "fx" link to the right of the "Name or State #" field to open the Edit Value dialog.


Delete the "1" in the top field of the Edit Value dialog. Then, click "Insert Variable or Function". In the context menu that appears, select "FlowerVar" under "Global Variables". Notice that "[[FlowerVar]]" appears in the top field of the dialog.

 

This will set the "Flower Panel" dynamic panel to the state whose name matches the "FlowerVar" variable's value. The two must match perfectly in order for this interaction to work; that's why the radio button labels, which get stored in the variable, match the state names exactly.


Click "OK" to close the Edit Value dialog, and then click "OK" to close the Case Editor.