Lazy Load Datalist Template

Introduction

Plugin information

Plugin Available in the Bundle:

1. Lazy Load Datalist Template

This plugin bundle is compatible with Joget DX 8.

Get Started

Where to get the plugin

1. You can obtain the .jar file from the Joget Marketplace.

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.

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 the App from Scratch

1. In Form Builder, create a form that includes the required fields, such as a Text Field or any other relevant elements.
   
2. Click Generate App and click Generate CRUD. Launch the UI using the Click here option.
   
3. In the List Builder, navigate to the Settings tab and select Llist - Lazy Load datalist template from the template dropdown.
   
   
4. Configure the template properties according to your requirements (see properties section below).
   

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

Lazy Load Datalist Template Properties

Lazy Loading Settings Configuration

Figure 8: Plugin Configuration for Lazy Loading Settings

Fields to configure:

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