Versions Compared

Key

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

Table of Contents

Introduction

English

The section is the placeholder to hold Form Elements.

Each section has one column in it by default.

Get Started

...

The easiest way to To see how the Section Section works are to use the existing built-in App Expenses Claims. Here are the steps:

...

, the default bundled Expenses Claims app will be used for this example.

  1. Start the Joget Server  and open the  App Center.

  2. Log in as  admin  and click on the pencil icon on the  Expenses Claim  to open the  Design App. (see Figure 1)

    Image Added
    Figure 1

  3. Click on    Expense Claim New and you will be directed to the 

...

  1. Form Builder. 

  2. Hover the mouse over the right side of the Section and click Edit Section to open the Edit Section properties.

...



  1. To add a new section, click on the plus icon below the section (Figure 2)

Image Removed

Figure 1

...


  1. Image Added
    Figure 2

Section Properties

Edit Section

Image Added

Screen (Click to view)Image Removed
NameDescription
ID

Element ID.

Since the section is not an input field, one may leave it as it is .

optional to change this.

Please see Form Element for more information about defining the ID and list of reserved IDs.

LabelSection Labellabel.
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 Binder

Image Added

Screen (Click to view)Image Removed
NameDescription
Load Binder

Optional by default. When it is not set, it will use the parent's binder. You may override this behavior by using its own designated binder by defining it.

Store Binder

Optional by default. When it is not set, it will use the parent's binder. You may override this behavior by using its own designated binder by defining it.

Advanced Options

Visibility

Image Added

Screen (Click to view)Example
NameDescription
Visibility Control Rules
Sub-elementDescription
Join Type
  • AND
  • OR
Reverse ValueEquivalent of a NOT operator.
Field ID

The field ID of a form element to control the visibility of this section.

Code Block
titleExample
status
Info
titleLookup Into Subform Field

You can look up into a subform field value to control visibility on your current (parent) form.

Code Block
titleExample
subformId.status
Tip
iconfalse

The Field ID supports the use of parenthesis ( ), to group multiple conditions.

To see this in action, try out this sample app here: APP_booleanTest-sample.jwa

Field Value

Show the visibility of this section, when this field value is present in the field ID defined above.

Code Block
titleExample
Approved
Code Block
title
using Regular Expression
Approved1|Approved2|Approved3
Using Regular Expressions?In "Field Value", you can use Regular Expression.
Image Removed

PermissionPermission

Image Added

NameDescription
Screen (Click to view)
PermissionManage the permission on who to see this section. See Permission Control.

Image Removed

Show as readonly when no permission?

Displays the value of the element as plain text when a user's permission is denied.

Development

Image Added

NameDescription
Screen (Click to view)
Comment

Appends a helper text beside this section when in the form builder, to help app designers identify the section.

Image Removed

Download Demo App

APP_booleanTest-sample.jwa