Introduction

List - Lazy Load Datalist Template is a custom template for Datalist Builder designed to enhance performance when working with large datasets. By incrementally loading rows as the user scrolls, it reduces initial load times and improves the user experience in data-heavy applications.

Plugin Info

Plugin Available in the Bundle:

Lazy Load Datalist Template

This plugin bundle is compatible with Joget DX 8.

Expected Outcome

The datalist will load a limited number of rows initially, and additional rows will be fetched automatically as the user scrolls down (or click on the Load More Data button).

Marketplace Knowledge Base > Lazy Load Datalist Template > image-2025-7-4_15-23-3.png

Figure 1: Expected Outcome of the Lazy Load Datalist Template Plugin

Get Started

Steps

You can obtain the .jar file from the latest release at: https://github.com/jogetoss/lazyload-datalist-template/releases
Upload the plugin JAR file in Joget via Settings → Manage Plugins.
You can either import the demo app or create a new app from scratch.

Steps for Importing Demo App

Download the demo app: APP_data_archive-2-20250630082017.jwa
In Joget, go to Joget Home or All Apps and click on Import App.
Select the .jwa file and complete the import process.

Steps for Creating App from Scratch

1. Begin by creating a form that includes the required fields such as a Text Field or any other relevant elements.

Marketplace Knowledge Base > Lazy Load Datalist Template > image-2025-7-4_15-27-0.png

Figure 2: Add necessary fields in the form

2. Now generate a CRUD and Launch the UI using Click here option

Marketplace Knowledge Base > Lazy Load Datalist Template > image-2025-7-4_15-32-7.png

Figure 3: Generate CRUD

3. In the datalist builder, navigate to the Settings tab and select Lazy Load Datalist Template from the template dropdown.

Marketplace Knowledge Base > Lazy Load Datalist Template > image-2025-7-4_15-49-59.png

Figure 4: Selecting the Lazy Load Datalist Template

4. Configure the template properties according to your requirements (see properties section below).

Marketplace Knowledge Base > Lazy Load Datalist Template > image-2025-7-4_15-51-43.png

Figure 5: Configuring Lazy Load Template Properties

Steps to run the plugin

1. In runtime, navigate to your datalist that has been configured with the Lazy Load Datalist Template. The datalist will initially display the first batch of records.

Marketplace Knowledge Base > Lazy Load Datalist Template > image-2025-7-4_15-56-24.png

Figure 6: Initial Datalist Display with Lazy Loading

2. Load additional records using one of two methods:

Load More Button: If enabled in the template properties, click the "Load More" button at the bottom of the datalist to load the next batch of records.
Scroll Loading: If the Load More Button is not enabled, scroll down to the bottom of the datalist. As you approach the bottom (based on the scroll threshold setting), the loading indicator will appear and additional records will be loaded automatically.
Continue scrolling to load more batches of data. The process repeats until all records are loaded. Once all data has been loaded, a "No more data" message will be displayed to indicate that the end of the dataset has been reached.

Marketplace Knowledge Base > Lazy Load Datalist Template > image-2025-7-4_16-18-11.png

Figure 7: Continued Loading of Additional Records

Lazy Load Datalist Template Properties

Lazy Loading Settings Configuration

Marketplace Knowledge Base > Lazy Load Datalist Template > image-2025-7-4_21-8-43.png

Figure 8: Plugin Configuration for Lazy Loading Settings

Name	Description
Lazy Loading Settings	Header Field.
No. of Rows	Number of records to load per request.
Show Load More Rows Button	Enable/disable the "Load More" button. When enabled, users click to load more data. When disabled, data loads automatically on scroll
Message When There Is No More Data	Message displayed when all records have been loaded
Row Height	Controls the height of each row in the datalist (Default, Narrow, Wide)
Load More Button Title	Text displayed on the Load More button when enabled