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

Overall Structure of App Center App

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.

   
   

2. Then, click on "Landscape" to edit this UI.

   
   

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

   
   

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

   
   
   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 the form.

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

   
   
   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.

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

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

Customizing the App Center's UI 

1. The logo that is displayed in the App Center can be changed under 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.

   
   
   
   

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

   
   

3. The help guide feature can be disabled, by scrolling to the bottom of the same page.

   
   

Customizing the App Center's Form

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

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

   
   

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

   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 (e.g: /web/json/apps/published/userviews?appCenter=true )
   excludes : This is used to exclude any unwanted userview(s) from 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 UI.

2. Navigate to Settings.

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

4. Scroll down to the bottom of the page, and check the "Disable help guide feature?" option.

   
   

   

5. Then click on "SAVE" to save the UI.

Related Tutorial

• Apps and the App Center