Learn how to prototype web and mobile apps

Paginating data lists in your web prototypes

Sometimes the results of a Data List are so extensive that you need to divide them into several pages. In this tutorial, we’ll learn how to simulate Data List pagination using the Index and Summary widgets and the pagination actions.

You can download an example here.

Data-driven prototyping: pagination

Follow the next steps to learn how to paginate Data Lists:

1) First, we’re going to create a Data List and configure it so that it can support pagination. In a web prototype, create a Data Master (‘Product’), and add some records to it. After that, simply drag a Data List to the canvas, selecting the Data Master you’ve just created and all of its fields.

2) Select the Data List and go to the Properties tab. Go to Rows per Page and indicate how many should be displayed. 0 is the default value and  this means the number of rows will be unlimited. So, to allow pagination on the Data List we need to change it. In this example we’ll set 3 rows.

Data-driven prototyping: paginate data table

3) Drag an Index widget to the canvas and link it to the Data List by choosing the ‘Product’ Data List in the drop down named ‘Data Grid’ in the Properties tab. The index will automatically show the number of listed pages based on the number of rows per page established

Data-driven prototyping: paginate data table index

Note: this is a dynamic index; it will be updated if the user performs a search in the simulation.

The Summary widget displays the number of results available in all the listed pages and what values are being displayed at any time. It is configured just like the Index widget, and it is dynamic text too.

You can also simulate the “next page”, “previous page”, “last page” and “first page” actions. The procedure is the same for all four options. Let’s look at one:

1) Drag four Buttons and label them “Next”, “Previous”, “First” and “Last”.

2) Select the button named ‘First’ and go to the Events tab. Add an ‘On click’ + ‘Paginate data grid’ event, select the Data List in Outline and then select ‘Next page’ from the drop-down list below the main window, and click OK.

Data-driven prototyping: paginate data table

3) Now click on ‘Simulate’. The values in the list change each time you click “Next”.

Next tutorial > Customize Data Lists