Versions Compared

Key

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

...

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

...

Overall Structure of App Center App

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

  1. In order to edit it, simply heads to "All Apps" as the administrator. Click on "App Center" app.
  2. Then, click on "Joget Workflow".
  3. In the Userview Builder, edit the only menu that you see in it.
  4. It is a form menu that points to the form named "Published Apps".

    By defining the content of the form, we will be able to alter the content of the default app center. Simply return to step 2 above and open up 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 user of administrator role logs in. The second one (highlighted in blue) is to be shown all the time.
  6. Edit the second Custom HTML to reveal its code.

    Code Block
    languagexml
    linenumberstrue
    <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 id="apps"></div>
    <p>
    <script src="/jw/js/appCenter.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 Added

  2. The "Home Banner" and "Custom CSS" can be cuztomized.
    Image Added
  3. The help guide feature can be disabled in the same page too.
    Image Added

 

Customizing the App Center's Form

Code Block
languagexml
linenumberstrue
<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 id="apps"></div>
<p>
<script src="/jw/js/appCenter.js"></script>
<script>
AppCenter.searchFilter($("#search"), $("#apps")); 
AppCenter.loadPublishedApps("#apps");
</script>
</p>

 

  1. Line number 2 can be removed to remove the "help" icon.
    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.

    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. /web/json/apps/published/userviews?appCenter=true
    excludes : This is used to exclude the unwanted userview 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.
  2. Navigate to Settings.
  3. Under Settings navigate to "Configure Layout > Configure Universal Theme > Advanced".
    Image Added
  4. Scroll down to the bottom of the page and check the box, "Disable help guide feature?"
    Image Added
  5. Then click on the "OK" to close the window.
  6. Then click on "SAVE" to save the whole userview.

Related Tutorial