© 2002-2018 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.
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.
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.