Building a Custom Pagination Widget for Service Portal: Server-Side Pagination

[Earl Duque]

✨ When working with ServiceNow Service Portals or any other web interface that handles large datasets, one key challenge is ensuring smooth performance and a good user experience. Proper pagination becomes crucial, especially when the dataset grows beyond a manageable size for the front end to handle efficiently.

In this post, we'll walk through creating a custom pagination widget with server-side pagination that you can easily implement in your Service Portal. Server-side pagination is essential for performance, especially when you have hundreds of records to display. This approach ensures that only a limited set of records is fetched from the server at a time, reducing load times and improving the user experience.

Why Not Client-Side Pagination?

Client-side pagination works fine for small datasets, but things can get tricky when you have a larger number of records. For example, I personally manage over 200 instances in my support dashboard, and I noticed a performance issue: the page loads all 200+ records at once, displaying them with client-side pagination. This slows down the entire experience because it waits for all data to load before rendering.

Once it loads into the client, then yeah, it's pretty fast, but I don't want to wait several minutes just to get there.

That’s where server-side pagination comes into play. It fetches only a limited number of records per page, allowing for faster load times and a smoother user experience.

Building Your Custom Pagination Widget

Here’s how I built my own server-side pagination widget, which I'll share with you. This widget ensures that only the necessary data is loaded at each step. All you need are a few HTML and server script snippets to get started.

1. Copy the Code: I’ve provided a simple code snippet ( https://github.com/ServiceNowDevProgram/code-snippets/tree/main/Service%20Portal%20Widgets/Paginated... ) that you can copy and paste into your widget’s server script and HTML template. This creates the pagination framework you’ll see in the demo.

2. Configure It to Your Needs: While the default setup works for a task table demo, you can easily configure the widget for other tables or datasets in your portal. Change the configuration fields to fit your use case.

3. Server-Side Pagination at Work: Once set up, the widget loads the first 10 records by default and paginates the rest server-side, ensuring that the client doesn’t have to handle a huge data payload all at once.

4. Enhanced User Experience: The paging mechanism dynamically adjusts the displayed page numbers based on where the user is in the dataset. If you’re near the beginning, it shows the first few pages, and when you get to the middle, it condenses the pages using ellipses to keep the navigation clean and manageable.

5. Handling Edge Cases: Another feature I’ve baked in is how the widget handles edge cases. If a user types in a non-existent page number, like 180 for a dataset with only 142 pages, the widget automatically redirects them to the last page instead of showing an error.

6. Customizable Pagination: Need to display more than the default 10 records per page? Just adjust the widget’s parameters to show 20, 50, or even 200 records per page, and the widget will handle the pagination accordingly.

7. Encoded Queries: For advanced filtering, the widget supports encoded queries via URL parameters. For instance, you can filter the data by adding an "active=true" parameter to the URL, which narrows down the data to only active records.

Conclusion

This custom widget is designed to enhance performance and user experience when working with large datasets in ServiceNow portals. By implementing server-side pagination, you can significantly improve load times, minimize browser memory usage, and provide a much smoother experience for your users.

Feel free to copy the code, customize it, and integrate it into your own ServiceNow instance. Happy coding!