Part 30: Add Pagination to EVAM Data Set

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({
    api,
    event,
    helpers,
    imports
}) {
    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
• Select NOW_DATA_SET_PAGINATION_BUTTON_CLICKED
• 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.