It is formerly known as List Inbox Menu in Joget DX 7.

Unlike the Inbox Page Component which is limited to its own set of predefined columns, the List Inbox Page Component allows you to define your own List columns to display important values for your list records.

List Inbox Properties

Configure List Inbox

Figure 1: List Inbox Properties

LabelThe page component label. You can add Font Awesome Icons into your menu labels.
Menu ID

Item link slug. Optional field.

Ensure that value defined here is unique to other page components in the app, since the first matching/conflicting ID will take precedence in page loading.


List to load.

This is especially important when List Database SQL Query is used to query the selected List's records.

Ensure that the "id" of the records in the List matches the process instance ID or record ID of the actual assignment.

In Joget DX, process instance IDs generated is now a UUID, instead of a predictable ID format previously used in Joget v6.

(Click image above for enlarged view)

Assignments to Display

Available options:

  • All assignments (All assignments for the current app only)
  • Assignments for all Apps (Assignment for all app in your Joget platform)
  • Assignments for a Process only (you will then have select the process name in the next field)

  • Assignments for selected Activity only (you will then have select the activity name in the next field)

Figure 2: Sample List Inbox in runtime


Figure 3: UI Properties

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.

Show Assignment Details

Enables the option to show assignment details in a tooltip upon mousing over a record.


Should you wish to have the SLA indicators visible, please see Enabling Data Collection for SLA Implementation.  

Show Assignment in Popup DialogOpen the assignment inside a popup dialog, instead of loading on the current page.
List View Custom HeaderWrite HTML to customize the list header of the list inbox UI element.
List View Custom FooterWrite HTML to customize the list footer of the list inbox UI element.
Assignment View Custom Header

Write HTML to customize the header of the assignment form.

The assignment form is the form you see upon clicking on a task assignment in the list inbox.

Assignment View Custom Footer

Write HTML to customize the footer of the assignment form.

The assignment form is the form you see upon clicking on a task assignment in the list inbox.


Figure 4: Advanced Properties

UI Key Name

Define a column name to pre-filter the List via the UI key value.

See UI Key for more info.

Performance & Offline

Cache Settings




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

PWA Offline Settings

Note: PWA Offline support is dependent on the theme used.



Enable cache for offline supportEnable caching for offline support, usually set for use on mobile browsers.
Cache all List links in first pageEnable caching for any List links present in the first page of this page component.
Cache list actions (Non post action)Enable caching for any non-POST list actions (if any) in the List.

Read Progressive Web Application (PWA) for more information.

AJAX & Events

New Feature

This is a new feature in Joget DX 8.

Event Listening

Figure 7: AJAX & Events - Event Listening

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 NameCustom Event Name.
Matched Action 

Action to be listened for.

  • Hide Component
  • Show Component
  • Show and Reload Component
  • Show and Change URL Component Parameters
  • Reload Page
  • Redirect Page
  • Show and Redirect Component
Add row Adds another row for another event

Event Triggering

Figure 8: AJAX & Events - Event Triggering

Event NameCustom Event Name
Trigger Method

The method used to trigger an event.

  • GET Request
  • POST Request
  • Link Clicked
Parameter NameCustom Parameter Name.

Logical Operator to be used in evaluating "Parameter" against "Value"

  • Equals To
  • Not Equals To
  • Greater Than 
  • Greater Than
  • Greater Than or Equals To
  • Less than
  • Less than or equals to
  • Is True
  • Is False
  • Is Empty
  • Is Not Empty
  • Contains
  • In
  • Regex Match
ValueThe value that the Parameter will be compared to.
When Not Match Trigger Event NameEvent Name when/if the logical operation is not satisfied.
Add rowAdd another row for another event.

Related Documentation

  • No labels