List Builder

List Builders are an important component in Joget, enabling users to create, customize, and manage data lists effectively. By leveraging List Builders, you can design data presentations that cater to various needs, ensuring that data is displayed in a meaningful and accessible way. 

List Builder offers an intuitive way of constructing a list of cumulative field values from all workflow process instances associated with the selected form. In other words, any time a user fills out a form, a row is added/updated in the database table associated with that form, and the data is presented in a list.

Columns can be rearranged be dragging it across other columns in the List.

You can export all the records in the List to CSV, Excel, XML, and PDF by clicking on the links at the bottom of any list.

Keyboard shortcut keys

Shortcut Key
Description
Ctrl + S Save Builder
Ctrl + C Copy Element
Ctrl + V Paste Element
Ctrl + Z Undo
Ctrl + Shift + Z Redo

List properties

Configure List

To go to Basic Properties, Log in as admin and click the pencil icon on the Expenses Claim to open the Design App. Then, go to List Builder Expense Submited and select Settings.

  • List ID: List unique id. List will use this id in the URL for the list if the Custom ID is empty. Mandatory Field.
  • List Name: List name. Mandatory Field.
  • Template: 
    • Table - Classic
    • Card - App Icon
    • Card - Simple
    • List - Column Data
    • List - Simple
  • Hide Page Size Selector: Hides the page size selector when selected.
  • Page Size Selector Options: Shows the options of the page size to be shown. Example(10,20,30,40,50,100).
  • Page Size: Page size is a select-box containing the values added in the Page Size Selector Options.
  • Order: 
    • DESC
    • ASC
  • Order By: Column to be sorted by.
  • Description: Description of the list.
  • Use Session to store List State: Use Session to store List State.
  • Only Show Data When Filters Are submitted?: Hides all data until filters are submitted.
  • Consider Filter Value When Get Total Size?: Consider Filter Value When Get Total Size.
  • Display Row Actions Single Column: Display Row Actions Single Column.

Responsive settings

This setting is applicable for themes supporting responsive UI.

  • Disable Responsive Feature: Disables Responsive Feature only in themes supporting responsive UI.
  • Responsive Mode: 
    • Responsive Follow Window Width
    • Responsive Follow Parent Width

See the following resources to learn how to build and optimize your data lists in Joget:

Usages

This particular section list elements that are making use of lists created using the list Builder.

UI element

Form element

Advance tools

Demo apps, tutorial and plugins from Joget Marketplace

Do try out the many free apps, tutorials and plugins for Joget List elements.

Created by Marcos Last modified by Aadrian on Dec 13, 2024