Advanced Axure 9: symbiotic repeaters

Learn to use Axure 9 in exciting new ways

What we will make together

The five steps we’ll follow

  1. Add elements to the page
  2. Setup initial states
  3. Add actions to the button
  4. Add action to the middle repeater
  5. Add action to the left repeater

Add elements to the page

Add two repeaters and a button to the page

Setup initial states

Update the button’s label. Give the left repeater the name ‘Form’ and change the name of the first column to ‘Order’.
Scroll down in the ‘Styles’ pane. Check the box for ‘Multiple pages’ and update ‘Items per page’ to 1.
For the middle repeater, name it ‘List’ and change the name of the first column to ‘Order’.

Add actions to the button

First action: add row to the middle repeater

With the button selected on the page, create a ‘New Interaction’.
Select the ‘OnClick’ event
Select the ‘Repeater Action’: ‘Add Rows’
Choose the correct widget with which to apply this action: List
Click the button to ‘Add Rows’ to this repeater
Click on the small ‘fx’ ligature in the dialogue box.
Click the ‘Add Local Variable’ link.
Create a variable, ‘list’, referencing the List repeater widget.
Use Axure’s special double-bracket notation to evaluate the expression shown above. This will dynamically set the value of a new repeater item’s ‘Order’ column to the number of items in the repeater…plus one. In other words, if there are 5 items, set Order to 6.
Confirm you see what is shown above in the ‘Interaction’s pane for the button.

Second action: add row to the left repeater

With the button still selected, click the ‘Add Target’ button off to the right of the action.
Select the other repeater, Form
Click ‘Add Rows’, just as before.
Same as before, click the ‘fx’ ligature
Add another local variable — this time for the other repeater
This should look familiar. The other difference is the variable name and the repeater it references.
Confirm what you see matches.
Confirm the button works.

Add action to the middle repeater

Double-click the middle repeater to enter and inline editor for its repeated item. Once in edit mode, click to add a new interaction.
Choose the OnClick event and ‘Set Current Page’ repeater action
Select the Form repeater
Click the ‘fx’ ligature to make entering the necessary value easier. This could be done inline by typing and overwriting the ‘1’.
Click ‘Insert Variable or Function…’, expand the ‘Repeater/Dataset’ tree, and click ‘Item.Order’.
Doing this automatically fills the text area with the correct expression. This makes it so that clicking on an item in the middle repeater will set the current page of the left repeater to the corresponding number in the middle repeater’s Order column. So, if you click on the middle repeater’s item labeled 3, it will set the left repeater’s current page to 3.
Confirm yours and mine match.
Confirm the button still works and the middle repeater correctly updates the left repeater.

Add action the left repeater

Pay close attention at the end of this step: the order of targets under ‘Delete Rows’ is reversed. You will have to manually redo your steps. If you don’t get the order right, deletion won’t work correctly.

In the ‘Libraries’ pane, select the ‘Icons’ library.
Search for ‘Close’ to narrow your list
Before dragging, be sure you have double-clicked the left repeater to enter Item edit mode. Now click and drag the ‘Close’ icon and resize to match what you see.
Perform several actions: New Interaction > OnClick > Delete Rows > Form > Ok. All this results in the following action: clicking the ‘X’ will delete the item in the Form repeater corresponding the ‘X’ that was clicked. So, if you click the ‘X’ on the item with label 3, that item will be deleted, leaving items labeled 1 and 3.
Click to Add a Target to this action.
Select the List repeater and click the ‘fx’ ligature.
You’ll need to reference two properties, one from each repeater. ‘Item’ refers to the repeater you have selected: Form. ‘TargetItem’ refers to the repeater you are currently setting the Rule for: List. Each has an ‘Order’ column, shown here as a JavaScript property (i.e. Object.Property). Don’t click either item, as you will manually enter an expression below.
Enter the expression as shown above. This results in a comparison: When the ‘X’ is clicked, grab the value in that item’s Order column — let’s say 3 — and compare it to the value in the other repeater’s item’s Order column. If both values match, delete that item. This will correctly cause one item to be deleted: the item whose Order matches the one whose ‘X’ was clicked.
BEWARE: for this to work, you must reverse the order of the two actions shown here. This tutorial has things in the wrong order. Sadly in Axure 9, you can’t drag either one above/below the other. You have to delete one and manually redo the steps necessary to set it up — in the correct order…as shown in the image above. Make sure ‘Form this row’ is the second step.

Once again, the finished exercise

Is something not working? Please remember to double-check the order of targets at the end of the previous step.

Want more advanced Axure 9 tutorials?

Let me know by subscribing!

Designer, Developer, DataViz, Dad • rmion.com