Page History

...

Image Added

Figure 1: Default UI SelectionImage Removed

In the default installation, an app called "App Center" with the UI named "LandscapeApp Center" is preloaded.

...

1. In order to edit it, as a Joget administrator, simply navigate to "All Apps" in the admin bar, then click on the "App Center" app.

   Thai
   ในการแก้ไขให้ไปที่ "แอพทั้งหมด" ในฐานะผู้ดูแลระบบ คลิกที่แอพ "App Center"

   
   

   Figure 2: Select App Center in All Apps

2. Then, click on the "LandscapeApp Center" UI to edit this UI.

   Thai
   จากนั้นคลิกที่ "Joget DX"

   Image Removed

   
   Image Added

   Figure 3: Click on App Center UI in App Composer

3. In the UI Builder, edit the only UI menu called "App CenterHome".

   Thai
   ในตัวสร้าง UI แก้ไขเฉพาะเมนูที่คุณเห็น

   Image Removed

   
   Image Added

   Figure 4: UI menu Home

4. It is a List UI Menu that points to the form a JSON API named "Published Apps".

   Thai
   เป็นเมนูแบบฟอร์มที่ชี้ไปยังแบบฟอร์มที่ชื่อว่า "แอพที่เผยแพร่แล้ว"

   Image Removed

   
   Image Added

   Figure 5: It points to a JSON API 

5. 
   

   
   

   By defining the content of the form, we can alter the content of the current app center. Simply click on the navigation icon beside the selected form to edit to edit the form.

   Thai
   โดยการกำหนดเนื้อหาของแบบฟอร์มเราจะสามารถแก้ไขเนื้อหาของศูนย์แอปเริ่มต้น เพียงกลับไปที่ขั้นตอนที่ 2 ด้านบนและเปิดแบบฟอร์ม

6. In the form's design, there are 2 custom HTML elements.

   Thai
   ในการออกแบบฟอร์มมีองค์ประกอบ HTML ที่กำหนดเอง 2 รายการ

   
   
   The first one (highlighted in red) is meant to be shown when a Joget administrator logs in.
   The second one (highlighted in blue) is shown at all times.

   Thai
   อันแรก (เน้นด้วยสีแดง) หมายถึงการแสดงเมื่อผู้ใช้ของบทบาทผู้ดูแลระบบเข้าสู่ระบบคนที่สอง (เน้นด้วยสีฟ้า) จะแสดงตลอดเวลา

7. Edit the second Custom HTML to reveal its code.

   Thai
   แก้ไข HTML ที่กำหนดเองที่สองเพื่อเปิดเผยรหัส

   Code Block
   language xml linenumbers true
   <div id="main-action-help"><i class="fa fa-info-circle"></i></div> <div id="search"></div> <ul id="apps"></ul> <p> <script src="/jw/js/appCenter7.js"></script> <script> AppCenter.searchFilter($("#search"), $("#apps")); AppCenter.loadPublishedApps("#apps"); </script> </p>

...