Skip to main content

Set Dynamic Panel State on Next Page Tutorial

In this tutorial, you'll learn how to use a global variable to set the state of a dynamic panel based on a selection made on a previous page in the prototype.

info

Click here to download the completed RP file for this tutorial.

1. Widget and page setup​

Page 1 – The selection form​

  1. Open a new RP file and open Page 1 on the canvas.

  2. Drag a droplist widget and a button widget onto the canvas from the Libraries pane.

  3. Set the button's text to Next Page.

  1. Double-click the droplist to edit its options.

  2. In the dialog that appears, click Add three times to create three new options. Make one Red, one Yellow, and one Blue.

Page 2 – The dynamic panel​

  1. Add a new page to the project and open it on the canvas.

  2. Drag three rectangle widgets onto the canvas. Give one a red fill color, one a yellow fill color, and one a blue fill color.

  3. Right-click the red rectangle and select Create dynamic panel in the context menu.

  4. In the Outline pane, rename the dynamic panel's first state to Red.

info

The dynamic panel's state names must match the options in the droplist widget on Page 1.

  1. Give the dynamic panel two new states. Name one Yellow and the other Blue.

  2. In the Outline pane, drag the yellow rectangle widget into the Yellow panel state. Then, move it to (0,0) on the canvas. Repeat this for the blue rectangle widget.

2. Create a global variable to store the user's selection​

  1. In the top menu, go to Project → Global variables.

  2. In the Global Variables dialog, click Add to add a new variable. Name it ColorVar.

  3. Click OK to close the dialog.

3. Capture the user's input and go to the next page​

Set the variable's value to the droplist's selection​

  1. Open Page 1 on the canvas and select the droplist widget.

  2. Click **New interaction in the Interactions pane.

  3. Select the Selection Changed event in the list that appears, and then select the Set Variable Value action.

  4. Select the ColorVar variable in the Target dropdown.

  5. In the Set To dropdown, select selected option of.

  6. Leave This selected in the Widget dropdown, and click OK to save the action.

Open link to page 2​

  1. Select the button widget and click Click or Tap → Open link in the Interactions pane.

  2. Select Page 2 in the Link To dropdown and click OK to save the action.

4. Set the dynamic panel's state to the variable's value​

  1. Open Page 2 and click a blank spot on the canvas to select the page itself. Then click New interaction in the Interactions pane.

  2. Select the Page loaded event in the list that appears, and then select the Set panel state action.

  3. Select the dynamic panel in the Target dropdown.

  4. In the State dropdown, select Value. Then click the fx icon next to the field that appears to open the Edit value dialog.

  5. Delete the text in the upper field of the dialog, and then click Insert variable or function.

  6. In the dropdown that appears, select ColorVar under the Global Variables heading. The field at the top of the dialog should now read: [[ColorVar]]. (This bracketed expression will be replaced by the variable's value in the web browser.)

info

We're able to set the state of the dynamic panel to the droplist's selected option — which is stored in the variable — because the panel's states have the same names as the droplist's options.

  1. Click OK to close the Edit value dialog, and then click OK to save the Set panel state action.

5. Preview the interaction​

  1. Preview Page 1 and select a color in the dropdown.

  2. Click the Next Page button to navigate to Page 2. The dynamic panel should display the color you selected in the droplist.