Process Status Menu

Introduction

The Process Status feature in Joget allows users to monitor the progress and history of process instances within their applications. 

How does it work?

Follow these steps to implement and configure the Process Status Menu:

  1. Start Joget Server, Log in as an administrator, and select Design New App to initiate the application creation process.

  2. Fill up the App details as shown.
  3. Create a new Form, fill in its details as shown, and then Save it.

  4. Fill up the form with a text field, fill up its details as shown, and save the form
  5. Click Generate App < Generate Process - Approval Process.
  6. From the List Builder, Launch the automatically generated List.

  7. Drag a Hyperlink in to the Row action part of the List (top right of the canvas).
  8. Configure the Hyperlink as shown in the image, then Save the List.
  9. Go to the UI Builder, then click on the automatically generated UI to edit it.
  10. Drag a List UI Element and a Process Status UI Element to the Home Category. 


  11. Configure the Process Status and List UI Elements as shown.


For a detailed tutorial on leveraging the Process Status UI Element, see our comprehensive article Process Status UI Menu Sample App.

Configure process status

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

When adding Process Status, 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
    The value defined here must be unique to the rest of the UI Menus, as the first matching name will be called upon.
  • Type: Visual format choice between Path (default) or Chart.
    Example Path:

    Example Chart:
  • Record ID: Use the Request Parameter Hash variable (e.g., "#requestParam.id#") to retrieve the record ID from the URL. Mandatory field.

    Example:

    You can define the record ID to seek using the request parameter hash variable.

    Record ID: #requestParam.id#


  • View Permission: Specify who can access the record's information. 
    • Process requester
    • Participants of the process
    • Admin users
    • Group
    • Department

    At least one option must be selected.

UI

The UI settings for the Process Status Menu allow you to customize the appearance and functionality of the status display. You can add custom HTML content to the header and footer, display the process name, show future and skipped process activities, and format the username display. Additionally, you can set a JavaScript callback for events when a process activity is clicked.

Fields to Configure:

  • Custom Header: Custom Header in HTML.
  • Custom Footer: Custom Footer in HTML.
  • Show Process Name?: If checked, the process name will be generated at the top of the resultant graph. Optional.
  • Show Future Process Activities: Click the checkbox to show future process activities.
  • Show Skipped Activities: Click the checkbox to show skipped activities.
  • Username Display Format: 
    • Name
    • Username
    • Name (Username)
  • Event Click Callback (Javascript):  Callback variable activity containing information of activity and process.

Performance & offline

The Performance & Offline settings help optimize the performance of the Process Status Menu and ensure its functionality even when offline. These settings include configuring cache options and enabling offline support for Progressive Web Applications (PWA). Adjusting these settings can enhance the user experience by reducing load times and maintaining access to critical process information without an internet connection.

Cache Settings

Cache settings in Joget DX 8 allow you to control how the process status data is cached to improve performance.  

Fields to Configure:

  • Scope:
    Options include 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.

Properly configuring these settings can significantly reduce the time it takes to load the process status information and provide a smoother user experience.

For more information, see Performance Improvement with UI Caching.

PWA offline settings

PWA Offline Settings enable the Process Status Menu to function effectively without an internet connection. By enabling cache for offline support, you ensure the process status data is accessible on mobile browsers and other devices supporting PWA. 

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.
Created by Julieth Last modified by Aadrian on Dec 13, 2024