Implementing a Simple Timeline in Salesforce Using Vis.js
Petr Novotný has created an excellent LWC component for showing a Gantt like chart. Here is his write-up on the component along with links to the installation package and the source code.
Petr Novotný – Salesforce Professional ★ Certified Consultant, Architect & DEV | PRINCE2 | 15+ Yrs in IT | Global Project Lead | Helping Companies Design, Lead & Develop CRM Implementations
Throughout my numerous Salesforce implementations, I’ve often yearned for a simple means to visualize tasks on a timeline. Fortunately, I’ve discovered a solution and I’m eager to share it with you. Salesforce has an exceptional community, particularly the contributors to unofficialsf.com, from whom I’ve learned a great deal. Now, it’s time for me to give back.
With a basic understanding of Salesforce Flows and CSS, you can enhance your timeline with enriched features including different object grouping, dynamic task status visualization, and even task owner images.
So, what do you need to do? Let’s delve into the basics.
The Timeline is a Lightning Web Component (LWC) designed for Salesforce Screen Flows. It works primarily with two input collections. The first collection comprises the set of items you’d like displayed on the timeline. The second collection refers to the categories you’d like to use for grouping timeline items (this could be left blank if preferred).
The magic happens thanks to the external open-source Vis.js library, which is uploaded to Salesforce as a static resource. This LWC component leverages Vis.js to effectively visualize your tasks in a timeline format.
Let’s define a sample use case.
We have a Project object under which there are Task objects. Our objective is to show the project timeline on the Project record page.
Here’s how you can achieve this step-by-step:
1. Create a screen flow with recordId as an input variable.
2. Query all the tasks related to the given project.
3. Prepare the timeline item collection from these tasks.
4. Position the LWC on the screen and populate it with the timeline item collection.
5. Finally, place the screen flow on the Project record object page
Given the basic understanding of Salesforce flows, steps 1, 2, and 5 should be quite straightforward – it’s the usual process of creating a screen flow, querying related tasks, and placing the flow on a record object page.
Therefore, in this article, let’s focus more on steps 3 and 4 where things get a bit more complex – preparing the timeline item collection and implementing the Lightning Web Component. These are the crucial steps in our process of visualizing tasks on a timeline.
Step 3 Task loop
Start by defining an apex-defined variable for the timeline item, followed by the timeline item collection.
During the loop, we are creating timeline items and adding them to the collection. This collection will serve as an input for the timeline LWC.
Each Timeline Item encompasses the following attributes:
• itemContent: The contents of the item. Can be plain text or HTML code.
• itemStart: The start date of the item on the timeline.
• itemEnd: The end date of the item. This is optional and can be left null. If an end date is provided, the item is displayed as a range; without it, the item is displayed as a box.
• itemGroup: A group ID to use if you wish to group timeline items.
• itemType: The type of the item. Options include ‘box’ (default), ‘point’, ‘range’, or ‘background’. ‘Box’ and ‘point’ need a start date, while ‘range’ and ‘background’ require both a start and an end date.
• itemStyle: A CSS text string to apply custom styling for an individual item, for example, “color: red; background-color: pink;”.
Within the flow, we are filling the itemContent with a picture and a task description in HTML, handling situations when a task has only a due date without a start date. Finally, we assign different colors to timeline items based on the task status: Green for resolved tasks and Red for overdue tasks.
Step 4: Placing the LWC Component
In this step, we position the Lightning Web Component (LWC) in the screen flow, and integrate the itemCollection variable into the LWC. This ensures that the timeline displays the items we structured in the prior step.
Installation
To get started, download the package and install it in your Salesforce organization.
The package contains the following components. Allow me to explain each of them:
Ideas for Implementation
The true power of an effective timeline visualization lies in its potential for enhancement and customization. Picture yourself as a project manager who can, with a single click, get a comprehensive view of the entire project.
For instance, we could incorporate a refresh button into the flow. This would re-query the data, keeping the timeline updated in real time – an essential feature for managing dynamic projects.
Beyond tasks, we could extend this model to display multiple types of objects related to the project, providing a holistic, one-glance understanding of diverse project elements.
The addition of filter buttons might prove helpful too. These could help the project manager focus on key aspects like overdue tasks, upcoming milestones, or tasks assigned to specific individuals or teams.
Isn’t it wonderful to envision a tool that enables Project Managers to quickly grasp the project status and swiftly make informed decisions?
Quite intriguing, isn’t it?
Wishing you success on your Salesforce journey. Cheers!
-Petr
Documentation of Attributes and Sample Values
TimelineItem Attributes:
• itemContent: The contents of the item. This can be plain text or HTML code.
• itemStart: The start date of the item on the timeline.
• itemEnd: The end date of the item. This is optional and can be left null if unavailable. If an end date is provided, the item is displayed as a range. If not, the item is displayed as a box.
• itemGroup: Group ID. Utilize this if you want to group timeline items.
• itemType: The type of the item. Can be ‘box’ (default), ‘point’, ‘range’, or ‘background’. Note: ‘box’ and ‘point’ require a start date, while ‘range’ and ‘background’ require both a start and end date.
• itemStyle: A CSS text string to apply custom styling for an individual item, for example “color: red; background-color: pink;”.
Sample Values for TimelineItem:
• itemContent: “Data Design”
• itemStart: “2023-01-01”
• itemEnd: “2023-02-01”
• itemGroup: “deliveryGroupId”
• itemType: null
• itemStyle: “background-color:#F3E8FF;border-color:#9333EA;color:#9333EA“
TimelineGroup Attributes:
• groupId: An ID for the group. The group will display all items having a ‘group’ property that matches the ID of the group.
• groupContent: The contents of the group. This can be plain text, HTML code, or an HTML element.
Sample Values for TimelineGroup:
• groupId: “deliveryGroupId”
• groupContent: “Delivery”
Links to Vis.js Library Documentation:
