Discuss

Loop Through Database Records with the Data Iterator Component

On this page

Using the Data Iterator component you can display one record at time on your page and loop through all records, using previous, next, first, last, random, or go to specific record dynamic actions. The loop is done client-side, so your records are being loaded once and no additional server calls are done.


Server Side

On the server side you need a server action with a regular database query, which returns your records. Nothing special here:

Screenshot_1|690x399

Set Up Data Iterator Component

Close the Server Connect panel, and let's add the server action on our page:

Screenshot_2|690x399

Add new component > Server Connect:

Screenshot_3|690x399

Then select your server action:

Screenshot_4|690x399

Click the Select Button:

Screenshot_5|690x399

Now, select App in the App Structure and add new component:

Screenshot_6|690x399

Open the Data menu and add Data Iterator:

Screenshot_7|690x399

Select the data source for the iterator:

Screenshot_8|690x399

This should be the database query, which your server action contains:

Screenshot_9|690x399

Select whether you want to loop through the records, when you reach the last/first ones, or just stop there. We enable Loop as we want to be able to loop infinitely:

Screenshot_10|690x399

Then, we need to apply the Data Iterator on the page. We created a really simple layout (container > row > column) containing a title, text and image. We will use the iterator as a dynamic source for the text and the image. We select the column (1) and click the Create Data Iterator button (2):

Screenshot_11|690x399

Double click the text and use the dynamic data button to add dynamic data there (or use the inner text dynamic attribute if you prefer so):

Screenshot_12|690x399

Select your data under the Value object in the Data Iterator component:

Screenshot_13|690x399

Then do the same for all the elements, which need to use dynamic data (text, images etc.). The data iterator will display one record at time.

Controlling Data Iterator

You can easily control the Data Iterator using the dynamic events. We added two regular buttons on the page, which will be used to show the previous/next records on click. Select the 'next' button, then add new dynamic event:

Screenshot_14|690x399

Select Mouse > Click:

Screenshot_15|690x399

And click the dynamic action picker icon:

Screenshot_16|690x399

Under Data Iterator you will see all the available control actions: First, Previous, Next, Last, Random and Select. The options are pretty much self-explanatory, so we won't explain every single one. For the 'next' button, we select the Next action, it will load the next record on the page:

Screenshot_17|690x399

Do the same with the 'previous' button, selecting the Previous action.


Here are the results, only one record is displayed on our page and we can loop through them using the prev/next buttons:

iterator|690x397