Section

A Section is a placeholder in Joget Forms designed to hold form elements, organizing them into logical groups. Each section has one column by default, but you can add more columns as needed.

How does it work?

To see how the Section element works, use the built-in App Expenses Claims as an example:

1. Start the Joget Server and open the App Center.
2. Log in as admin and click the pencil icon on the Expenses Claim to open the App Composer.
   
3. Click Expense Claim New to be directed to the Form Builder.
   
4. Click the Section element to open the Configure Section properties.
5. To add a new section, click the plus icon below the section.
   

Configure section

The Configure Section allows you to set the label, ID, and read-only status of a section. You can also choose to display the section as plain text when it's set to read-only.

• Label: Section label.
• ID: Element ID. Since the section is not an input field, changing this is optional. See Form Element for more information about defining the ID and a list of reserved IDs.
• Readonly: Determines if the element is editable.
• Display Field as Label When Readonly?: Displays the value of the element as plain text when an element is set to Readonly.

Data

The data section allows you to define custom data sources for loading and saving data. By default, it uses the parent form's data store, but you can override this by specifying your own data store.

• Load Data From: Optional by default. When not set, it will use the parent's data store. You may override this behavior by defining its own designated data store.
• Save Data To: Optional by default. When not set, it will use the parent's data store. You may override this behavior by defining its own designated data store.

Available options for both Load Data From and Save Data To:

• • BeanShell
  • Database SQL Query
  • Database Wizard
  • Default
  • Directory
  • JSON API
  • Parent Form Data Store

Advanced options

The advanced options provide settings for visibility, permissions, and development.

Visibility

Visibility settings determine when and how the section is visible based on specified rules. You can control visibility using various operators and field IDs and even utilize regex matching.

• Visibility Control Rules:
  • Join Type: Available options: AND, OR.
    
  • Reverse Value: Equivalent of a NOT operator.
    
  • Field ID: The field ID of a form element to control the visibility of this section. You can look up a subform field value to control visibility on your current (parent) form. For example, subformId.status.
    

• Operators/Operation:

  • Equal To: Field value and compare value are equal. Compare for both string and number.
  • Greater Than: Field value is greater than compare value. Compare for both string and number.
  • Greater Than Or Equal To: Field value is greater than or equal to compare value. Compare for both string and number.
  • Less Than: Field value is less than compare value. Compare for both string and number.
  • Less Than Or Equal To: Field value is less than or equal to compare value. Compare for both string and number.
  • Is True: Field value is true or 1.
  • Is False: Field value is false or 0.
  • Contains: Field value contains a compare value as a substring.
  • List Contains: Field value is a semicolon delimited string that contains the compare value as one of the delimited values.
  • In: Field value is one of the values in a semicolon delimited string in compare value.
  • Regex Match: Field value matches the regex in compare value.
    

• Field Value: Show the visibility of this section when this field value is present in the field ID defined above.
  

 This applies to Joget DX version 8.0.12 and before.

• Visibility Control Rules:
  • Join Type: Available options: AND, OR.
  • Reverse Value: Equivalent of a NOT operator.
  • Field ID: The field ID of a form element to control the visibility of this section. You can look up a subform field value to control visibility on your current (parent) form. For example, subformId.status.
    The Field ID supports using parenthesis ( ) to group multiple conditions.
  • Field Value: Show the visibility of this section when this field value is present in the field ID defined above.
    For example: Approved1|Approved2|Approved3
  • Using Regular Expressions?: In Field Value, you can use Regular Expression.

Permission

Permission settings manage who can access and interact with the section. You can set permissions based on user roles, groups, or custom criteria and display the section as read-only if the user lacks the required permissions.

• Permission: Manage who can access the uploaded files. Options include:

  • Logged In Users
  • Public
  • Custom

  For more information, see Permission Control.
  
  Available options:

• • BeanShell
  • Controlled By Manage Permission Menu
  • Department
  • Group
  • Is Admin
  • Is Anonymous
  • Logged In User
  • Multi Permissions
  • Organization
  • Plugin Template - Permission
  • User
• Show as Readonly When No Permission?: Displays the element's value as plain text when a user's permission is denied.

Development

The development section allows you to add helper text beside the section in the form builder. This helps app designers identify and understand the purpose of the section within the form.

• Comment: Add a helper text beside this section in the form builder to help app designers identify the section.