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

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

MARKING REPEATER ROWS

STEP 1: SETUP

In the repeater training document, open the page named "Marking Rows". On the canvas are a repeater-based table setup, a checkbox widget, and a button widget. We'll use the "Filter Marked" checkbox to filter the repeater by its marked rows, and we'll use the "Delete Marked" button to delete all marked rows from the repeater at once.

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 3: UNMARK ROW WHEN UNCHECKED

With the "Mark Row" checkbox widget still selected, double-click "OnUnselected" in the Properties tab of the Inspector to give it a new OnUnselected case.


In the Case Editor, choose the "Unmark 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 as in the "Mark Rows" action. Once again, we'll leave "This" selected since we only want to affect the repeater row containing the unchecked checkbox.


Click "OK" to close the Case Editor.

STEP 4: LOAD THE CHECKBOX CHECKED IF THE ROW IS MARKED

Widgets in the repeater item return to their default states whenever the repeater is refreshed. This happens when sorts and filters are applied to or removed from the repeater and when rows are added, deleted, or updated. As such, we'll want to ensure that the "Mark Row" checkbox gets checked again in marked rows after a refresh.


With the "Mark Row" checkbox still selected, click the "More Events" dropdown in the Properties tab of the Inspector. At the bottom of the dropdown, click "OnLoad" to set up a new OnLoad case.


At the top of the Case Editor, click the "Add Condition" button to open the Condition Builder.


In the Condition Builder, change the first dropdown to "value". This will replace the second dropdown with a text field; click the "fx" button to the right of this text field to bring up the Edit Text dialog.


At the top of the dialog, click "Insert Variable or Function". In the menu that appears, click "isMarked" under "Repeater / Dataset". Notice that "[[Item.isMarked]]" appears in the top field of the Edit Text dialog. Then, click "OK" to close the dialog.

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.

Mark specific repeater rows, both visually and programmatically, to be worked with later.


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: MARK ROW WHEN CHECKED

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, select the "Mark Row" checkbox widget. Then, double-click "OnSelected" in the Properties tab of the Inspector to give it a new OnSelected case.

 

Back in the Condition Builder, enter "true" (without quotes) in the text field at the far right so that the condition description reads "if "[[Item.isMarked]]" equals "true"". This condition will evaluate to "true" if the repeater row is marked.


Click "OK" to close the Condition Builder.

Back in the Case Editor, choose the "Selected" action under "Set Selected/Checked". Under "Configure actions", check "This Widget".


Click "OK" to close the Case Editor.

 

 

STEP 5: FILTER MARKED ROWS

Now that we have the ability to mark and unmark rows in the repeater, we can start working with those rows.


Click back onto the "Marked Rows" tab to view the page-level canvas. Select the "Filter Marked" checkbox widget and double-click "OnSelected" in the Properties tab of the Inspector to give it a new OnSelected case.


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


At the bottom of the right column, uncheck the box for "Remove other filters" and enter "Filter Marked" (without quotes) in the "Name" field. Then, click the "fx" button next to the "Rule" field to open the Edit Value dialog.

At the top of the dialog, click "Insert Variable or Function". In the menu that appears, click "isMarked" under "Repeater / Dataset". Notice that "[[TargetItem.isMarked]]" appears in the top field of the dialog. Inside the double square brackets and after "isMarked", enter " == true" (without quotes) so that the whole expression reads "[[TargetItem.isMarked == true]]". This value expression will find all marked repeater rows, and the filter will display only those rows.


Click "OK" to close the Edit Value dialog and then click "OK" again to close the Case Editor.

 

Next, follow the "Remove Filter by Name" instructions to remove the "Filter Marked" filter with the "Filter Marked" checkbox widget's OnUnselected event.

STEP 6: PREVIEW

Preview the page in your web browser. Check a few of the repeater rows to mark them, and then check the "Filter Table by Marked" checkbox to apply the "Filter Marked" filter to the repeater. You should now see only rows whose checkboxes are checked.


Then, uncheck the "Filter Table by Marked" checkbox to remove the "Filter Marked" filter from the repeater.

STEP 7: DELETE MARKED ROWS

Back in Axure RP, select the "Delete Marked" button 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 "Delete Rows" action under "Repeaters > Datasets". Under "Configure actions", check the "Employees" repeater widget.


At the bottom of the right column are two options. "Rule" will allow you to use a filter rule to delete rows based on certain criteria, and "Marked" will delete all currently marked rows.


Select "Marked" and click "OK" to close the Case Editor.

 

STEP 8: PREVIEW

Preview the page in your web browser. Check a few of the repeater rows to mark them, and then click the "Delete Marked" button to delete the marked rows.

In the Case Editor, choose the "Mark 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 mark the row whose checkbox is checked. "All" will mark all rows in the repeater. "Rule" will allow you to use a filter rule to mark rows based on certain criteria.


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