Skip to main content

Set text with droplist tutorial

In this tutorial, you'll learn how to dynamically set the text on a widget based on a selection made in a droplist widget.

info

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

1. Widget setup​

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

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

  3. Set the text on the rectangle widget to My favorite color is red.

  1. Double-click the droplist to edit its options, and click Edit Many at the top of the dialog. In the window that appears, enter the following options, separated by line breaks:

    red
    orange
    yellow
    green
    blue
    purple

  2. Click OK to close the Edit Many window, and click OK again to close the Edit Droplist dialog.

2. Change the rectangle widget's text when the droplist's selection changes​

  1. Select the droplist and click New interaction in the Interactions pane.

  2. Select the Selection changed event in the list that appears, and then select the Set text action.

  3. Select the rectangle widget in the Target dropdown.

  4. Click the fx icon to the right of the Value field to open the Edit text dialog.

  5. In the field at the top of the dialog, select the word red in the sentence.

  6. Click Insert variable or function above the field. In the dropdown that appears, select text under the Widget heading.

    The upper field of the dialog should now read My favorite color is [[This.text]]. (The bracketed expression will be replaced by the droplist's currently selected option in the web browser.)

  7. Click OK to close the Edit text dialog, and then click OK again to save the Set text action.

3. Preview the interaction​

Preview the page and select a different color in the droplist. The sentence displayed on the rectangle widget should update to reflect your selection.

Additional information and tips​

Set text with a radio group​

If you'd rather present the options in a radio group instead of a droplist, you can still build a similar interaction to the one described in the tutorial above. Use the same Set text action, and add it to the Selected event of each radio button in the group.