With CRUD, one will not need to do all the manual wiring in constructing a CRUD entity. This element provides a UI menu to show the List of your choice and selectable forms to associate with the List to perform CRUD operations. |
Figure 1: CRUD 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.
| |
List | List 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. |
Figure 2: Sample CRUD in runtime
UI
Figure 3: UI - List Properties
Name | Description | |
---|---|---|
Show Number of Rows In Menu | Show number of rows beside this UI menu.
| |
Button Position | Available options:
| |
Selection Type | Available options:
| |
Selector Position | Available options:
| |
Edit Link Label | Edit link button label to show in listing. | |
Edit Link Target | Edit Link Target | |
New Record Button Label | Label of the New Record Button | |
New Link Target | New Link Target | |
Show Delete Button? | When checked, the delete button will be shown, effectively enabling the deletion capability.
Read more in Delete Action. | |
Custom Header | Custom Header in HTML to show above the listing. | |
Custom Footer | Custom Footer in HTML to show below the listing. |
Actions
Figure 4: Actions - List Properties
Name | Description | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
More Actions | This attribute allows you to add more actions into the listing.
For example, see Figure 5. |
Figure 5: Sample List Actions in runtime
UI
Figure 6: UI - Add Properties
Name | Description |
---|---|
Cancel Button Label | Cancel Button Label to show in add new record form. |
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
Figure 7: Actions - Add Properties
Name | Description | |
---|---|---|
Message to show after Form saved | Message to show after Form saved. | |
Action to perform after Form saved |
| |
After Form Save -Reload Target |
| |
After Form Saved - Redirection (Hyperlink) | Hyperlink URL. Only applicable when "Action to perform after Form saved" is set to "Redirection".
| |
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".
| |
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".
|
UI
Figure 8: UI - Edit Properties
Name | Description |
---|---|
Readonly | If checked, effectively, the form will be rendered as read only and not editable anymore, and Enable Edit Button Under Form will appear. |
Enable Edit Button Under Form | If checked, Edit Button Under Form will be enabled and Edit Button Label will appear. |
Edit Button Label | Edit Button Label Default: |
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 |
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. |
Previous Record Button Label | Previous Record Button Label. |
Next Record Button Label | Next Record Button Label. Default value: Next Record |
Last Record Button Label | Last Record Button Label. 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. |
Figure 9: Sample record traversing in runtime
Actions
Figure 10: Actions - Edit Properties
Name | Description | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Message to show after Form saved | Message to show after Form is saved | |||||||||||||||
Action to perform after Form saved |
| |||||||||||||||
After Form Save -Reload Target |
| |||||||||||||||
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.
|
Figure 11: Sample Edit Actions in runtime
Figure 12: Advanced Properties
Name | Description |
---|---|
UI Key Name | Define a column name to pre-filter the list via the UI key value. See UI Key for more info. |
Figure 6: Performance & Offline 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 UI Caching.
Note: PWA Offline support is dependent on the theme used.
Name | Description |
---|---|
Enable cache for offline support | Check this to 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.