X

Shay Shmeltzer's Oracle Development Tools Tips

Table Pagination and Scrolling in Visual Builder Explained

Shay Shmeltzer
Director of Product Management - Oracle

A common question we get from customers who are using the table component in visual builder is how to implement pagination - basically fetching data as needed when I scroll the table. In this blog I show you how you can control the behavior of the table's data fetching.

For most cases, simply setting a height for the table using a property like style="height:300px" on the table will give you the behavior you want, which is to fetch a limited amount of record initially (25 is the default) and fetch more when you scroll further. This is since we default the table to have scroll-policy="loadMoreOnScroll" - and this together with an ServiceDataProvider that is based on a Visual Builder Business Object REST service (or and ADF Describe one) correctly pass the limit and offset parameters to the REST service your table is based on.

Here is a quick demo of how you can further control the table pagination/scrolling behavior:

Note - if you are getting your data from some other REST service - that REST service will need to support pagination (probably accepting two parameters for the start point and the range to fetc). You can tell Visual Builder how to pass pagination info to the service by defining the transformation on the service calls.

Design Considerations

There are a few things to think about when playing with the values that control data fetching in tables:

The first thing to think about is the usability of your UI for the end user. In most cases you shouldn't be creating a UI that requires a user to scroll hundreds of records to find the ones with the data that is interesting to them. A much better approach would be to have a search/query component that will allow the user to specify the set of records they want to show. There are multiple blog entries that cover table filtering (even when not using VB Business Objects).

The second point to ponder is whether you prefer fast initial load with slight delays later in scrolling or initial delay and smooth scrolling. This is something you can control with the scroll-policy-options.fetch-size property of the table - you can set it high so it will fetch many records at the start - and then scrolling through them would be smooth. But the downside is that this initial fetch might be a bit slower, and that you are consuming more memory on the client.

Another thing to think about is whether you want to limit the amount of records the user is allowed to fetch. You might want to do this if you want to control the amount of network traffic and memory consumption on the client. The default for a JET table is set to 500 - but you can modify this as you wish with the scroll-policy-options.max-count property of the table.

An example of the jet code for your table could end up like this:

    <oj-table summary="Sample Table" id="oj-table--1731912203-1" class="oj-flex-item oj-sm-12 oj-md-12"
    data="[[$page.variables.sheet1ListSDP]]" columns='[{"headerText":"Id","field":"id"},{"headerText":"title","field":"title"}]'
    style="height:300px" scroll-policy-options.max-count="1500" scroll-policy-options.fetch-size="150"
    scroll-policy="loadMoreOnScroll"></oj-table>

One last point to mention here - the ServiceDataProvider variable itself has a parameter called pagingCriteria that can be used to control pagination further.

Join the discussion

Comments ( 2 )
  • Sateesh Pokala Tuesday, October 1, 2019
    Hello Shay,

    there are 2 columns in the table column1 and column2 We want to hide the entire column1 in table
    we tried below options
    1) adding oj-bind-if around . it is only hiding cells data not column header
    2) added "style":"display:none" in column1 of columns but still it does not work..And It is rendering column2
    values in column1 and no values under column2.
    could you kindly help us out?

    code:










  • Shay Tuesday, October 1, 2019
    Satish - these type of questions are better asked on our forum - https://cloudcustomerconnect.oracle.com/resources/e610f4723c/summary
    I believe you'll need to change the columns attribute of the table - binding it to a variable that you control.
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.