Introduction

Form allows one to directly enter/view form data, without being part of a process flow.

Form Menu Properties

Edit Form

Figure 1: Form UI Menu Properties

NameDescription
Label
The UI menu label.

Menu ID

Item link slug. Optional field.

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.

Form
Target form to load.

Show in Popup Dialog?

If checked, user will be presented in a popup dialog.

Readonly?

If checked, all the fields in the target form will be rendered as read-only.

Display Field as Label When Readonly?

Fields set to read-only will be rendered as label/text, instead of being shown in its original input element.

Figure 2: Sample Form UI Menu in runtime

Redirection

Figure 3: Redirection Properties

NameDescription

Message Shown After Form Submission

Message Shown After Form Submission.

Action to Perform After Form Saved

Action to Perform After Form Saved.

  • Redirection
  • Reload Window
Reload Target

Available options:

  • Parent Frame
  • Top Window

Only appears when Action to Perform After Form Saved is set to Reload Window.

URL Redirect After Form Submission

URL Redirect After Form Submission.

Only appears when Action to Perform After Form Saved is set to Redirection.

Redirect Target on Form Submission

Available options:

  • Top Window
  • Parent Window
  • Current Window

Only appears when Action to Perform After Form Saved is set to Redirection.

Field ID For URL Redirect Value Passover

Field ID from the preceding form to retrieve the value from.

Only appears when Action to Perform After Form Saved is set to Redirection.

Field Value Passover Method

Available options:

  • Append to URL
  • As URL Request Parameter
  • Only appears when Action to Perform After Form Saved is set to Redirection.

Request Parameter Name

Parameter name to hold the value retrieved via "Field ID For URL Redirect Value Passover" field specified above.

Only appears when Action to Perform After Form Saved is set to Redirection.

Action to Perform on Cancel

Available options:

  • Redirection
  • Close Popup Dialog
URL Redirect on Cancellation

URL Redirect on Cancellation.

When this value is set, the Cancel button will appear at the bottom of the form.

Only appears when Action to Perform on Cancel is set to Redirection.

Redirect Target on Cancellation

Available options:

  • Top Window
  • Parent Window
  • Current Window

Only appears when Action to Perform on Cancel is set to Redirection.

UI

Figure 4: UI Properties

NameDescription
Submit Button Label

Submit Button Label.

Default Value: Save

Cancel Button Label

Cancel Button Label.
Default Value: Cancel


The Cancel button will only appear when "URL Redirect on Cancellation" field is configured.

Custom Header

Custom Header in HTML.

Custom Footer

Custom Footer in HTML.

Advanced

Figure 5: Advanced Properties

NameDescription

UI Key Name

When set to point to a corresponding form field ID, the UI key value will be set into the particular field.

See UI Key for more info.

Example

UI Key Value: sample

UI Key Name: title

See Figure 6.

Load Data Using UI Key?

When checked, record row will be loaded into the form using the UI key value.

The "UI Key Name" field expects an "id" value, to facilitate record seeking using the primary key.


Figure 6: Sample UI key used in runtime

Performance & Offline

Figure 7: 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.

Read more at Performance Improvement with UI Caching.

Figure 8: 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.

Read Progressive Web Application (PWA) for more information.

AJAX & Events

New Feature

This is a new feature in Joget DX 8.

Event Listening

Figure 4: AJAX & Events - Event Listening

NameDescription
Component Object

The component to be listened.

If there is a new Page Component added into the UI, the selection will be displayed under Component Object.

There is only one Page Component - Main Menu Component in the case shown in the figure above.

Event NameFor users to input a meaningful event name.
Matched Action

Available Options:

  • Hide Component
  • Show Component
  • Show and Reload Component
  • Show and Change URL Component Parameters
  • Reload Page
  • Redirect Page
  • Show and Redirect Component
Add RowAdds new Event Listening row.

Event Triggering

Figure 5: AJAX & Events - Event Triggering

NameDescription
Event NameFor users to input a meaningful event name.
Trigger Method

Available Options:

  • GET Request
  • POST Request
  • Link Clicked
Parameter Name

For users to input a meaningful parameter name.

Operator

Available Options:

  • 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


Value

Value to be compared to the parameter.

When Not Match Trigger Event Name

Event Name when/if logical operation is not satisfied.

Add Row

Adds new Event Triggering row.

Related Documentation

  • No labels