Subform

Introduction

The SubForm element is integral in completing a typical process flow in Joget. It enables you to display another form within a form without limit on the nesting depth.

How does it work?

To see how the SubForm works, follow these steps using the built-in App Expenses Claims:

1. Log in as admin and open App Compose of Expenses Claim.
2. Click Expense Claim Form to be directed to the Form Builder.
   
3. Click the Expense Claim Details section to open the Configure Subform properties.
4. Take note of the Form field set to Expense Claim New form.
   
5. Click Preview and notice that the first section displayed is the Expense Claim New Form.
   

Configure subform 

The SubForm configuration allows you to integrate and display another form within a parent form. This section will guide you through the necessary settings to effectively use SubForm elements in your applications.

Here is an explanation of each field in the subform element:

• Label: Subform label to be displayed to the end-user.
• ID: Element ID. Since the subform is not an input field, this can be left as is. See Form Element for more information about defining the ID and the list of reserved IDs.
• Form: Form to be loaded as Subform.

UI

UI settings for the SubForm element help you customize the user interface and control how the subform is displayed within the parent form.

General

General settings for the SubForm element include options that affect its overall behaviour and display properties.

The following explains the configuration fields for the SubForm in the UI - General sections:

• Write Permission: Blank by default. This field in Joget DX 9.1.0 replaces the Readonly? checkbox in 9.0.x.
  • Readonly?: A new field mode that makes fields non-interactable by the user, but their value can be saved into the database.
  • Disabled: Makes the field non-interactable by the user, and its value cannot be saved in the database. This is the Readonly? checkbox function in Joget DX 9.0.5 or older.
• Display Field as Label When Readonly and Disabled?: Displays the element's value as plain text when set to Readonly or Disabled.
  Note
  

  For Joget DX 9.0.x or earlier, the fields are as follows:

  • Readonly?: If checked, all fields in the form will be read-only.
  • Display Field as Label When Readonly?: Displays the value of the element as plain text when an element is set to Readonly.
• Display Without Frame?: Decorator option. It removes the default styling applied to SubForm when checked.

Data

Data settings for the SubForm element include data linkage and data store configurations. These settings control how data is shared between the parent form and the subform, as well as how data is retrieved and stored.

Data linkage

Data linkage settings ensure proper data synchronization between the parent form and the subform. This includes setting up fields that maintain the relationship between the two forms.

The following explains the configuration fields for the SubForm in the Data section - Data linkage settings:

• Parent Field to keep Subform ID: The ID of the field in the parent form to store the SubForm table's primary key. SubForm data will be loaded based on the record ID retrieved from this field.
• Subform Field to keep Parent ID: The ID of the field in the SubForm form to store the parent table's primary key.

Data store

Data store settings control how data is loaded and stored within the subform. You can use the default plugins or override them with custom options to suit your needs.

The following explains the configuration fields for the SubForm in the Data section - Data store settings:

• Load Data From: By default, the Workflow Form Binder plugin is used for loading and storing form data in the subform. You may override it with other plugins. See the list of available Form Data Store.
• Store Data To: By default, the Workflow Form Binder plugin is used for loading and storing form data in the subform. You may override it with other plugins. See the list of available Form Data Store.