Assigning Default Userview as

...

the App Center

...

...

Image Added Workflow.Image Removed

In the default installation, an app called "App Center" with the Userview named "Joget WorkflowDX" is preloaded in.

Overall Structure of App Center App

The default App Center app can be fully customized towards individual's preferences..

1. In order to edit it, as a Joget administrator, simply

   heads

   navigate to "All Apps"

   as the administrator. Click on

   in the admin bar, then click on the "App Center" app.

   
   Image Removed

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

   
   Image Added

2. Then, click on "Joget

   Workflow

   DX" to edit this userview.

   Image Removed

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

   
   Image Added

3. In the Userview Builder, edit the only

   menu that you see in it.
   Image Removed

   userview menu called "App Center".

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

   
   Image Added

4. It is a

   form

   Form userview menu that points to the form named "Published Apps".

   
   Image Removed

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

   
   Image Added
   By defining the content of the form, we

   will be able to

   can alter the content of the

   default

   current app center. Simply

   return to step 2 above and open up

   click on the navigation icon beside the selected form to edit the form.

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

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

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

   
   Image Modified
   The first one (highlighted in red) is meant to be shown when a

   user of

   Joget administrator

   role

   logs in.
   The second one (highlighted in blue) is

   to be

   shown at all

   the time

   times.

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

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

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

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

Customizing the App Center's Userview

1. The logo that is displayed in the App Center can be changed under

   Userview Builder's settings > Logo URL.
   Image Removed

   Settings > Theme > Advanced > Home Banner.

   Just upload a logo of your preference to the app's Resources, then copy the new resource's generated hash variable and replace the image source.

   
   Image Added
   
   

2. The "Home Banner" and "Custom CSS" can be

   cuztomized

   customized.

   
   Image Removed

   Thai
   "Home Banner" และ "Custom CSS" สามารถ customized

   
   Image Added

3. The help guide feature can be disabled

   in

   , by scrolling to the bottom of the same page

   too

   .

   Image Removed

   Thai
   คุณลักษณะคู่มือช่วยเหลือสามารถปิดการใช้งานในหน้าเดียวกันได้เช่นกัน

...

1. 
   Image Added

Customizing the App Center's Form

<link rel="stylesheet" href="/jw/css/appCenter.css" />
<div id="main-action-help"><i class="fa fa-info-circle"></i></div>
<div id="search"></div>
<div<ul id="apps"></div>ul>
<p>
<script src="/jw/js/appCenterappCenter7.js"></script>
<script>
AppCenter.searchFilter($("#search"), $("#apps")); 
AppCenter.loadPublishedApps("#apps");
</script>
</p>

...

1. Line number

   2

   1 can be removed to remove the "help" icon.

   
   Image Removed

   Thai
   สามารถลบหมายเลขบรรทัด 2 เพื่อลบไอคอน "ความช่วยเหลือ"

   
   Image Added

2. The list of published apps is loaded by AppCenter.loadPublishedApps method. This method has extra 2 arguments to customize the published app list.

   Thai
   รายการแอปที่เผยแพร่ถูกโหลดโดยวิธี AppCenter.loadPublishedApps วิธีนี้มีข้อโต้แย้งเพิ่มเติม 2 ข้อเพื่อปรับแต่งรายการแอพที่เผยแพร่

   Code Block

   AppCenter.loadPublishedApps(container, customUrl, excludes); container : This is the container to populate the app list customUrl : This can change to a custom url to load the app list instead of the default url eg(e.g: /web/json/apps/published/userviews?appCenter=true ) excludes : This is used to exclude theany unwanted userview(s) from populate in the app center list. It is an array of string in syntax of "appId:userviewId"   Example: AppCenter.loadPublishedApps(container, null, ["isr:isr", "crm:view"]);

Disabling the "help" (Hint/Guide) 

1. To disable the Hint pop-up, edit the App Center Userview.

   Thai
   หากต้องการปิดใช้งานป๊อปอัปคำแนะนำให้แก้ไข App Center

2. Navigate to Settings.

   Thai
   นำทางไปยังการตั้งค่า

3. Under Settings, navigate to "Configure Layout > Configure

   Universal

   Theme > Advanced".

   
   Image Removed

   Thai
   ภายใต้การตั้งค่านำทางไปที่ "Configure Layout > Configure Theme > Advanced"

4. Scroll down to the bottom of the page, and check the

   box,

   "Disable help guide feature?" option.

   Image RemovedThen click on the "OK" to close the window.

   
   

   Thai
   เลื่อนลงไปที่ด้านล่างของหน้าและทำเครื่องหมายในช่อง "ปิดการใช้งานคุณลักษณะคำแนะนำช่วยเหลือหรือไม่"

   Image Added

5. Then click on "SAVE" to save the

   whole

   userview.

   Thai
   จากนั้นคลิกที่ "บันทึก" เพื่อบันทึกมุมมองทั้งภาพ

Related Tutorial

• Apps and the App Center

...