Joget DX 8 Stable Released
The stable release for Joget DX 8 is now available, with a focus on UX and Governance.
With CRUD, one will not need to do all the manual wiring in constructing a CRUD entity.
This element provides a userview menu to show the datalist of your choice and selectable forms to associate with the datalist to perform CRUD operations.
Name | Description | Screens (Click to view) |
---|---|---|
id | Menu element unique id. Userview will use this id in the URL for the menu if the Custom ID is empty. | Figure 1: CRUD Properties Figure 2: Sample CRUD in runtime |
Custom ID | Item link slug. Optional field. Ensure that value defined here is unique to other userview menus in the app, since the first matching/conflicting ID will take precedence in page loading. | |
Label | The userview menu label. You can add Font Awesome Icons into your menu labels. | |
List | Datalist to load. | |
Form (Add) | Target form to open when adding new record. Optional field. If this attribute is not mapped, then ability to add is disabled. | |
Form (Edit) | Target form to open when editing existing record. Optional field. If this attribute is not mapped, then ability to edit is disabled. |
UI
Name | Description | Screens (Click to view) |
---|---|---|
Show Number of Rows In Menu | Show number of rows beside this userview menu. Additional query will be performed to return record count every time the userview loads. | Figure 3: UI - List Properties |
Button Position | Available options:
| |
Selection Type | Available options:
| |
Selector Position | Available options:
| |
Edit Link Label | Edit link button label to show in listing. | |
New Record Button Label | New record button label to show in listing. | |
Delete Button Label | Delete button label to show in listing. | |
Show Delete Button? | When checked, the delete button will be shown, effectively enabling the deletion capability. If "Show Delete Button" is enabled, the following options will be shown:
| |
Custom Header | Custom Header in HTML to show above the listing. | |
Custom Footer | Custom Footer in HTML to show below the listing. |
Actions
Name | Description | Screens (Click to view) | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
More Actions | This attribute allows you to add more actions into the listing.
For example, see Figure 5. | Figure 4: Actions - List Properties Figure 5: Sample List Actions in runtime |
UI
Name | Description | Screens (Click to view) |
---|---|---|
Cancel Button Label | Cancel Button Label to show in add new record form. | Figure 6: UI - Add Properties |
Save Button Label | Save Button Label to show in add new record form. | |
Custom Header | Custom Header in HTML to show in add new record form. | |
Custom Footer | Custom Footer in HTML to show in add new record form. |
Actions
Name | Description | Screens (Click to view) |
---|---|---|
Message to show after Form saved | Message to show after Form saved. | Figure 7: Actions - Add Properties |
Action to perform after Form saved |
| |
After Form Saved - Redirection (Hyperlink) | Hyperlink URL. Only applicable when "Action to perform after Form saved" is set to "Redirection". Example userviewFormLink | |
After Form Saved - Redirection (Parameter Name) | Parameter to be appended as part of the link defined above. Only applicable when "Action to perform after Form saved" is set to "Redirection". Example id | |
After Form Saved - Redirection (Field Name) | Value to be assigned to the parameter defined above. Only applicable when "Action to perform after Form saved" is set to "Redirection". Example id |
UI
Name | Description | Screens (Click to view) |
---|---|---|
Readonly | If checked, effectively, the form will be rendered as read only and not editable anymore. | Figure 8: UI - Edit Properties Figure 9: Sample record traversing in runtime |
Display Fields as Labels when in Readonly? | When the form is in read only form, determines if values should be displayed as it is (label form) instead of being bounded in original input form. | |
Back Button Label | Back Button Label Default value: Back | |
Save Button Label | Save Button Label Default value: Save | |
Record Traversing | Enable record traversing when viewing a individual record in its form. For example, see Figure 9. | |
First Record Button Label | First Record Button Label. Only applicable when Record Traversing is enabled. Default value: First Record | |
Previous Record Button Label | Previous Record Button Label. Only applicable when Record Traversing is enabled. Default value: Previous Record | |
Next Record Button Label | Next Record Button Label. Only applicable when Record Traversing is enabled. Default value: Next Record | |
Last Record Button Label | Last Record Button Label. Only applicable when Record Traversing is enabled. Default value: Last Record | |
Custom Header | Custom Header in HTML to show when editing an individual record in a form. | |
Custom Footer | Custom Footer in HTML to show when editing an individual record in a form. |
Actions
Name | Description | Screens (Click to view) | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Message to show after Form saved | Message to show after Form is saved | Figure 10: Actions - Edit Properties Figure 11: Sample Edit Actions in runtime | |||||||||||
Action to perform after Form saved |
| ||||||||||||
After Form Saved - Redirection (Hyperlink) | URL to redirect to after submission. Only applicable when Action to perform after Form saved is set to Redirection. | ||||||||||||
After Form Saved - Redirection (Parameter Name) | Parameter to be included. Only applicable when Action to perform after Form saved is set to Redirection. | ||||||||||||
After Form Saved - Redirection (Field Name) | Parameter value to be assigned to the parameter above by defining a field ID from the form. Only applicable when Action to perform after Form saved is set to Redirection. | ||||||||||||
More Actions | Include action buttons to be added into the bottom of the form.
For example, see Figure 11. When such button is clicked, the form will NOT be saved. |
Name | Description | Screens (Click to view) |
---|---|---|
Userview Key Name | Define a column name to pre-filter the datalist via the userview key value. See Userview Key for more info. | Figure 12: Advanced Properties |
Cache Settings
Name | Description |
---|---|
Scope | Caching options are:
|
Duration (s) | Duration in seconds to cache content, defaults to 20 seconds if applicable. |
Read more at Performance Improvement with Userview Caching.
PWA Offline Settings
Note: PWA Offline support is dependent on the theme used.
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 datalist. |
Cache all datalist links in first page | Enable caching for any datalist links present in the first page of this userview menu. |
Read Progressive Web Application (PWA) for more information.