Approval Timeline

The Approval Timeline Widget in the form designer provides a clear, visual representation of the approval process for any given request or form. This widget is designed to help users understand the status of approvals at a glance, including past approvals, the current approval stage, and future approval steps. It also specifies who has approved each stage and whose approval is pending.

Figure: Approval Timeline - consumer view

Key features of Approval Timeline are as under:

• Visual representation of Approval Timeline that distinctly marks past, current, and future approval stages for easy interpretation.
• Color-coded indicators and icons to represent different statuses:
  • Green: Indicates completed and approved stages
  • Blue: Indicates the current approval stage under review
  • Grey: Indicates pending approvals
• Detailed view on clicking of each stage of the Approval Timelines that includes the following information:
  • Approver names
  • Approval dates
  • Comments or notes from approvers
• Responsive design of the Approval Timeline ensures a consistent user experience across different devices and screen sizes.
  
• Approval Timeline fetches real-time data from the backend to reflect the most current approval status.

Let's explore the following use-case to understand Approval Timeline widget in Apex:

Configure Approval Timeline

Configuring the Approval Timeline consists of General Properties which helps to define and set the values on how the Approval Timeline should appear, and function.

Figure: Configuration of Approval Timeline

To configure Approval Timeline, perform the following steps:

1. Navigate to Form Designer > Design Form > Widgets.
2. Drag and drop Approval Timeline widget on to the design form canvas.
   Figure: Approval Timeline widget
3. Hover over the added control to access Settings and Delete icon.
   Figure: Approval Timeline configuration
4. Clickicon to configure properties of the Approval Timeline widget.

On the configuration pop-up window, the following tabs are there where you can configure the Star Rating control:

• Properties
  Figure: Approval Timeline - configuration pop-up

Properties

This tab contains the list of generic properties using which you can define Approval Timeline's name, rendering style, and consumer view.

Refer the below table for the different fields and their descriptions in the Properties tab:

Field	Description
Title*	Specify a name for the Approval Timeline widget. This name identifies the widget on the form. For example, Approval Status or Approval Timeline. A validation message in red appears if the Title field is left empty. Following is a sample screenshot:  Figure: Validation message
View	Configure how the Approval Timeline will appear by selecting an option from the View dropdown menu. There are two options: Graphical: This is the default view. The approval timeline is presented as a visual flowchart, displaying each approval stage in a linear sequence. This view uses icons and color codes to represent the status of each stage (e.g., approved, pending, future). It provides a clear and intuitive understanding of the approval process at a glance. Figure: Grid or Graphical view Tabular: This view presents the approval timeline in a table format. Each row corresponds to an approval stage and includes columns for details such as stage name, approver, status, and timestamps. This view is ideal for users who prefer a detailed, text-based representation of the approval process, making it easy to see all relevant information in a structured format. Figure: List or Tabular view Note: If both the views are selected, then there is an option to switch between the two views in the form. Figure: Switch between views
Render As*	Select alignment of the Approval Timeline to appear on the Workflow. Two alignment options are available for Approval Timeline: Horizontal Figure: Horizonal Approval Timeline Vertical Figure: Vertical Approval Timeline

Completion Node

The last node on the Approval Timeline is the Completion Node only after the approval process is completed. If the approval process is still pending, the Approval Timeline will not have a Completion Node.

The color of the Completion Node determines whether the ticket is approved or rejected. Green color means the ticket is approved and Red color means the ticket is rejected.

Figure: Completion Node - List view

Figure: Completion Node - Grid view