REPEATER WIDGETS

LEARNING AND

RESOURCES

Intro to Axure RP

Viewing and Sharing HTML

     Output

Organizing Widgets

Interactions

WIDGETS

Shape

Image

Line

Hot Spot

Dynamic Panel

Inline Frame

Repeater

Text Field and Text Area

Droplist

List Box

Checkbox

Radio Button

HTML Button

Tree

Table

Menu

Snapshot

Groups

Connectors

Vector Drawing

LIBRARIES

Widget Libraries

PAGES

Pages

Grids, Guides, and

     Snapping

MASTERS

Masters

Raised Events

STYLES

Page and Widget Styles

DOCUMENTATION

Flow Diagramming

Widget and Page Notes

Word Specification

Print Settings

GENERATED HTML

HTML Generator

Sidebar

Web Fonts and

     Font Mapping

AXURE SHARE

Basics

Security

Mobile App

Mobile Settings

Slack App

Hipchat Integration

Troubleshooting

     Connection Issues

AXURE SHARE ENTERPRISE

User Guide

Installation Guide

Accounts and Permissions

TEAM PROJECTS

Creating and Sharing

Working with Team Projects

Moving and Upgrading

SVN Troubleshooting

ADVANCED INTERACTIONS

Variables

Conditional Logic

Math, Functions, and

     Expressions

Adaptive Views

INSTALLATION

TROUBLESHOOTING

GUIDES

Mac

Windows

REFERENCE

MORE RESOURCES

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

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

EXAMPLE USES

DYNAMIC DATA TABLES

If you need to prototype dynamic table behaviors like adding rows, removing rows, sorting, and filtering, use a repeater to build your table. (If you don't need dynamic table behaviors and just want something that looks like a table, use a table widget.)

PRODUCT LISTINGS

For a basic product listing prototype with product information and images, you could use shape and image widgets. Use a repeater when dynamic sorting and filtering are needed.

REPEATERS HAVE TWO PARTS

Every repeater comprises two components: the "dataset" and the "item". Double-click a repeater on the canvas to open it in a new tab. In this new tab you can edit the repeater item. The repeater dataset can be edited in this tab as well; it can also be edited in the repeater's Inspector when the repeater is selected on the page.

2. DATASET

The appearance and behavior of a repeater is driven by the data in its dataset.


The dataset can be seen in the Inspector's Properties tab. You can add new columns and rows or delete existing ones. Cells of the dataset can contain text, images, and references to pages in the project. To add an image, right-click a cell and choose "Import Image". To add a reference page, right-click a cell, click "Reference page", and then choose a page from the resulting dialog.

1. ITEM

The collection of widgets being repeated is called the item. When you open a repeater for editing, the item is displayed on the canvas.


The widgets in the repeater item will be repeated as many times as you have rows of data. (The default repeater in the Default library starts with three rows of data in its dataset and a single rectangle widget in its item, which is why you see that rectangle widget repeated three times on the canvas when you first drag the default widget into a diagram.)

 

It's a good idea to name the widgets in the repeater item. In order to put the information from the repeater dataset onto the widgets in the repeater item, you will need to build an interaction.

INTERACTIVITY

LOADING THE DATASET INTO THE ITEM

Use the repeater's OnItemLoad interaction to set the contents of a column in the repeater dataset onto a widget in the repeater item.

TEXT

In the OnItemLoad event, use the "Set Text" action to put text from the dataset into a widget in the repeater item. In the case editor, choose the "Set Text" action and then choose the widget in which you want to place the text. In the "Set text to" section at the bottom-right of the case editor, choose "value" and then click the "fx" button.


In the "Edit Text" dialog that opens, click "Insert Variable or Function…". In the "Repeater" section, choose "Item.Column0" if your desired column is called "Column0" (the name of the column in the default repeater widget), or instead choose "Item.ColumnName" for whatever column name is applicable.


Click OK to close the Edit Text dialog and then the Case Editor.


When your repeater loads, it will set the text on the repeater item's widget to the data in the designated repeater column. You'll see the set text reflected on the page that contains the repeater and in the browser.

IMAGES

Insert images into your repeater items by importing images into your dataset. Then dynamically place images from the dataset onto widgets in the repeater item using the "set image" action.

 

In the OnItemLoad event's Case Editor, choose the "Set Image" action. Then choose the widget in which you want to place the image. In the bottom-right of the Case Editor, use the "Default" area. (You can use the MouseOver, MouseDown, Selected, and Disabled sections if you wish to add interaction styles to the images in the repeater.) Choose "value" in the dropdown. Then click the "fx" button.


In the "Edit Value" dialog that opens, click "Insert Variable or Function…". In the "Repeater" section, choose "Item.Column0" if your desired column is called "Column0", or instead choose "Item.ColumnName" for whatever column name is applicable.


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


When your repeater loads, it will set the image on the repeater item's image widget to the image in the designated repeater column. If everything went correctly, you'll see your set images both on the page that contains the repeater and in the browser.

INTERACTIONS ON CONTAINED WIDGETS

Add interactions to the widgets contained in the repeater by opening the repeater for editing. You can add event cases to these widgets just like you would for widgets on a regular page, but keep in mind that any "normal" interaction you configure here—like setting a button to show another widget when clicked, for example—will have an amplified effect, appearing once in each instance of the repeater's item.

EDITING

LOCATION AND SIZE

Drag a repeater widget on the canvas to change its location, or use the "x" and "y" fields in the top toolbar or Style tab of the Inspector to move it to an exact location. The size of a repeater is determined by the widgets it contains.

BORDER AND FILL

Editable properties of a repeater widget's formatting include: border color, thickness, and style; background fill color; and item background fill color. These properties can be controlled from the Style tab of the Inspector, and many are also available in the Style Toolbar at the top of the interface.


Borders can be added and customized. You can set the thickness, color, and pattern of the repeater's border. You can change the corner radius of the border. You can also add padding to the repeater to separate the contents of the repeater from the border.


In the space between the repeater contents and the border you can see the repeater background color, if one has been specified.


In the "Item Background" section you can add an item background color. This color will show in any blank space between widgets in the same repeater item. If you don't specify an item background color, you'll see the repeater background color, and if you haven't set a repeater background color either then you'll see the host page's background color. You can optionally check the checkbox for "Alternating" if you want every other row to show a different item background color (this styling is common for some types of data tables).

REPEATER LAYOUT

The repeater layout settings are also found in the Style tab of the Inspector. They designate how the repeater items are arranged in relation to each other.


In the "Layout" section, you can choose whether the repeater items should be stacked vertically or horizontally. You can check the "Wrap (Grid)" checkbox to have the repeater wrap (so a vertical layout repeater would have several columns, and a horizontal layout repeater would have several rows).


In the "Pagination" section, specify whether all the repeater items will appear on one page or if they will be wrapped in multiple pages. If you do set up pagination, you can choose the number of items per page and the starting page. (If you use pagination, you'll probably want to use the action "Set Current Page" on a button or set of buttons used to navigate the repeater.)


In the "Spacing" section, specify if there should be padding between rows or columns of repeater items.

The "repeater" widget is an advanced widget type, used to display repeating patterns of text and images. Repeaters are containers, like dynamic panels, but instead of containing widgets in several states which are then switched between, repeaters contain one set of widgets—called the "item"—which is then iterated several times. Each iteration of the item is different, and the differences are controlled by data loaded into the repeater's "dataset".


The big idea with repeaters is that, because they are data-driven, they can show "true" dynamic sorting and filtering. Reach for a repeater when you really need to demonstrate a dynamically sortable or filterable design (think of an Amazon search results page). But repeaters are more work to set up, so skip the repeater and use regular widgets if you don't need the sorting and filtering.

STYLING OF CONTAINED WIDGETS

To edit the location, size, or styling of widgets in a repeater, double-click the repeater to open it. You can then configure each widget separately in its own Inspector's Style tab.

INTERACTIVE PROPERTIES

ISOLATING RADIO GROUPS AND SELECTION GROUPS

FITTING TO CONTENT IN HTML

The “Fit to Content in HTML” option can be found in the Properties tab of the Inspector, below the dataset, and is enabled by default. With this option enabled, each repeater item will automatically resize when widgets in that item are shown, hidden, or moved.


If you disable this option, each repeater item will remain a fixed size. Widgets moved or shown dynamically might overlap with other repeater items if they extend outside the fixed boundaries of their own repeater item.

In the Properties tab, under the repeater dataset, are checkboxes labeled "Isolate Radio Groups" and "Isolate Selection Groups". Both are enabled by default. When these options are enabled, each radio and selection group is evaluated separately for each repeater item.


For example: If one repeater item has three radio buttons in the same radio group, with "Isolate Radio Groups" enabled, selecting one of the radio buttons in that repeater item will unselect the other radio buttons in that repeater item. The radio groups in other items in the repeater will be unaffected, so you'll be able to make a different selection in each item.


Sometimes the radio or selection group should apply to the whole repeater. In that case, make sure "Isolate Radio Groups" or "Isolate Selection Groups" options are disabled. When disabled, clicking a radio button in one repeater item will unselect all other radio buttons in the radio group regardless of which item in the repeater they appear in.

1

2