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

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

 

 

REPEATER REFERENCE PAGES

Store references to specific pages in the prototype in the repeater's dataset. Open links to those pages with widget events in the repeater item.


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: ADD REFERENCE PAGES TO DATASET

In the repeater training document, open the page named "Reference Pages". On the canvas is a three-by-three repeater displaying a selection of books.


Select the "Books" repeater widget and locate its dataset at the bottom of the Properties tab in the Inspector. Then, scroll the dataset to the right until you see the blank "ProductPage" column.


A product page is already set up for each book in the repeater's dataset—you can view these in the "Product Pages" folder in the Pages pane—so all we need to do is add references to those pages to the "ProductPage" column.

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: OPEN LINK TO REFERENCE PAGE

Now, double-click the "Books" repeater widget to open its item for editing.


In the new tab that opens, select all three widgets on the canvas. Then, click "Group" in the Main Toolbar to group the widgets together. (Alternatively, you can use the keyboard shortcut [CTRL] + [G] (Windows) / [CMD] + [G] (Mac).) With the new group selected, double-click "OnClick" in the Properties tab of the Inspector to give it a new OnClick case.

STEP 3: PREVIEW

Preview the page in your web browser. Click anywhere on a book listing to open its product page in a new browser tab or window.

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.

 

In the Case Editor, choose the "New Window/Tab" action under "Links > Open Link". At the bottom of the right column, select the radio button for "Link to an external url or file", and then click the "fx" button to the right of the "Hyperlink" text field to open the Edit Value dialog.

 

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

Right-click a cell in the "ProductPage" column and select "Reference Page" in the context menu. In the Reference Page dialog that appears, select the prototype page whose name matches the book title in the "Title" column of the row you selected. Then, click "OK" to close the dialog and save the reference to the dataset cell. Notice that the page name appears in the cell, followed by a page icon.