Introduction

Plugin Info

Plugin Available in the Bundle:

1. 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).

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

Get Started

Steps

1. You can obtain the .jar file from the latest release at: https://github.com/jogetoss/lazyload-datalist-template/releases

2. Upload the plugin JAR file in Joget via Settings → Manage Plugins.

3. You can either import the demo app or create a new app from scratch.

Steps for Importing Demo App

1. Download the demo app: APP_data_archive-2-20250630082017.jwa

2. In Joget, go to Joget Home or All Apps and click on Import App.

3. 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.

Figure 2: Add necessary fields in the form

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

Figure 3: Generate CRUD

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

Figure 4: Selecting the Lazy Load Datalist Template

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

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.

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.

Figure 7: Continued Loading of Additional Records

Lazy Load Datalist Template Properties

Lazy Loading Settings Configuration

Figure 8: Plugin Configuration for Lazy Loading Settings