Versions Compared

Old Version 4

changes.mady.by.user Mohamed Elorbany

Saved on

compared with

New Version 5

changes.mady.by.user Mohamed Elorbany

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

Introduction

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 datalist of your choice and selectable forms to associate with the datalist to perform CRUD operations.

CRUD Properties

Configure CRUD

Image RemovedImage Added

Figure 1: CRUD Properties


NameDescription
LabelThe UI menu label. You can add Font Awesome Icons into your menu labels.
Menu Custom ID

Item link slug. Optional field.

Info

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

LabelThe UI menu label. You can add Font Awesome Icons into your menu labels.
ListDatalist 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

List

UI

Figure 3: UI - List Properties


NameDescription

Show Number of Rows In Menu

Show number of rows beside this UI menu.


Note

Additional query will be performed to return 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 let & 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

New 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?

Read more in Delete Action.

Custom Header

Custom Header in HTML to show above the listing.
Custom FooterCustom Footer in HTML to show below the listing.


List

Actions

Figure 4: Actions - List Properties


NameDescription
More Actions

This attribute allows you to add more actions into the listing.

FieldDescription
LabelLink label.
HyperlinkHyperlink URL.
Parameter NameParameter name to be part of the hyperlink.
Column NameParameter value to be assigned to the parameter name declared above by defining the column name from the Data List.
Hyperlink TargetHyperlink Target.
Confirmation MessageConfirmation message before opening the link.

For example, see Figure 5.


Figure 5: Sample List Actions in runtime

Add

UI

Figure 6: UI - Add Properties


NameDescription
Cancel Button LabelCancel Button Label to show in add new record form.
Save Button LabelSave Button Label to show in add new record form.
Custom HeaderCustom Header in HTML to show in add new record form.
Custom FooterCustom Footer in HTML to show in add new record form.

Add

Actions 

Figure 7: Actions - Add Properties


NameDescription

Message to show after Form saved

Message to show after Form saved.

Action to perform after Form saved
  • Return to list
  • Continue on Adding Record
  • Display in Edit Mode
  • Redirection
  • Reload Window

After Form Saved - Redirection (Hyperlink)

Hyperlink URL.

Only applicable when "Action to perform after Form saved" is set to "Redirection".

Code Block
titleExample
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".

Info
titleExample

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".

Info
titleExample

id

Edit

UI

Figure 8: UI - Edit Properties


NameDescription
Readonly

If checked, effectively, the form will be rendered as read only and not editable anymore, and Enable Edit Button Under Form will appear.

Image Added

 Enable Edit Button Under Form

If checked,  Edit Button Under Form will be enabled and Edit Button Label will appear.

Image Added

Edit Button Label

Edit Button Label

Default: 

Image Added

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 HeaderCustom Header in HTML to show when editing an individual record in a form.
Custom FooterCustom Footer in HTML to show when editing an individual record in a form. 


Figure 9: Sample record traversing in runtime


Edit

Actions

Figure 10: Actions - Edit Properties


NameDescription
Message to show after Form savedMessage to show after Form is saved

Action to perform after Form saved

  • Return to list
  • Continue on edit record
  • Continue on edit next record
  • Redirection
  • Reload 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 action buttons to be added into the bottom of the form.

NameDescription
Label

Action button label.

Example: New Action Button

HyperlinkURL
Parameter NameParameter name to be added to the URL defined above.
Field NameField ID correspondent to the form to retrieve value from and set to the parameter above.
Hyperlink TargetHyperlink Target.
Confirmation MessageConfirmation message to prompt before proceeding after clicking on the button.

For example, see Figure 11.

Info

When such button is clicked, the form will NOT be saved.


Figure 11: Sample Edit Actions in runtime

Advanced

Figure 12: Advanced Properties


NameDescription
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

Name

Description

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.
Panel
borderColorpurple
bgColor#fefaff
borderWidth1
titleBGColor#ddccff
borderStylesolid

Read more at Performance Improvement with UI Caching.


PWA Offline Settings

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

Name

Description

Enable cache for offline supportEnable 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 datalist links in first pageEnable caching for any list links present in the first page of this UI menu.

Read Progressive Web Application (PWA) for more information.

...