Versions Compared

Key

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



...

Table of Contents

...

borderColorgreen
borderWidth1
titleBGColor#ddffcc
borderStylesolid
titleDefinition

Introduction

The section is

...

the placeholder to hold Form Elements. Each section has one column in it by default

Get Started

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

Panel
borderColorpurple
borderWidth1
titleBGColor#ddccff
borderStylesolid
titleNew Feature

This feature is enhanced in Joget Workflow v6 to support visibility control rules, section readonly.

...

NameScreens (Click to view)
  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)

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

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

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

Image Added

Figure 1


Image Added

Figure 2


Section Properties

Edit Section

NameDescriptionScreen (Click to view)

Figure 1: Section highlighted in blue in sample HR Expenses Claim app

Screenshots in this article obtained from http://localhost:8080/jw/web/console/app/hr_expense/1/form/builder/hr_expense_new

Image Removed

Figure 2: Section Properties

NameDescription
ID

Element ID

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

Image Added

LabelSection Label
Readonly

Determines if the element is editable.

Info
titleNew Feature

New Feature added in Joget Workflow v6

Display field as Label when readonly?Displays the value of the element as plain text when an element is set to "Readonly".

...

Image Removed

...

Data Binder

NameDescriptionScreen (Click to view)
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.

Image Added

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

NameDescriptionScreen (Click to view)
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
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
titleExample using Regular Expression
Approved1|Approved2|Approved3
Using Regular Expressions?In "Field Value", you can use Regular Expression.



Image Added

info

Permission

titleNew Feature added in Joget Workflow v6info
NameNew FeatureDescriptionScreen (Click to view)
PermissionManage the permission on who to see this section. See Permission Control.

Image Added

Show as readonly when no permission?

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


Development

titleNew Feature added in Joget Workflow v6
NameNew FeatureDescriptionScreen (Click to view)
Comment

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

Info
titleNew Feature

New Feature added in Joget Workflow v6

 

 

...


Image Added