...
| Thai | ||||||
|---|---|---|---|---|---|---|
|
| English | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Table of Contents
Introduction
...
- Start the Joget Server and open the App Center.
- Log in as admin and click on the pencil icon on the Expenses Claim to open the Design App. (see Figure 1)
Figure 1
3. Click on Expense Claim New and you will be directed to the Form Builder.
...
| Icons | Form Builder | List Builder | UI Builder | Process Builder |
|---|---|---|---|---|
| TREE VIEWER | ✓ | ✓ | ✓ | ✓ |
| X-RAY | ✓ | ✓ | ✓ | ✓ |
| PERMISSION | ✓ | ✓ | ✓ | ✘ |
| USAGE | ✓ | ✓ | ✓ | ✘ |
| TABLE | ✓ | ✘ | ✘ | ✘ |
| I18N | ✓ | ✓ | ✓ | ✓ |
| TOOLTIP | ✓ | ✘ | ✘ | ✘ |
| DIFF CHECKER | ✓ | ✓ | ✓ | ✓ |
| JSON DEFINITION | ✓ | ✓ | ✓ | ✓ |
| XPDL | ✘ | ✘ | ✘ | ✓ |
| SCREENSHOT | ✓ | ✓ | ✓ | ✓ |
...
Figure 7: Editing a node
X-Ray
Form Builder
The The X-Ray is a feature that provides an overall view of what a structure consists of, what is overview of the type, ID, and ID the validator of the structureform element, making it easier for users to understand and navigate their custom designs. For example, in Figure 8, it is shown that there are 4 types of objects in the section:
...
As the structure is top down, in Figure 8, it can be translated as the Section being the parent of two Columns and the ID of the parent being the section3. The first column contains a Custom HTML type where the ID is field6_1 and the second column contains a Calculation Field Type where the ID is total.
List Builder
The X-Ray is a feature that provides an overall view of what a structure consists ofoverview of the column name, formatter, number, and mapping of each column, making it easier for users to understand and navigate their custom designs, For example, in Figure 9, it is shown that there are 4 types of objects in the section:
...
Figure 9: X-Ray Feature in List Builder
UI Builder
The X-Ray is a feature that provides an overall view of what a structure consists of, overview of the type, ID, and the visibility permission of the UI Menu, making it easier for users to understand and navigate their custom designs. For example, in Figure 10, it is shown that there are 3 types of objects in the section:
...
The Permission icon provides the app designer with fine-grain control over managing the permissions of each individual element in the builder.
Figure 11 Form Builder Permission
Clicking on the "Add Permission" button allows one to configure the permission rule for a role/group based on a permission type (see Figure 12).
Figure 12 Configure Permission
For each Permission rule added, determine which element will be visible for the selected role under the Authorized column.
Visibility controls differ based on Builder types (see Figures 11, 13 & 14)
Figure 13 List Builder Permission
Figure 14 UI Builder Permission
Differences between 'Hidden' and 'Deny Access' permission button in UI Builder.
Hidden button will hide the UI element chose on the published UI app, hence hiding the UI element according to permission rule for a role/group based on the set permission type
Deny Access button will also hide the UI element chose from the menu together with denying access according to permission rule for a role/group based on the set permission type
Figure below will show the differences between Hidden and Deny Access button behavior.
Deny Access button behavior
Access the Permission tab within the Advanced tool, set the Category to be 'Deny Access'. Watch the behavior for Deny Access button.
It will hide the UI Element and produce an error on the page. Indicating that is not accessible and denying all means of access for specified permission rule.
Hidden button behavior
Access the Permission tab within the Advanced tool, set the UI Element to be 'Hidden'. Watch the behavior for Hidden button. It will hide the UI Element from being visible to specified permission rule.
Permission Priority
The permissions in the advanced tool will follow the order of the list, with the highest permission in the list having the highest priority. It will override any permissions below it if your user is applicable to multiple permissions.
For the Form Builder, additional permission can be set at the Section element and determine whether they are hidden or read-only under the Unauthorized column on the right.
...
Figure 24: Diff Checker
| Description | ||||||
|---|---|---|---|---|---|---|
The Diff Checker capability makes collaborative work possible without losing the modifications done by other teammates who are working on the same entity at the same time. In this section, one can tell which are the changes that have been made since the initial first load of his/her builder against the copy in the server. Click on the Merge & Update button will ensure that all modifications are merged.
|
| Panel | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
This is a new feature for Joget DX version 8.1 onwards.
Figure 25: Diff Checker Navigation Buttons |
JSON Definition
| Chinese |
|---|
JSON定义 |
Figure 2526: JSON Definition
| Description | ||||
|---|---|---|---|---|
We can inspect the actual definition of the entity that we are working on here. If required, we can amend the definition within the text editor itself and click on the Update button to commit.
|
...
XPDL stands for XML Process Definition Language, is a format standardized by the Workflow Management Coalition (WfMC) to interchange business process definitions between different workflow products, which is why this feature is only available in the process builder see figure 26.
Figure 2627: XPDL Feature in Process Builder
Figure 2728: XPDL Code
| Name | Description |
|---|---|
| Upload XPDL | Uploads XPDL files |
| Update | Updates Changes in XPDL |
...
The screenshot is a feature that takes a screenshot of what it will look like in the UI. The screenshot can be downloaded by clicking the Download button located at the top right corner. This is useful for instance, sharing the design or look and feel to a client or even an employer.
Figure 2829: Screenshot Feature