Introduction

Advanced Tools can be found inside the Form Builder, List Builder, UI Builder as well as the Process Builder.

Addon Builder plugins also have access to this feature.

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:

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)

^{Figure 1}

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

4. Click on Advanced Tools at the top.

^{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).

1. In Form Builder, the additional tabs are Table and Tooltip.
2. In the Process Builder, there are 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.

^{Figure 3}

Advanced Tools Properties

Showing Advanced Tools

As mentioned in the getting started section. To reveal the advanced tools, the advanced tools button can be clicked. 

Figure 4: Show Advanced Tools

Hiding Advanced Tools

The > button can be clicked to hide the advanced tools.

Figure 5: Hide Advanced Tools

Tree Viewer

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.

^{Figure 6 Tree Viewer}

Clicking on the text allows one to configure/edit its properties right away. Upon saving the properties, the tree viewer will refresh itself.

Figure 7: Editing a node

X-Ray

Form Builder

The X-Ray is a feature that provides an overall view of what a structure consists of, what is the type and ID of the structure. For example, in Figure 8, it is shown that there are 4 types of 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 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 of, 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 is a feature that provides an overall view of what a structure consists of, 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 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}

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 are visible during export.

For the UI Builder, additional permission can be set at the UI Category element.

Usages

Figure 15: Usages

Table

Figure 16: Table

ERD

The ERD is a feature that displays the relationship between the tables.

The diagrams can be clicked to reveal more detailed information about the table such as which forms use the table and what part of the table is having a relationship with other tables.

Figure 17: ERD Feature

Related Documentation 

Many-to-Many Relationship Form Design

Relationship Description

Describes what kind of relationship it has with another entity.

Figure 18: Relationship Description Feature

Existing Table Columns

The Existing Table Columns feature displays the existing table columns.

Figure 19: Existing Table Columns feature

Table Usage

The Table Usage Feature displays the usage of the Table. Such as where it has been used.

Figure 20: Table Usage Feature

i18n Internationalization

Figure 21: i18n Internalization

Related Documentation 

Platform Translation

Internationalization

Message

Generate PO File

Tooltip

Figure 22: Tooltip feature

Figure 23 : Tooltip Showcase

Diff Checker

JSON Definition

Figure 25: JSON Definition

Screenshot

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 26: Screenshot Feature