...
| Thai | ||||||
|---|---|---|---|---|---|---|
|
| English | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Table of Contents
Introduction
Advanced Tools can be found inside the Form Builder, Datalist List Builder, Userview Builder UI Builder as well as the Process MapperBuilder.
Addon Builder plugins also have access to this feature.
...
| Thai |
|---|
เครื่องมือขั้นสูง (Advanced Tools) สามารถพบได้ภายในตัวสร้างฟอร์ม (Form Builder) ตัวสร้างDatalist (Datalist List Builder) เช่นเดียวกันใน ตัวสร้างUserview (Userview UI Builder) |
Get Started
The easiest way to see how to access the Advanced Tools is to use the existing built-in App Expenses Claims. Here are the steps:
- 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.
4. Click on on Advanced Tools on at the top right.
Figure 2
5. In Advanced Tools, you will find 10 icons in all the builders mentioned with the exception of Form Builder and Process Mapper (see Figure 3).
- In Form Builder, the additional tabs are Table and Tooltip.
- In the Process MapperBuilder, there is only one tab which is the i18n Internationalizationare only seven tabs that exclude the Permission, Usage, Table, and Tooltip but include XPDL.
6. The table below shows the comparison of Advanced Tools between the builders.
| 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 3
Advanced Tools Properties
Showing Advanced Tools
As mentioned in the introduction getting started section. To reveal the advanced tools, the advanced tools button can be clicked.
Figure 4: Show Advanced Tools
...
The > button can be clicked to hide the advanced tools.
Figure 5: Hide Advanced Tools
...
The tree viewer in the first tab provides the app designer with the overall structure/definition view so that one can easily spot any anomaly and fixes it immediately without too much hassle and time spent. If the label of the element is empty, it will show the ID instead. Else, it will show the label.
| Chinese |
|---|
第一个选项卡中的树状查看器为应用设计人员提供了整体结构/定义视图，以便人们可以很容易地发现异常并立即修复，而不会花费太多的麻烦和时间。 |
| Thai |
|---|
ตัวแสดงแผนภูมิในแท็บแรกให้ตัวออกแบบแอปที่มีโครงสร้าง/มุมมองคำนิยามโดยรวมเพื่อให้สามารถจุดที่ผิดปกติใดๆและแก้ไขได้ทันทีโดยไม่ต้องยุ่งยากมากเกินไปและเวลาที่ใช้ |
Figure 6 Tree Viewer
...
| Thai |
|---|
คลิกที่ไอคอนแก้ไข (ดินสอ) ทางด้านขวาของโหนดที่ช่วยให้หนึ่งในการกำหนดค่า/แก้ไขคุณสมบัติได้ทันทีเมื่อบันทึกคุณสมบัติ, ผู้ชมต้นไม้จะรีเฟรชตัวเอง. |
Figure 7: Editing a node
X-Ray
Form Builder
The The X-Ray is a feature that provides a overall view of what a structure consists of, what is the type and ID of the structureprovides an overview of the type, ID, and the validator of the form 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 object objects in the section:
- Section
- Column
- Custom HTML
- Calculation Field
Figure 8: X-Ray Feature in Form Builder
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 is being the section3. The first columns column contains a Custom HTML type where the ID is field6_1 and the second columns column contains a Calculation Field Type where the ID is total.
List Builder
The X-Ray feature provides an overview 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:
- Name
- Column Number
- Column Mapping
- Column Formatter
Figure 9: X-Ray Feature in List Builder
UI Builder
The X-Ray feature provides an 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:
- Category
- Menu ID
- Permission
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 type (see Figure 712).
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 9Figures 11, 11 13 & 1214)
Figure 11 13 List Builder Permission
Figure 12 UI Builder Permission14 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.
For the List Builder, determine which column/filter is visible. Additionally, determine which columns is are visible during export.
For the UI Builder, additional permission can be set at the Userview UI Category element.
...
Usages
...
| title | New Feature |
|---|
...
Newly introduced in Joget DX
Figure 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 usagesusage.
|
Table
Figure 16: Table
| Chinese |
|---|
表 |
| Thai |
|---|
ตาราง (Table) |
...
| Description | ||||
|---|---|---|---|---|
The table tab is available in the Form Builder. With this feature, the app designer can tell on which other entity is sharing/writing into the same database table the current form is currently pointing tooto. From the screenshot example above, we can see that the table is being accessed by multiple process tools and forms. We can also click on the Show Table Usage In Other Apps to check if there are other apps that are writing to the same table too. At the bottom of it, existing table columns are listed down for the app designer's reference.
|
...
The ERD is a feature that fleshes out displays the relationship between the tables.
Figure x : ERD Feature Part 1
The diagrams can be clicked to reveal more detailed information about the table such as which forms uses use the table and what part of the table is having a relationship with other tables.
Figure x 17: ERD Feature Part 2
Related Documentation
Many-to-Many Relationship Form Design
Relationship Description
Describes what kind of relationship it is having has with another entity.
Figure x 18: Relationship Description Feature
...
The Existing Table Columns feature displays the existing table columns.
Figure X 19: Existing Table Columns feature
...
The Table Usage Feature displays the usage of the Table. Such as where it has been used.
Figure x 20: Table Usage Feature
i18n Internationalization
| Chinese |
|---|
国际化 |
Figure 21: i18n Internalization
Related Documentation
| 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 22: Tooltip feature
Figure 23 : Tooltip Showcase
| Description | |||||
|---|---|---|---|---|---|
Labels defined in the builder will be automatically listed down here for tooltip purposes. We can define it in as many languages as we want to.
|
...
| Thai |
|---|
ตัวตรวจสอบ Diff (Diff Checker) |
Figure 24: Diff Checker
| Description | ||||||
|---|---|---|---|---|---|---|
The Diff Checker capability makes collaborative works 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 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 26: 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
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 27: XPDL Feature in Process Builder
Figure 28: XPDL Code
| Name | Description |
|---|---|
| Upload XPDL | Uploads XPDL files |
| Update | Updates Changes in XPDL |
Screenshot
The screenshot is a feature that takes a screenshot of what it will look like in the UserviewUI. 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 x 29: Screenshot FeatureFeature