Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Table of Contents

Introduction

English

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

Addon Builder plugins also have access to this feature.


Chinese

高级工具 可以在表单设计器列表设计器以及用户视图设计器中找到。

...

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)

Image Added

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.

Image Added

Figure 2

5.In Advanced Tools, you will find 6 tabs 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 Mapper, there is only one tab which is the i18n Internationalization

...

Image Removed

Figure 1

Image Removed

...

Image Modified

Figure 3

Advanced Tools Properties

...

Thai

ตัวแสดงแผนภูมิ (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.

Chinese

第一个选项卡中的树状查看器为应用设计人员提供了整体结构/定义视图,以便人们可以很容易地发现异常并立即修复,而不会花费太多的麻烦和时间。

Thai

ตัวแสดงแผนภูมิในแท็บแรกให้ตัวออกแบบแอปที่มีโครงสร้าง/มุมมองคำนิยามโดยรวมเพื่อให้สามารถจุดที่ผิดปกติใดๆและแก้ไขได้ทันทีโดยไม่ต้องยุ่งยากมากเกินไปและเวลาที่ใช้

Image Added

Figure 4 Tree Viewer


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.

Chinese

点击节点右侧的编辑(铅笔)图标,可以立即配置/编辑其属性。在保存属性时,树型浏览器将自行刷新。

Thai

คลิกที่ไอคอนแก้ไข (ดินสอ) ทางด้านขวาของโหนดที่ช่วยให้หนึ่งในการกำหนดค่า/

...

แก้ไขคุณสมบัติได้ทันทีเมื่อบันทึกคุณสมบัติ, ผู้ชมต้นไม้จะรีเฟรชตัวเอง.

...

Figure 4 Tree Viewer

Image Modified

Figure 5: Editing a node

Permission

...

...

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

Image Added

Figure 6 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).

Image Added

Figure 7 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

...

6,

...

8 &

...

9)

Info
titleNew Feature

Newly introduced in Joget DX

Image Added

Figure 8 Datalist

Image Removed

...

Builder Permission

...

Image Added

Figure

...

Image Removed

Figure 7 Datalist Builder Permission

Image Removed

9 Userview Builder Permission

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 Datalist Builder, determine which column/filter is visible. Additionally, determine which columns are visible during export.

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

Info
titleNew Feature

Newly introduced in Joget DX

...


Usages


Chinese

用法

Thai

การใช้ (Usages)

Image Added

DescriptionDescriptionScreen (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.

Chinese

在第二个选项卡中,应用程序设计人员可以检查当前实体的使用位置。从上面的截图示例中,我们可以看出,表单正在以另一种形式使用,也是工作流程的一部分。有了这样的功能,应用程序设计师将能够在其使用范围内很好地管理表单设计。

Thai

ในแท็บที่สองตัวออกแบบแอปสามารถตรวจสอบตำแหน่งที่มีการใช้งานเอนทิตีปัจจุบัน จากตัวอย่างข้างต้นเราสามารถบอกได้ว่ามีการใช้แบบฟอร์มในรูปแบบอื่นและยังเป็นส่วนหนึ่งของกระบวนการลำดับงาน ด้วยคุณลักษณะดังกล่าวตัวออกแบบ app จะสามารถจัดการการออกแบบฟอร์มได้ดีภายในขอบเขตของการใช้ (Usages)

Image Removed

Table

Chinese

Thai

ตาราง (Table)

Image Added

DescriptionDescriptionScreen (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.

Chinese

标签是在Form Builder中可用。有了这个功能,应用程序设计人员可以告诉哪个其他实体正在共享/写入当前表单当前指向的数据库表中。从上面的截图示例中,我们可以看到该表正在被多个进程工具和表单访问。

我们也可以点击  在其他应用程序中显示表的使用情况 来检查是否有其他应用程序正在写入同一个表。

在其底部,列出现有的表格列以供应用程序设计者参考。

Thai

แท็บตารางจะพร้อมใช้งานในตัวสร้างฟอร์ม ด้วยคุณลักษณะนี้ตัวออกแบบแอปสามารถบอกได้ว่าเอนทิตีอื่นจะใช้งานร่วมกัน/เขียนลงในตารางฐานข้อมูลเดียวกันกับแบบฟอร์มปัจจุบันที่กำลังชี้ไปด้วย จากตัวอย่างภาพหน้าจอด้านบนเราจะเห็นว่าตารางกำลังถูกเข้าถึงโดยเครื่องมือกระบวนการและฟอร์มหลายแบบ

นอกจากนี้เรายังสามารถคลิกที่แสดงการใช้งานตารางในปพลิเคชันอื่นๆ (Show Table Usage In Other Appsเพื่อตรวจสอบว่ามีปพลิเคชันอื่นๆที่จะเขียนไปยังตารางเดียวกันเกินไป.

คอลัมน์ตารางที่มีอยู่จะแสดงรายการไว้สำหรับการอ้างอิงของตัวออกแบบแอป

Image Removed


i18n Internationalization

Chinese

国际化

Image Added

DescriptionDescriptionScreen (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.

Chinese

为了国际化目的,构建器中定义的标签将自动列在这里。我们可以用我们想要的语言来定义多种语言。

Thai

ชื่อกำกับที่กำหนดในโปรแกรมสร้างจะถูกแสดงโดยอัตโนมัติที่นี่เพื่อวัตถุประสงค์สากล เราสามารถกำหนดในหลายภาษาตามที่เราต้องการ

Tooltip

...

Image Added

...

Image Added

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 Removed



Diff Checker

Thai

ตัวตรวจสอบ Diff (Diff Checker)

Image Added

DescriptionDescriptionScreen (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 the Merge & Update button will ensure that all modifications are merged.

Chinese

DIFF Checker能力使得协同工作可能不会损失谁是同时工作的同一实体的其他队友做了修改。在本节中,可以知道自从构建器初次加载服务器中的副本以来,哪些更改已经完成。点击  合并和更新 按钮将确保所有修改合并。

Thai

ความสามารถของตัวตรวจสอบ Diff (Diff Checker) ทำให้การทำงานร่วมกันเป็นไปได้โดยไม่สูญเสียการปรับเปลี่ยนที่ทำโดยผู้ร่วมทีมอื่นๆที่กำลังทำงานกับเอนทิตีเดียวกันในเวลาเดียวกัน ในส่วนนี้สามารถบอกได้ว่ามีการเปลี่ยนแปลงใดบ้างตั้งแต่การโหลดแรกเริ่มของผู้สร้างของเขา/เธอกับสำเนาในเซิร์ฟเวอร์ คลิกที่ Merge & Update ปุ่มจะช่วยให้แน่ใจว่าการปรับเปลี่ยนทั้งหมดจะถูกผสาน

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 Removed


JSON Definition

Chinese

JSON定义

Image Added

DescriptionDescriptionScreen (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.

Chinese

我们可以检查我们在这里工作的实体的实际定义。如果需要的话,我们可以修改文本编辑器中的定义,然后点击  更新按钮来提交。

Thai

เราสามารถตรวจสอบความหมายที่แท้จริงของเอนทิตีที่เรากำลังทำงานอยู่ที่นี่ ถ้าจำเป็นเราสามารถแก้ไขความหมายภายในตัวแก้ไขข้อความตัวเองและคลิกที่ปุ่ม ปรับปรุง (Update) ที่จะกระทำ

Image Removed