Introduction
List Page Component offers a simple List page, compared to CRUD Page Component. List component is available in both Joget Community and Joget Enterprise & Professional editions. You can export all the records in the List to CSV, Excel, XML, and PDF by clicking on the appropriate link at the bottom of the List.
List Menu Properties
Configure List Menu
Figure 2: List Properties
| Name | Description |
|---|---|
Label | The UI menu label. You can add Font Awesome Icons into your menu labels. |
Menu ID | Item link slug. Optional field. Value defined here must be unique to the rest of the UI Menus as the first matching name will be called upon. |
| List | Target List to load. |
UI Properties
Figure 3: UI Properties
| Name | Description |
|---|---|
Show Number of Rows In Menu | Show Number of Rows In Menu. Additional query will be performed to return record count every time the UI loads. Items displayed per page depends on the List selected. Please see List Settings for more information. |
| Button Position |
|
| Selection Type |
|
| Selector Position |
|
Custom Header | Custom Header in HTML. |
Custom Footer | Custom Footer in HTML. |
Advance Properties
Figure 4: Advanced Properties
| Name | Description |
|---|---|
UI Key Name | This value should correspond to existing list's column name. When set, the list will be filtered using the UI key value. Example UI Key Name: claimant
UI Key Value: Admin Admin
|
You can configure the Performance settings in this UI Element which allows one to cache existing content for improved performance and loading speed. Read more at Performance Improvement with UI Caching.
Performance & Offline
Cache Settings
Figure 5: Cache Settings
Name | Description |
|---|---|
| Scope | Caching options are:
|
| Duration (s) | Duration in seconds to cache content, defaults to 20 seconds if applicable. |
PWA Offline Settings
Note: PWA Offline support is dependent on the theme used.
Figure 6: PWA Offline Settings
Name | Description |
|---|---|
| Enable Cache for Offline Support | Enable caching for offline support, usually set for use on 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 in First Page | Enable caching for any List links present in the first page of this UI menu. |
Read Progressive Web Application (PWA) for more information.
AJAX & Events
This is a new feature in Joget DX 8.
Event Listening
Figure 7: AJAX & Events - Event Listening
| Name | Description |
|---|---|
| Component Object | The object that will be listening for an event. This field will dynamically show selectable options depending on the page components used. e.g: if there is a page component called manage meeting in the page, it will automatically show up in this field's select box.
|
| Event Name | Custom Event Name. |
| Matched Action | Action to be listened for.
|
| Add row | Adds another row for another event |
Event Triggering
Figure 8: AJAX & Events - Event Triggering
| Name | Description |
|---|---|
| Event Name | Custom Event Name |
| Trigger Method | The method used to trigger an event.
|
| Parameter Name | Custom Parameter Name. |
| Operator | Logical Operator to be used in evaluating "Parameter" against "Value"
|
| Value | The value that the Parameter will be compared to. |
| When Not Match Trigger Event Name | Event Name when/if the logical operation is not satisfied. |
| Add row | Add another row for another event. |