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

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

DYNAMICALLY ADDING, DELETING,

AND UPDATING REPEATER ROWS

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

Custom Icon Button

Custom Text Field

Custom Checkbox and

     Radio Button

Custom Droplist

Custom Datepicker

MOBILE TUTORIALS

Swiping Slideshow

Scrolling Content

Sliding Menu

Toggle Switch

Animated

     Screen Transition

REPEATER

TUTORIALS

Basic Repeater -

     Dynamic Table

Sorting Rows

Filtering Rows

Adding, Deleting, and

     Updating Rows

Marking Rows

Advanced Repeater -

     Product Listing

Reference Pages

Advanced Filtering

Pagination

REFERENCE GUIDE

STEP 1: SETUP

In the repeater training document, open the page named "Adding, Deleting, and Updating Rows". On the canvas are a repeater-based table setup and a simple form for adding new rows to the repeater.


There are already several widget interactions set up on this page, so let's preview it in the web browser to see what everything currently does.

 

STEP 3: PREVIEW

Preview the page in your web browser and try adding some new rows to the repeater.

STEP 0: DOWNLOAD THE REPEATER TRAINING FILE

If you don't already have it, download AxureRepeaterTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials in the Axure repeater training module.

Use interactions to dynamically add, delete, and update rows in a repeater's dataset.


If you aren't yet familiar with the repeater widget, you can read about its functionality and uses in our Repeater Widgets reference guide.

STEP 2: ADD ROWS WITH THE "ADD" BUTTON

Back in Axure RP, select the "Add Row" button by clicking it twice on the canvas: one click to select the "Add New Row" group and a second to select the button itself. (Alternatively, you can select the button directly in the Outline pane.) Then, double-click "OnClick" in the Properties tab of the Inspector to give it a new OnClick case.


In the Case Editor, choose the "Add Rows" action under "Repeaters > Datasets". Under "Configure actions", check the "Employees" repeater widget.

In the lower section of the dialog, click "Add Local Variable". In the local variable settings that appear, select the "New Name" text field widget in the rightmost dropdown. Leave the middle dropdown set to "text on widget", and, if you would like, change the name of the variable to something more descriptive. This will capture the text entered into that text field in the web browser and store it as a local variable value for this action.


At the top of the Edit Value dialog, click "Insert Variable or Function". In the menu that appears, click the new local variable's name under "Local Variables". Notice that the variable name appears in the top text area of the dialog, surrounded by double square brackets, e.g., "[[LVAR1]]".

Click "OK" to close the Edit Value dialog. Back in the Add Rows to Repeater dialog, notice that a new row has been added and that the local variable name shows in the "Name" column.

 

STEP 4: DELETE ROWS WITH THE "X" ICON

Back in Axure RP, select the "Employees" repeater widget by clicking it twice on the canvas: one click to select the "Dynamic Table" group and a second to select the repeater itself. (Alternatively, you can select the repeater directly in the Outline pane.) Then, double-click it to open the repeater item for editing.


In the new tab that opens, in the Outline pane, select the "Delete Row" shape widget (the "X" icon) in the "Row Controls" group. In the Properties tab of the Inspector, double-click "OnClick" to give it a new OnClick case.

In the Case Editor, choose the "Delete Rows" action under "Repeaters > Datasets". Under "Configure actions", check the "Employees" repeater widget.


At the bottom of the right column are three options. "This" will delete the row whose "X" icon is clicked. "Rule" will allow you to use a filter rule to delete rows based on certain criteria. "Marked" will delete all currently marked rows.


Leave "This" selected and click "OK" to close the Case Editor.

STEP 5: PREVIEW

Preview the page in your web browser and try deleting some rows from the repeater.

 

STEP 6: UPDATE ROWS WITH THE CHECK ICON

Back in Axure RP, in the Outline pane on the repeater tab, select the "Save Edits" shape widget (the check icon) in the "Edit Group" group. (This will temporarily show the hidden group on the canvas.) Then, in the Properties tab of the Inspector, double-click "Case 1" under the OnClick event to add new actions to the existing case.

In the lower section of the dialog, click "Add Local Variable". In the local variable settings that appear, select the "Edit Name" text field widget in the rightmost dropdown. Leave the middle dropdown set to "text on widget", and, if you would like, change the name of the variable to something more descriptive. This will capture the text entered into that text field in the web browser and store it as a local variable value for this action.


At the top of the Edit Value dialog, click "Insert Variable or Function". In the menu that appears, click the new local variable's name under "Local Variables". Notice that the variable name appears in the top text area of the dialog, surrounded by double square brackets, e.g., "[[LVAR1]]".

Click "OK" to close the Edit Value dialog. Back in the Case Editor, notice that the local variable name shows in the "Value" column, to the right of "Name".


Repeat the steps above for the "Department", "HireDate", and "Available" columns. For the "Department" column, save the text from the "Edit Department" text field; for the "HireDate" column, save the text from the "Edit Hire Date" text field; for the "Available" column, save the text from the "Edit Availability" text field.


When you're done, click "OK" to close the Case Editor.

STEP 7: PREVIEW

Preview the page in your web browser and try updating the data for a few of the repeater rows.

First, enter some text into each of the text fields in the "Add New Row" form and click the "ADD" and "CLEAR" buttons. The "ADD" button doesn't do anything yet, but the "CLEAR" button clears all text from the text fields.


Next, click the "X" and pencil icons in the table. The "X" icon doesn't do anything yet, but the pencil icon brings up a group of previously hidden widgets: a check icon, a cancel icon, and some text fields that are pre-populated with the selected row's data.


You can edit the text in these text fields, but the check icon doesn't save those changes yet; it and the cancel button both simply hide the text fields and themselves when clicked.

In the following steps, we'll be building the interactions that will get these page elements working.

At the bottom of the right column, click the "Add Rows" button. This will bring up the Add Rows to Repeater dialog. Notice that the dialog contains a table with the four columns from the repeater's dataset: "Name", "Department", "HireDate", and "Available".


Click the "fx" button in the cell under "Name" to bring up the Edit Value dialog.

Repeat the local variable steps for the "Department" and "HireDate" cells in the new row. For the "Department" cell, save the text from the "New Department" text field; for the "HireDate" cell, save the text from the "New Hire Date" text field. For the "Available" cell, enter "Yes" (without quotes) so that all newly added rows have that value by default.


When you're done, click "OK" to close the Add Rows to Repeater dialog, and then click "OK" again to close the Case Editor.

 

In the Case Editor, choose the "Update Rows" action under "Repeaters > Datasets". Under "Configure actions", check the "Employees" repeater widget.


At the bottom of the right column, notice that the same three options are available here as in the Delete Rows action: "This", "Rule", and "Marked". Also, notice that the "Select Column" dropdown contains the repeater dataset's four column names. Selecting a column name in this dropdown will add it to the table below, making it available for updating.


Leave "This" selected, and click "Name" in the "Select Column" dropdown. In the table below, click the "fx" button under the "Value" heading to open the Edit Value dialog.

Note: As you'll see, both buttons already have MouseDown interaction styles set up.