Dynamically Adding Rows to a Repeater

In this tutorial, you'll learn how to dynamically add rows to repeater widgets using the Add Rows action.


Note

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 repeater widget, a text field widget, and a button widget onto the canvas.

  3. Set the button's text to Add New Row.

2. Add a Row to the Repeater When the Button Is Clicked

  1. Select the button widget and click New Interaction in the Interactions pane.

  2. Select the Click or Tap event in the list that appears, and then select the Add Rows action.

  3. Select the repeater widget in the Target dropdown.

  4. Click the Add Rows button. In the Add Rows to Repeater dialog that appears, click the fx icon to open the Edit Value dialog.

  5. At the bottom of the dialog, click Add Local Variable.

  6. In the third field of the new local variable row, select the text field widget. This local variable will capture the text field's text in the web browser.

  7. In the upper field of the dialog, enter the local variable's name in brackets: [[LVAR1]]

  8. Click OK to close the Edit Value dialog and then click OK again to close the Add Rows to Repeater dialog.

  9. Click OK in the Interactions pane to save the Add Rows action.

3. Preview the Interaction

  1. Preview the page and enter some text in the text field.

  2. Click the Add New Row button to add a new row to the repeater. The new row's rectangle widget should display the text from the text field.

← RepeatersDynamically Deleting Rows →