Akash Rajput Technology over a cup of coffee

Part 30: Add Pagination to EVAM Data Set

46 sec read

Featured Video Play Icon

Create State variables

  • pageSize – Number – 3
  • pageCursor – String – Blank
  • pageNumber – Number – 1

Add Client Script to Handle Navigation

  • Goto Page Scripts
  • Click +Add
  • Give name as Handle Pagination
  • Copy Following code snippet
 * @param {params} params
 * @param {api} params.api
 * @param {any} params.event
 * @param {any} params.imports
function handler({
}) {
    if (event.payload.pageSize) {
        api.setState('pageSize', () => event.payload.pageSize);
    if (event.payload.pageCursor) {
        api.setState('pageCursor', () => event.payload.pageCursor);
    if (event.payload.pageNumber) {
        api.setState('pageNumber', () => event.payload.pageNumber);

Basically in this script we are setting the state of these variables to the one we received latest from the pagination controls

Map State Variables to EVAM Data broker

  • Goto Data resources
  • Select EVAM Data resource 1
  • Fill in the fields, as appropriate
    • Page Cursor – @state.pageCursor
    • Page Number – @state.pageNumber
    • Page Size – @state.pageSize

Map Client Script to Data Pagination Click Event

  • Goto Data Set 1 > Events
  • Click +Add event handler
  • Hook the existing client script we created Handle Pagination
  • Click Save

We should have our pagination controls and it should be working as expected.

Great!! we have setup the pagination to our data set component. In the next tutorial, we will see how we can use transform to transform data from data broker.

Akash Rajput Technology over a cup of coffee

Leave a Reply

Your email address will not be published. Required fields are marked *

Never miss a story from me, get updates directly in your inbox.