Dashboard Menu

Introduction

The Dashboard Menu feature in Joget displays multiple UI menus from the selected UI in a resizable grid layout, providing users with a customizable and interactive dashboard experience.

Configure dashboard

To configure Dashboard properties, in UI Builder, drag and drop the Dashboard element onto the canvas and click on it.

When adding Dashboard, you will see the following fields available for configuration:

• Label: The UI menu label. You can add Font Awesome Icons to your menu labels.
• Menu ID: Item link slug. Optional field.
  Unique field
  Ensure that the value defined here is unique to other UI menus in the app since the first matching/conflicting ID will take precedence in page loading.
• Configuration Mode:
  • Using UI
    • UI will need to be selected. All the menus in the selected UI will be included as portlets in the dashboard.
    • See an example of this configuration in the default bundled Expenses Claim app in a default Joget installation.
    • Do not select the same UI where the dashboard menu is located.
      
  • Using URL Portlet Setting:
    • You can configure the path and settings for each portlet individually.

    • See an example of this configuration in the default bundled Customer Relationship Management app in a default Joget installation.
      

  • Using UI Menu Plugin:
    • UI Menu Plugin to be selected.
      
• Portlet Setting: Configure positioning and dimensions for each portlet.
  Only applicable when Using UI Menu Plugin option for Configuration Mode field is selected.
  

UI

It allows you to set up the visual aspects and layout of the Dashboard Menu. You can define the minimum height for each portlet and add custom HTML headers and footers to personalize the dashboard appearance.

Fields to configure:

• Default Min Grid Cell Height (px): Minimum height for each portlet.
• Custom Header: Custom HTML to be placed before the portlets.
• Custom Footer: Custom HTML to be placed after the portlets.

Performance & offline

The Performance & Offline settings optimize the Dashboard Menu's performance and ensure it functions seamlessly even without an internet connection. This includes configuring cache settings and enabling offline support.

Cache settings

It allows you to define how content is cached for the Dashboard Menu. You can set the caching scope (None, Application, User) and the duration in seconds. Proper caching can significantly enhance performance by reducing load times.

Fields to Configure:

• Scope:
  Options included are: 
  
  • None: No caching.
  • Application: Cache content by application where all users will see the same content.
  • User: Cache by username.
• Duration (s): Duration in seconds to cache content defaults to 20 seconds if applicable.

For more information, see Performance Improvement with UI Caching.

PWA offline settings

The PWA Offline Settings section enables you to configure offline support for the Dashboard Menu. This is particularly useful for mobile browsers, allowing users to access the dashboard offline.

Field to Configure:

• Enable cache for offline support: Enable caching for offline support. This is usually set for mobile browsers. See Progressive Web Application (PWA) documentation for more details.

Related documentation

You can see the following resource for more information related:

• Open Links in Dashboard Portlet in Top Window