List Menu

Introduction

The List Menu in Joget DX provides a straightforward way to create a list page for viewing records. Here are some key points about the List Menu:

1. Purpose: The List Menu is designed to create a simple list page within the Joget DX platform. It offers basic functionality for viewing records without the extensive features provided by the CRUD Menu.

2. Availability: The List Menu is available in both Joget Community and Joget Enterprise editions, making it accessible to many users.

3. Export Options: One of the notable features of the List Menu is the ability to export records to various formats such as CSV, Excel, XML, and PDF. Users can export data by clicking the appropriate export link at the bottom of the list page.

4. Simplicity: Compared to the CRUD Menu, which includes functionalities for creating, editing, and deleting records and viewing them, the List Menu focuses primarily on displaying records in a simple and organized manner.

5. User-Friendly Interface: The interface of the List Menu is designed to be user-friendly, allowing users to easily navigate through the list of records and perform actions such as sorting, filtering, and exporting data.

6. Suitable for Basic Data Viewing: The List Menu is suitable for scenarios where users primarily need to view and export data without extensive data manipulation or management features.

Overall, the List Menu provides a quick and efficient way to create list pages for data viewing purposes, with built-in export capabilities for enhanced usability.

Configure list

To configure List properties, in UI Builder, drag and drop the List element onto the canvas and click on it.

When adding List, you will see the following fields available for configuration:

• Label: The UI menu label. You can add Font Awesome Icons to your menu labels.
• Menu ID: Item link slug. Optional field.
  Ensure that the value defined here is unique to other UI menus in the app since the first matching/conflicting ID will take precedence in page loading.
• List: Select the target list that the menu will load.

Advanced

The Advanced List Menu settings allow enhanced configuration options to meet specific requirements. You can define a UI Key Name from the existing list to filter records based on the UI key value. This enables precise data display and improves user navigation within the list.

UI

The UI settings enable customization of the List Menu's user interface. You can configure the display of the number of rows, the position of buttons, the selection type, and the placement of selection controls. Additionally, you can add custom HTML to the header and footer to enhance the visual layout and functionality of the list.

• Show Number of Rows In Menu: check to display the number of rows in the menu.
  Note
  The additional query will be performed to return the record count every time the UI loads. Items displayed per page depend on the List selected. See List Settings for more information.
• Button Position: Choose the position of buttons within the menu.
  • Top Left
  • Top Right
  • Bottom Left
  • Bottom Right
  • Top Left & Bottom Left
  • Top Right & Bottom Right
• Selection Type: Specify whether users can select multiple or single items from the list.
• Selector Position: Choose where the selection control appears.
  
  • Left
  • Right
  • Both left & right
  • No
• Custom Header: Customize the header of the list using HTML.
• Custom Footer: Customize the footer of the list using HTML.

Advanced

Under the Advanced settings, you can specify a UI Key Name from the existing list to filter records using the UI key value. This option allows you to refine the data displayed based on specific criteria, improving the relevance and usability of the list for end users. For example, setting the UI Key Name to claimant and filtering by Admin ensures that only records related to the specified claimant are shown.

• UI Key Name: Define a column name from the existing list. When set, the list will be filtered using the UI key value.
  Example: 
  UI Key Name: claimant
  
  
  
  UI Key Value: Admin Admin
  

Performance & offline

Performance and Offline Settings ensure that the List Menu operates efficiently and remains accessible without an internet connection. You can configure cache settings to improve performance by storing data locally and setting up offline support for mobile browsers, ensuring a seamless user experience regardless of connectivity.

Cache settings

Cache settings in Joget allow you to define how data is cached to improve performance. 

Fields to Configure:

• Scope:
  Options include are: 
  
  • None: No caching.
  • Application: Cache content by application where all users will see the same content.
  • User: Cache by username.
• Duration (s): Duration in seconds to cache content defaults to 20 seconds if applicable.

For more information, see Performance Improvement with UI Caching.

PWA offline settings

PWA Offline Settings enable the List Menu to support offline functionality for mobile users. You can enable caching for offline support, ensuring the List Menu and its actions remain functional even without internet connection. This includes caching non-POST list actions and all list links on the first page, providing a robust offline experience.

Fileds to configure:

• Enable cache for offline support: Check this to enable caching for offline support, usually set for mobile browsers.
• Cache List Actions (Non Post Action): Enable caching for any non-POST list actions (if any) in the List.
• Cache All List Links on First Page: Enable caching for any List links present on the first page of this UI menu.

For more information, see the Progressive Web Application (PWA) documentation.