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

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

 

 

ADVANCED REPEATER - PRODUCT LISTING

Create a grid-based product listing. Use the repeater widget's style options to create the grid layout. Import image files into the repeater dataset and display them on an image widget in the repeater item. Set text on widgets in the repeater item using multiple dataset column values at once.


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

STEP 1: CREATE GRID LAYOUT

In the repeater training document, open the page named "Advanced Repeater - Product Listing". On the canvas is a repeater widget named "Books" with nine dataset rows and three widgets in its item, a "Background" rectangle widget, an "Info" rectangle widget, and a "Cover" image widget.


Select the "Books" repeater widget and open the Style tab of the Inspector. In the "Layout" section, select the radio button marked "Horizontal" to change the repeater's direction. Then, check the box for "Wrap (Grid)" and set the "Items per row" to "3". The repeater items should now appear as a three-by-three grid.


Now let's add some spacing between the repeater items. Scroll down to the "Spacing" section of the Style tab, down at the very bottom. Set both the "Row" and "Column" fields to "15".

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 2: SET IMAGE

With the "Books" repeater still selected, switch over to the Properties tab of the Inspector. In the dataset, notice that there are three columns: the "Title" column contains the books' titles as text, the "Author" column contains the books' authors' names as text, and the "Cover" column contains the books' cover images as image files.


STEP 3: SET TEXT WITH MULTIPLE DATASET COLUMN VALUES

With the "Books" repeater still selected, double-click "Case 1" under "OnItemLoad" in the Properties tab of the Inspector to edit the case further.


In the Case Editor, choose the "Set Text" action. Under "Configure actions", check the "Info" rectangle widget.


At the bottom of the right column, change the dropdown under "Set text to" from "value" to "rich text". Then, click the "Edit text" button that appears.

Click "OK" to close the Edit Text dialog and then click "OK" to close the Case Editor. The "Info" rectangle in each repeater item should now display a book title in large, bold font and an author name below it in smaller font.

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.

At the top of the Properties tab, double-click "OnItemLoad" to set up a new OnItemLoad case.


In the Case Editor, choose the "Set Image" action. Under "Configure actions", check the "Cover" image widget.


In the lower part of the right column, notice that there are five different kinds of images that can be imported. The first, "Default", is the image widget's default image. The other four refer to the image widget's <interaction styles>. We won't be setting up any interaction styles for the "Cover" image widget, so we'll only set the "Default" image.


In the dropdown below "Default", select "value". This will bring up a text field; click the "fx" button to the right of it to bring up the Edit Value dialog.

 

 

At the top of the dialog, click "Insert Variable or Function". In the menu that appears, click "Item.Cover" under "Repeater / Dataset". Notice that "[[Item.Cover]]" appears in the top field of the dialog.


Click "OK" to close the Edit Value dialog, and then click "OK" again to close the Case Editor. The image widget in each repeater item should now display a book cover.

In the Enter Text dialog that pops up, delete the existing text in the top text area. Then, click on "Insert Variable or Function" below the text formatting options. In the menu that appears, click "Item.Title" under "Repeater / Dataset". "[[Item.Title]]" will appear in the top text area, and it will be formatted in bold 18 point font.


Press [Enter]/[return] to create a new line of text, and type "by " (including the trailing space). Then, click "Insert Variable or Function" again. In the menu, click "Item.Author" under "Repeater / Dataset". "[[Item.Author]]" will appear next to "by " in the top text area so that the line reads "by [[Item.Author]]".


Select the entire second line in the text area and remove the bold formatting. Then, set the font size to 16.

 

Note: You can import an image file into a dataset cell by right-clicking the cell and selecting "Import Image" in the context menu.