Load more button

A simple way to paginate a table view is to use the Paginator element.

Another way is to add a button on the page with a workflow to load more items from your table view every time a user clicks on the button.

Step 1: Add a button

Drag-and-drop a Button on the canvas or in the Layout Tree, wherever you want to display it on the page.

In the example below, we placed it below our list of calls:

Step 2: Create a variable

This Variable will be called loadMore and of type Number.

Its default value will be the number of items you want to display on the page by default.

In the example below, we want to display 5 items by default.

Step 3: Add a workflow

On the button you created in step 1, add a workflow to Change variable value of the variable you created in step 2.

In the example below, we are saying:

• When the user clicks on the button,
• Add 5 to the loadMore variable

As a result, every time a user clicks on the button, the loadMore variable will be incremented by 5:

Step 4: Link the table view to the variable

Now, when you repeat your table view data on a container, tell the browser to display only the number of items in the loadMore variable from step 2.

In order to do that, we have to slice our list:

WARNING

The slice formula is an Array function so you need to bind to your table view['data']. If you bind to table view, it will not work because you are binding to an Object.

In the screenshot above, we see that:

• We are binding to a list of items calls['data'] instead of the entire table view object calls
• We are using the slice no-code formula to display the items from index 0 to the index X
• X changes based on the value of the loadMore variable, which changes every time the user clicks on the button (see step 3)

Step 5: Test in Preview

Ok, that should work.

Back in preview mode, click the button and check the loadMore variable in the Debug panel → Variables tab. You should see additional items appear on the page.