Axure Tutorial: Make Voting Interface with Repeater


With the popularity of mobile Internet, we often vote on mobile phones. So today I'll teach you how to make a voting interface with repeater. 

Features to be Realized

Voting interface

Set the number of remaining votes. When the number of remaining votes is greater than 0, users can vote for candidates; If the number of remaining votes is less than 1, a notice is shown.

How to Realize these Features

Make a candidate list through the repeater and set the event when the Vote button is clicked: judge the remaining votes and make corresponding operations according to the remaining votes.

Preview the completed prototype for this tutorial

Widgets Setup

This prototype is mainly composed of rectangular title text at the top, remaining votes, notice panel, and candidate list made by repeater. The feature of the remaining votes text is the number of people who can vote at one time. Just fill in the wanted number. In the case, it is 4 by default; The notice is used to remind users that the remaining votes have been used up. Repeater is the most important component. We use it to make a candidate list. In the future, we only need to fill in text and import images to automatically generate the list. 

1. Repeater internal components

widgets setup of repeater

In the repeater, we mainly add the following widgets:

Column1 (Image), Name, Votes (label), Number (label), Voting button (button).

2. Repeater table setting

There are 4 columns in the repeater table:

Number corresponds to the components of the upper rectangle, which can be filled in the order of 123456;

Column 1 corresponds to the image element above. Right click to import the local image, or fill in the URL network address;

The name column corresponds to the component with the above name, which can be filled in or imported from Excel;

The votes column corresponds to the components of the above votes (text label), which can be filled in or imported from excel.

 Interactions Setup

 Vote Button interaction

When the Vote button is clicked, judge the number of vote surplus. If it is less than 1, a notice will be shown; Conversely, increase the number of votes text field by 1, disable the current button, and decrease the number of votes surplus by 1.

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 technical writer and teacher, focuses on Axure prototype design and product design.


Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

This section doesn’t currently include any content. Add content to this section using the sidebar.