/outsystems-tutorials

How to efficiently display large datasets in OutSystems using ListRecords and pagination?

Learn how to efficiently display large datasets in OutSystems with ListRecords and pagination. Follow this guide for a seamless user experience and optimized performance.

Matt Graham, CEO of Rapid Developers

Book a call with an Expert

Starting a new venture? Need to upgrade your website? RapidDev builds Webflow websites with your growth in mind.

Book a free No-Code consultation

How to efficiently display large datasets in OutSystems using ListRecords and pagination?

 

Efficiently Displaying Large Datasets in OutSystems Using ListRecords and Pagination

 

Displaying large datasets in web applications can be challenging due to performance constraints and user experience concerns. In OutSystems, the ListRecords widget combined with pagination is a robust solution for handling large amounts of data efficiently. This guide provides a comprehensive, step-by-step approach to implementing efficient data display with ListRecords and pagination in OutSystems.

 

Prerequisites

 

  • An active OutSystems environment with developer access.
  • Familiarity with OutSystems basic concepts such as entities, aggregates, and widgets.
  • A dataset that you want to display, ideally already imported or linked to your OutSystems environment.
  • Basic understanding of ListRecords and data pagination in OutSystems.

 

Understanding ListRecords and Pagination

 

  • ListRecords: A widget used to display lists of records from data sources such as aggregates or SQL queries.
  • Pagination: A technique that allows you to display large datasets in smaller, more manageable chunks or pages.
  • Efficient data handling is crucial to ensure quick loading times and user responsiveness, especially when working with large datasets.

 

Setting Up Your OutSystems Page

 

  • Create a new web screen in your OutSystems application where you want to display the data.
  • Drag and drop the ListRecords widget onto the screen from the toolbox.
  • Bind your ListRecords widget to an aggregate or SQL query that retrieves the data you want to display.

 

Creating an Aggregate for Data Retrieval

 

  • Navigate to the Data tab in your OutSystems development environment.
  • Create a new aggregate to fetch the necessary records from your database.
  • Apply necessary filters to the aggregate to limit the dataset according to your application's requirements.
  • Sort the data based on the primary key or any other sorting order necessary for your display.

 

Implementing Pagination Logic

 

  • Create local variables: CurrentPage (Integer) and PageSize (Integer) to manage pagination states.
  • Set the PageSize appropriately based on how many records you want to display per page (e.g., 10, 20, 50).
  • Modify the aggregate to use the StartIndex and PageSize properties:
    Aggregate.LimitStartIndex = (CurrentPage - 1) \* PageSize
    Aggregate.LimitCount = PageSize
        

 

Adding Pagination Controls

 

  • Add buttons or links to your web screen for navigation (e.g., Previous and Next buttons).
  • Link these controls to logic flows that adjust the CurrentPage variable accordingly.
  • For the Previous button:
    If (CurrentPage > 1) { CurrentPage = CurrentPage - 1 }
        
  • For the Next button:
    If (Aggregate.List.Length == PageSize) { CurrentPage = CurrentPage + 1 }
        
  • Re-query the aggregate after each change to CurrentPage to refresh the displayed data.

 

Enhancing User Experience

 

  • Consider adding additional navigation elements such as "First" and "Last" page buttons for better control.
  • Display current page information or total record count using text elements to inform users about their navigation context.
  • Use loading indicators or skeleton screens to improve perceived loading times while fetching data.

 

Testing Your Pagination Implementation

 

  • Test the pagination functionality thoroughly in your OutSystems environment.
  • Check for off-by-one errors that might skip or duplicate records during navigation.
  • Ensure that navigation controls are disabled or hidden when inappropriate (e.g., no previous button on the first page).

 

Optimizing Performance for Large Datasets

 

  • Optimize your aggregates and SQL queries to only fetch necessary fields and reduce server load.
  • Consider using advanced data fetching strategies like lazy loading for extremely large datasets.
  • Monitor the performance metrics in OutSystems to identify any bottlenecks or slow queries.

 

By following these steps, you will be able to efficiently display large datasets in OutSystems using the ListRecords widget and pagination, ensuring a smooth user experience without compromising on performance. This setup not only enhances usability but also maintains system efficiency by managing server load effectively.

Explore More Valuable No-Code Resources

No-Code Tools Reviews

Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.

Explore

WeWeb Tutorials

Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.

Explore

No-Code Tools Comparison

Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.

Explore

Bubble Integrations

Dive into our comprehensive resource for Bubble.io integrations, featuring expert advice, detailed tutorials, and FAQs. Whether you're a beginner or an experienced developer, find everything you need to seamlessly integrate third-party services with Bubble.io.

Explore

Successful Bubble.io Projects

Explore a curated showcase of successful Bubble.io projects and see what's possible with no-code development. From innovative apps to complex systems, discover inspiring examples that highlight the power and versatility of Bubble.io. Start envisioning your next project today!

Explore

Flutterflow Tutorials

Explore our detailed directory of FlutterFlow tutorials to master mobile app development without coding. Gain insights through step-by-step guides, practical examples, and expert tips to efficiently use FlutterFlow and build stunning apps.

Explore

Want to explore opportunities to work with us?

Connect with our team to unlock the full potential of no-code solutions with a no-commitment consultation!

Book a Free Consultation

Client trust and success are our top priorities

When it comes to serving you, we sweat the little things. That’s why our work makes a big impact.

Rapid Dev was an exceptional project management organization and the best development collaborators I've had the pleasure of working with. They do complex work on extremely fast timelines and effectively manage the testing and pre-launch process to deliver the best possible product. I'm extremely impressed with their execution ability.

CPO, Praction - Arkady Sokolov

May 2, 2023

Working with Matt was comparable to having another co-founder on the team, but without the commitment or cost. He has a strategic mindset and willing to change the scope of the project in real time based on the needs of the client. A true strategic thought partner!

Co-Founder, Arc - Donald Muir

Dec 27, 2022

Rapid Dev are 10/10, excellent communicators - the best I've ever encountered in the tech dev space. They always go the extra mile, they genuinely care, they respond quickly, they're flexible, adaptable and their enthusiasm is amazing.

Co-CEO, Grantify - Mat Westergreen-Thorne

Oct 15, 2022

Rapid Dev is an excellent developer for no-code and low-code solutions.
We’ve had great success since launching the platform in November 2023. In a few months, we’ve gained over 1,000 new active users. We’ve also secured several dozen bookings on the platform and seen about 70% new user month-over-month growth since the launch.

Co-Founder, Church Real Estate Marketplace - Emmanuel Brown

May 1, 2024 

Matt’s dedication to executing our vision and his commitment to the project deadline were impressive. 
This was such a specific project, and Matt really delivered. We worked with a really fast turnaround, and he always delivered. The site was a perfect prop for us!

Production Manager, Media Production Company - Samantha Fekete

Sep 23, 2022