How to Create a Basic Gantt Chart with Salesforce Lightning [Video Guide]


If you’re developing a project management application based on the Salesforce Lightning platform, you probably use the Lightning Web Components (LWC) that significantly simplify and accelerate the process of building responsive applications for any device. But any modern project management app can hardly be good enough for achieving complex business objectives without a Gantt chart functionality. And the good news is that you can easily integrate the DHTMLX Gantt chart with Salesforce Lightning components into your app.

In this post, we’d like to share with you a code example on GitHub and a detailed video guide on how to use our Gantt component with Salesforce in your project.

Why Use Lightning Web Components for Creating Your Salesforce App?

Salesforce has become widely recognized in the software industry as a global leader in cloud-based CRM technologies, but the company is also known for its innovative solutions for front-end development such as Lightning Web Components (LWC). This modern JavaScript programming model helps to create high-performant Salesforce apps that run on modern web browsers using the latest web/W3C standards and newest JavaScript features.

In essence, LWCs are custom elements built using HTML and ES6+ standards. Introduced at the end of 2018 as a more advanced alternative to the older model named Aura components, LWC has become a great possibility for millions of JS developers around the globe to write code on the Lightning Platform in a much easier way. The thing is that developers don’t need to learn any new frameworks to work with LWC but can use standard tools (HTML, CSS, JS), thus the whole development process becomes much simpler and faster.

Using DHTMLX Gantt for Implementation of Gantt Chart Functionality

DHTMLX Gantt is a comprehensive JavaScript library that enables developers to build Gantt charts of any complexity level complemented with numerous useful features (critical path, resource management, auto-scheduling, etc.) and make use of advanced customization capabilities. But most importantly, our Gantt component can be smoothly and securely integrated with Salesforce via the LockerService mechanism without any compatibility issues.

Video Guide to DHTMLX Gantt Integration with LWC

When it comes to the integration of our Gantt library, developers have nothing to worry about, as our video guide makes the whole process comprehensible.

Before starting it is necessary to meet two preconditions: enable the Developer Hub that is needed for creating and managing scratch orgs and install the Salesforce command-line interface named Salesforce CLI for convenient coding. After that, just follow the instructions, and very soon you will get the desired result.

Want to try DHTMLX Gantt for building your own Salesforce app? Visit our GitHub repository where you can find the full source code of our Gantt component with Salesforce and follow the steps of our video guide.

Related Materials:

Advance your web development with DHTMLX

Gantt chart
Event calendar
Diagram library
30+ other JS components