Axure Tutorial: Automatically Scrolling Ranking Table

Introduction

Ranking table is a common feature in social app, so today we will teach you how to make a ranking table that can scroll automatically. Through this tutorial, you can use the basic dynamic panel and repeater.

Features to be Realized

Automatically Scrolling Ranking Tables

The user ranking table keeps rolling and repeating.

How to Realize these Features

1. Make the basic contents of the form through the repeater.

2. Make rolling effect through repeating of dynamic panel state change.

Preview the completed prototype for this tutorial

 

Widgets Setup 

1. Make table header with labels and rectangle.

2. Making table body with repeater.

Interactions Setup

After making the table, we select the repeater table, turn the repeater into a dynamic panel, and copy several states of the dynamic panel (state1 by default), depending on your data volume. The data volume in the case is 10, and the first 5 are displayed by default, so we need a total of 2 states.

 


Finally, we write the interaction of scrolling. When the dynamic panel is loaded, we set the state of the dynamic panel to next, check the warp from last to first, 
set the animation effect of sliding , and set the animation time (the animation time determines the rolling speed. The longer the time, the slower the speed). 

In this way, we have completed the prototype template of making automatic rolling ranking table with repeater. In the future, we only need to fill in or import the specific content in the repeater table of each state in the dynamic panel to automatically generate the effect of table scrolling

If you have any questions and suggestions, please leave a message.

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.