The Visual Builder Cloud Service Blog

Pagination in VBCS Applications

John Jullion-Ceccarelli
Product Manager

This blog is part of the series Visual Builder Cloud Service Learning Path.

Most modern UIs use Load More on Scroll pagination rather than a list of pages with next and previous buttons. Also, note that Business Objects have their own "limit" and "offset" URL parameters that are visible in VBCS. We are going to leave those alone and let the component drive the pagination through the scroll-policy-options.fetch-size property on the list view.

Updating Your Project

This lesson builds on the Expense Report project we have been using in the VBCS Learning Path.

  1. Download this ZIP file to your computer.
  2. If you are continuing from a previous chapter and already have the Expense Report project, open the project, click Import, and drag and drop the file into the dialog.

  3. If you are starting at this lab and not continuing from a previous lab, go to the Visual Builder home screen, click Import > Import from File, and upload the ZIP there.

Setting Pagination on the List

  1. Open my-expense-reports-start.
  2. Select the list of Expense Reports. In the All tab of the Property Inspector, set the following:
    • scroll-policy: loadMoreOnScroll
    • scroll-policy-options.fetch-size: 10
    • style: height: 500px

Some notes about this:

  • You have to specify a height on the table or list, otherwise the app will think you're scrolling to the bottom and load all records in the data set.
  • If you would like to have a traditional Paging Control on a table or list, you need to use an ArrayDataProvider instead of a ServiceDataProvider, as you cannot bind a Paging Control to a ServiceDataProvider.

The next lesson in the Learning Path is Filtering and Sorting Lists in VBCS Applications.

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.