Advanced · Axure Template · Axure Tutorial · Axure Widget · Learn axure · Repeater · Jun 10, 2022

Axure Advanced Tutorial: Make Variable Columns with Repeater

by WELLJOE

Introduction

Repeaters have become very common in Axure, but many people are confused by not being able to dynamically change the number of columns. for example:

From 4 rows and 3 columns to 3 rows and 4 columns.

As of the current version, the Axure official has not released the relevant settings, but we can achieve it by changing the coordinates.

Below, I will teach you how to do it.

Widgets Setup

First, we need a repeater, the layout is set to "Vertical", and don't selected Wrap(Grid):

In addition, a variable needs to be set. For the convenience of display, we use a global variable called Column. The default value is 3, indicating the initial number of columns:

Double-click the repeater to enter the modification mode and create a new interaction event for the rectangle.

Note: event is the "Loaded" of the widget inside the repeater row, the event is move.

The Move is: "To"

The x coordinate is: [[This.width*((Item.index-1)%column)]]

The y coordinate is: [[-This.Height*(Math.ceil(((Item.index-1)%column)/column))]]

If you want to see the animation effect, you can customize Animate, and it will be cool when you change it later

At this time, "Preview", you can find that the effect of 4 rows and 3 columns we want has been completed.

Next, we create a new button, the text of the button is "change to 4 columns", and the new interaction "Click or Tap" has two steps:

The first step is to "Set Variable Value", select the "value" of the variable columns to 4.

The second step is "Fire Event" "Add Action", the target is the "Loaded" event of the rectangle in the repeater

Summary

As long as the value of columns is changed first, and then the event of moving the coordinates is triggered, the number of columns can be dynamically changed.

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

If you like the article, please share it with others with page link, thanks for your supporting! ❤

Note: Click here to download the completed RP file for this tutorial (RP 10 or up).

Well Joe @AxureBoutique, a technology writer and teacher, focuses on Axure prototype design and product design.