Approval Timeline

23 Dec 2024
3 Minutes to read

Approval Timeline

Updated on 23 Dec 2024
3 Minutes to read

Article summary

Did you find this summary helpful?

Thank you for your feedback

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:

Use Case

User Persona: Application Designer

Solution

NovaTech faces significant delays and miscommunication during the employee onboarding process. New hire forms often get stuck in approval bottlenecks because HR and departmental managers are unclear about who needs to approve the forms and when. This lack of visibility leads to prolonged onboarding times, causing frustration for new hires and impacting productivity.

NovaTech's Application Designer has integrated the Approval Timeline Widget into the employee onboarding form to clearly visualize and manage the approval process.

By using the Approval Timeline in the employee onboarding form, the HR team can easily see that the form is with the Compliance Officer and understand that the next step is IT approval. This visibility helps requestor feel assured that their onboarding is progressing, while HR can quickly address any delays by contacting the Compliance Officer directly.

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.

To configure Approval Timeline, perform the following steps:

Navigate to Form Designer > Design Form > Widgets.
Drag and drop Approval Timeline widget on to the design form canvas.
Figure: Approval Timeline widget
Hover over the added control to access Settings and Delete icon.
Figure: Approval Timeline configuration
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. Refer the following figure: 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

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. Refer the following figure:
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

Notes:

The Approval Timeline widget is displayed based on the type of Workflow that is currently running on the transaction record.
If a Workflow with at least one approval actions is fetched for the transaction record, only then the Workflow Timeline is displayed on the form.
Workflow details are only displayed if the end user has access to view the Workflow.

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

Was this article helpful?

What's Next

Change Timeline

Table of contents

Configure Approval Timeline
Properties