Builder 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 fix it immediately without too much hassle and time spent. If the element's label is empty, it will show the ID instead. Otherwise, it will show the label.

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

X-Ray

X-Ray is a feature available in various builders (Form Builder, List Builder, UI Builder) that provides an in-depth view of the internal structure and configuration of the components. It allows users to see the type, ID, and other critical attributes of elements, making it easier to debug, understand, and modify the application's design efficiently.

• Form Builder

 The X-Ray feature provides an overview of the form element's type, ID, and validator, making it easier for users to understand and navigate their custom designs. For example, it is shown that there are 3 types of objects in the section:

• • Section
  • Column
  • Text Field

As the structure is top-down, you can be translated as the Section being the parent of two Columns and the ID of the parent being section 3. 

• 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

• UI Builder

The X-Ray feature provides an overview of the type, ID, and visibility permission of the UI Menu, making it easier for users to understand and navigate their custom designs. For example, it is shown that there are 3 types of objects in the section:

• • Category
  • Menu ID
  • Permission

Permission

The Permission icon gives the app designer fine-grain control over managing the permissions of each element in the builder.

Click the Add Permission button allows one to configure the permission rule for a role/group based on a permission type.

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.

Differences between Hidden and Deny Access permission buttons in UI Builder

The Hidden button will hide the UI element chosen on the published UI app; hence, the UI element will be hidden according to the permission rule for a role/group based on the set permission type.

The Deny Access button will also hide the UI element chosen from the menu and deny access according to the permission rule for a role/group based on the set permission type.

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 Deny Access, and watch the behavior of the Deny Access button.

It will hide the UI Element and produce an error on the page, indicating that it is not accessible and denying all means of access for the specified permission rule.

Hidden button behavior

Access the Permission tab within the Advanced tool, set the UI Element to Hidden, and watch the behavior of the Hidden button. It will hide the UI Element from being visible to the specified permission rule.

Permission Priority

The advanced tool's permissions will follow the order of the list, with the highest permission having the highest priority. If your user applies multiple permissions, the highest permission will override any permissions below it.

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.

Determine which column/filter is visible in the List Builder and which columns are visible during export.

Additional permission can be set at the UI Category element for the UI Builder.

Usages

The app designer can inspect where the current entity is being used. The screenshot shows that the form is used in another form and is 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 usage.

Table

The table tab is available in the Form Builder. With this feature, the app designer can tell which other entity is sharing/writing into the same database table the current form is pointing to. From the screenshot example, you can see that multiple process tools and forms are accessing the table.

We can also click on Show Table Usage In Other Apps to check if other apps are writing to the same table.

At the bottom of it, existing table columns are listed for the app designer's reference.

Entity relationship diagram (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 it and which parts of it are related to other tables.

Related documentation 

• Designing Many-to-Many Relationships in Joget Forms

 

Relationship description

Describes what kind of relationship it has with another entity.

Existing table columns

The Existing Table Columns feature displays the existing table columns.

Table usage

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

i18n Internationalization

Labels defined in the builder will be automatically listed here for internationalization purposes. You can explain it in as many languages as you want to.

Related documentation

Related Documentation provides users with additional resources and guidance on effectively utilizing the advanced tools. It helps users understand the broader context, learn best practices, and troubleshoot issues they may encounter. Access to related documentation ensures that users can fully leverage the capabilities of the advanced tools to enhance their application design and functionality.

• Platform Translation
• Internationalization
• Message
• Generate PO File

Tooltip

Labels defined in the builder will be automatically listed here for tooltip purposes. You can explain it in as many languages as you want to.

Diff Checker

The Diff Checker capability makes collaborative work possible without losing the modifications made by other teammates working on the same entity simultaneously. In this section, one can tell which changes have been made since the builder's initial first load against the copy on the server. Clicking on the Merge & Update button will ensure that all modifications are merged.

JSON definition

You can inspect the entity's actual definition here. If necessary, you can amend the definition within the text editor and click the Update button to commit.

XPDL

XPDL stands for XML Process Definition Language, and 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.

Screenshot

The screenshot feature takes a screenshot of what it will look like in the UI. The screenshot can be downloaded by clicking the download button at the top right corner. This is useful for sharing the design, look, and feel with a client or even an employer.