Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Tip
iconfalse
Advanced Tools can be found inside the Form Builder, Datalist Builder as well as in the Userview Builder.
Panel
borderColorpurple
borderWidth1
titleBGColor#ddccff
borderStylesolid
titleNew Feature

New feature added in Joget DX:

  • Permission Tab
  • Tooltip Tab

Image Removed

Figure 1: Accessing the Advanced Tools in Form Builder

Image Removed

...

Table of Contents

Introduction

Advanced Tools can be found inside the Form Builder, Datalist BuilderUserview Builder as well as the Process Mapper

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:

StepsScreens (Click to view)
  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)

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

  4. Click on Advanced Tools on the top right.

  5. In Advanced Tools, you will find 6 tabs in all the

...

  1. 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.

Table of Contents

Tree Viewer

...

    1. In the Process Mapper, there is only one tab which is the i18n Internationalization

Image Added

Figure 1


Image Added

Figure 2


Image Added

Figure 3

...


Advanced Tools

...

Properties

Tree Viewer

DescriptionScreens (Click to view)

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.

...

Image Removed

...

Clicking on the edit (pencil) icon on the right of the node allows one to configure/edit its properties right away. Upon saving

...

the properties, the tree viewer will refresh itself.

...

Image Added

Figure 4 Tree Viewer


Image Added

Permission

...

Figure 5

...

Editing a node

Permission

DescriptionScreens (Click to view)

The Permission tab provides the app designer with fine-grain control over managing the permissions of each individual element in the builder.

Image Removed

Figure 6: Advanced Tools - Permission - Configure Permission

Clicking on the "Add Permission" button allows one to configure the permission setting for a role/group based on a permission type and determining which element will be visible for the selected role. (see Figure 6)

Visibility controls differ based on Builder types

...

(see Figure 5, 7 & 8)


Image Added

Figure 5 Form Builder Permission


Image Added

Figure 6 Configure Permission


Image Modified

Figure 7

...

Datalist Builder Permission


Image Modified

Figure 8

...

Userview Builder Permission

Usages

Image Removed

...

DescriptionScreen (Click to view)
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.

Image Added

Table

Image Removed

...

DescriptionScreen (Click to view)

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 too. 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.

Image Added


i18n Internationalization

Image Removed

...

DescriptionScreen (Click to view)
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.

Image Added

Tooltip

Image Removed

...

DescriptionScreen (Click to view)

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.

Info
titleNew Feature

Newly introduced in Joget DX

Image Added

Diff Checker

Image Removed

...


DescriptionScreen (Click to view)

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 

on the Merge & Update button will ensure that all modifications are merged.


Warning

Upon pulling the latest changes from the server, clicking on Merge & Update will merge the changes, but will NOT automatically save the form, to allow users to continue editing.

Take note that the Diff Checker does NOT pull changes from the server in real-time. To see new changes, click into the Diff Checker tab again.

Image Added


JSON Definition

Image Removed

...

DescriptionScreen (Click to view)
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.

Image Added