Form Menu

Introduction

The Form Menu feature in Joget enables users to directly enter/view form data without being part of a process flow. It provides a convenient way to interact with forms.

Configure form menu

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

When adding Form Menu, you will see the following fields available for configuration:

• Label: Assign a label to the UI menu.
• 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.
• Form: Select the target form to load.
• Show in Popup Dialog: Check this option to present the form in a popup dialog.
• Readonly: If checked, all fields in the form will be 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.
• Add/Edit Button In Form: Edit Button In Form. It only appears when Readonly is checked.

Redirection

Allows you to configure what happens after the form is submitted or canceled. You can define messages to show after submission, set up actions such as redirection to specific URLs, and choose the target window for redirection.

Fields to configure:

• Message Shown After Form Submission: Define the message displayed after form submission.
• Action to Perform After Form Saved: Choose an action after the form is saved.
  • Redirection: Redirect to a specified URL after submission.
  • Reload Window: Reload the window after submission.
• Reload Target: Select the target window to reload.
  • Parent Frame
  • Top Window
    Only appears when Action to Perform After Form Saved is set to Reload Window.
• URL Redirect After Form Submission: Enter the URL to redirect after form submission.
  Only appears when Action to Perform After Form Saved is set to Redirection.
• Redirect Target on Form Submission: Choose the target window for redirection.
  • 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: Specify the field ID to retrieve values for redirection.
  Only appears when Action to Perform After Form Saved is set to Redirection.
• Field Value Passover Method: Select the method to pass values for redirection.
  • 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: 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

UI

You can customize the user interface elements of the Form Menu. This includes setting labels for the submit and cancel buttons and adding custom HTML headers and footers to enhance the form's presentation.

Fields to Configure:

• 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

This section provides advanced configuration options for the Form Menu. You can set UI Key Names to map UI key values into specific fields, enable data loading using the UI key, and configure other advanced settings to enhance the form's functionality.

Fields to Configure:

• 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

• Load Data Using UI Key: When checked, the 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.

Performance & offline settings

This section allows you to optimize the performance of the Form Menu and enable offline support.

Cache settings

Configure caching options to improve performance by reducing the need to fetch data repeatedly. 

Fields to Configure:

• Scope:
  Options include 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.

For more information, see Performance Improvement with UI Caching.

PWA offline settings

Enable caching to support offline functionality, particularly useful for mobile browsers. This ensures the Form Menu component can function even without an internet connection. See the Progressive Web Application (PWA) documentation for more details.

Field to Configure:

• Enable cache for offline support: Enable caching for offline support. This is usually set for mobile browsers.