© 2002-2019 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.
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".
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.