...
- 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.
...
- Section
- Column
- Custom HTML
- Calculation Field
Figure 8 : X-Ray Feature in Form Builder
As the structure is top down, it can be translated as the Section being the parent of two Columns and the ID of the parent is section3. The first columns contains a Custom HTML type where the ID is field6_1 and the second columns contains a Calculation Field Type where the ID is total.
Figure 9 : X-Ray Feature in List Builder
Figure 10 : X-Ray Feature in UI Builder
Permission
The Permission icon provides the app designer with fine-grain control over managing the permissions of each individual element in the builder.
Figure 9 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 7).
Figure 10 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 Figure 9, 11 & 12)
Figure 11 13 List Builder Permission
Figure 12 14 UI Builder Permission
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.
...
For the UI Builder, additional permission can be set at the Userview Category element.
Usages
Figure 13 15 : Usages
| Chinese |
|---|
用法 |
| Thai |
|---|
การใช้ (Usages) |
| Description | ||||
|---|---|---|---|---|
In the second tab, the app designer can inspect where the current entity is being used. From the screenshot example above, we can tell that the form is being used in another form and also being part of a workflow process. With such a feature, the app designer will be able to manage the form design well within the scope of its usages.
|
Table
Figure 14 16 : Table
| Chinese |
|---|
表 |
| Thai |
|---|
ตาราง (Table) |
...
The diagrams can be clicked to reveal more detailed information about the table such as which forms uses the table and what part of the table is having a relationship with other tables.
Figure 15 17 : ERD Feature
Relationship Description
Describes what kind of relationship it is having with another entity.
Figure 16 18 : Relationship Description Feature
...
The Existing Table Columns feature displays the existing table columns.
Figure 17 19 : Existing Table Columns feature
...
The Table Usage Feature displays the usage of the Table. Such as where it has been used.
Figure 18 20 : Table Usage Feature
i18n Internationalization
| Chinese |
|---|
国际化 |
Figure 19 21 : i18n Internalization
| Description | ||||
|---|---|---|---|---|
Labels defined in the builder will be automatically listed down here for internationalization purposes. We can define in as many languages as we want to.
|
Tooltip
Figure 20 22 : Tooltip feature
Figure 21 23 : Tooltip Showcase
| Description | |||||
|---|---|---|---|---|---|
Labels defined in the builder will be automatically listed down here for tooltip purposes. We can define in as many languages as we want to.
|
...
| Thai |
|---|
ตัวตรวจสอบ Diff (Diff Checker) |
Figure 22 24 : Diff Checker
| Description | ||||||
|---|---|---|---|---|---|---|
The Diff Checker capability makes collaborative works 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.
|
JSON Definition
| Chinese |
|---|
JSON定义 |
Figure 23 25 : 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.
|
...
The screenshot is a feature that takes a screenshot of what it will look like in the Userview. 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 24 26 : Screenshot Feature