CRUD Menu

Configure CRUD

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

When adding CRUD, 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: The list to load.
• Form (Add): Target form to open when adding a new record. Optional field. If this attribute is not mapped, the ability to add is disabled.
• Form (Edit): Target form to open when editing existing records. Optional field. If this attribute is not mapped, the ability to edit is disabled.

UI (List)

The UI (List) configuration allows you to set up the display and functionality of the list view in the CRUD menu. Here, you can define how the list of records appears and interacts with the user.

Fields to configure:

• Show Number of Rows In Menu: Displays the number of rows next to this UI menu.
  Additional queries will be performed to return the record count every time the UI loads.
• Button Position:
  Available options:
  
  • Top Left
  • Top Right
  • Bottom Left
  • Bottom Right
  • Top Left & Bottom Left
  • Top Right & Bottom Right
• Selection Type:
  Available options:
  
  • Multiple
  • Single
• Selector Position:
  Available options:
  
  • Left
  • Right
  • Both Left & Right
  • No
• 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: TNew Link Target.
• 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:
  • Delete Associated Grid Data?
  • Delete Associated Child Form Data?
  • Delete Files?
  • Abort Related Running Processes?
    See Delete Action for more details.
• Custom Header: Custom Header in HTML to show above the listing.
• Custom Footer: Custom Footer in HTML, to show below the listing.

Actions (List)

The Actions (List) configuration allows you to add and configure additional actions that can be performed on the list view of the CRUD menu.

Fields to configure:

More Actions: This attribute allows you to add more actions to the listing.

• Label: Link label.
• Hyperlink: Hyperlink URL.
• Parameter Name: Parameter name to be part of the hyperlink.
• Column Name: Parameter value to be assigned to the parameter name declared above by defining the column name from the Data List.
• Hyperlink Target:
  • Current Window
  • New Window
  • Top Window
  • Parent Frame
  • Popup Dialog
• Confirmation Message: Confirmation message before opening the link.

UI (Add) 

The UI (Add) configuration allows you to set up the display and functionality of the add new record form in the CRUD menu.

Fields to configure:

• 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 (Add)

The Actions (Add) configuration allows you to define actions that occur after a form is saved in the add new record view.

Fields to configure:

• Message to show after Form saved: Message to show after Form saved.
• Action to perform after Form saved:
  • Return to list
  • Continue adding record
  • Display in edit mode
  • Redirection
  • Reload Window, This opens Another field After Form Save -Reload Target.
  •  
• After Form Save - Reload Target:
  • Parent Frame
  • Top Window
• After Form Saved - Redirection (Hyperlink): Hyperlink URL.
  Only applicable when Action to perform after Form saved is set to Redirection.
  Example: UIFormLink
• 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 (Edit)

The UI (Edit) configuration allows you to set up the display and functionality of the edit record form in the CRUD menu.

Fields to configure:

• Readonly: If checked, effectively, the form will be rendered as readonly and not editable anymore, and Add Edit Button in Form will appear.
  
• Add Edit Button in Form: If checked, Edit Button in 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
  Default value: Save
• Record Traversing: Enable record traversing when viewing an individual record in its form.
  
• 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 (Edit)

The Actions (Edit) configuration allows you to define actions that occur after a form is saved in the edit record view.

Fields to configure:

• Message to show after Form saved: Message to show after Form is saved.
• Action to perform after Form saved:
  • Return to list
  • Continue editing record
  • Continue editing next record
  • Redirection
  • Reload Window, This opens Another field After Form Save -Reload Target
• After Form Save - Reload Target:
  • Parent Frame
  • Top Window
• 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 additional action buttons at the bottom of the form.
  • Label: Action button label.
    Example: New Action Button
  • Hyperlink: URL for the hyperlink.
  • Parameter Name: Parameter name to be added to the URL defined above.
  • Field Name: Field ID correspondent to the form to retrieve value from and set to the parameter above.
  • Hyperlink Target: Hyperlink Target.
  • Confirmation Message: Confirmation message to prompt before proceeding after clicking on the button.
    When such button is clicked, the form will NOT be saved.
    

Advanced

The Advanced configuration allows you to define more complex and specific settings for the CRUD menu.

Field to configure:

• UI Key Name: Define a column name to pre-filter the list via the UI Key value.

Performance & offline

The Performance & Offline configuration encompasses cache settings and PWA offline settings to optimize the application's performance and usability when offline.

Cache settings

The Cache Settings configuration allows you to define caching options to improve performance.

Fields to configure:

• Scope:
  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.
  Read more at Performance Improvement with UI Caching.

PWA offline settings

The PWA Offline Settings configuration allows you to enable and configure offline support for Progressive Web Applications (PWAs).

Fields 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 in 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.