Gantt-Chart For Resource Allocations Built with Lightning Web Components
Gantt-Chart is a sample component that demonstrates what can be built with Lightning Web Components (LWC). LWC allowed for us to develop a detailed and scalable component. The loading speed remained quick despite loading a large number of elements. In this blog post, I will share with you source code, key features, and installation instructions for this component.
Key Features
- Manage time, in terms of both daily and weekly allocations
- Drag to resize and reposition allocations
- Click a cell to add an allocation
- Filter allocations by type and/or employee role
- Three available modes of operation based on component context
Overview
Gantt-Chart was built to work with 2 core objects with a junction object between them. In the sample code, we have Projects and Resources. Resources can be allocated to Projects using the Allocation junction object. This can be adapted to fit any scenario, such as Meetings to Rooms or Trucks to Deliveries.
Modes of Operation
- Independent: Shows all Resources and Allocated Projects
- On Project Record: Shows all Resources for that Project and their Allocations
- On Resource Record: Shows all Projects and their allocations for that Resource
Built with Lightning Web Components
Building with LWC is much easier than developing with Aura Lightning Components. For example, logic flow in LWC is easier, as all of the logic is found in the JS file. Instead of checking if there are handlers catching events and if a child component modifies its parent data via two-way binding, the parent data is modified via events directly hooked to the child. Also, without inline logic to toggle CSS, you no longer need to check the HTML template for CSS logic.
The following is a list of LWC capabilities that were leveraged to create the Gantt-Chart component:
- Setters allow us to fire processes when values are set. They are similar to change handlers, except now they no longer fire extra times!
- @wire decorators allow us to grab data from the back-end, as well as easily refresh the data when needed. This is used when the user changes days/weeks range, allowing for lazy loading the data.
- for:each directives replace aura:iteration elements. They require a key attribute on each child object, but render (and more importantly rerender) quickly.
- if:false directives remove the need to write not or nested else statements like with aura:if elements.
- No more inline logic for toggling CSS classes means we need to set class lists to a property. In hindsight, using a Getters might have been more ideal so we don’t need to manually recalculate classes each time a change is made.
- Loading JS static resources (in this case, momentJS) was easy to implement.
- No more two-way binding means we had to utilize events more. Event-driven processes were a lot easier to follow, as handlers were directly connected. Nothing “magically” changed because a child component accidentally reset my value.
Installation Instructions
The source code for the component is available in this GitHub repository. Follow the instructions below to install it in your own scratch org:
- Install Salesforce DX. Enable Dev Hub in your org or sign up for a Dev Hub trail org and install the Salesforce DX CLI. Follow the instructions in the Salesforce DX Setup Guide or in the App Development with Salesforce DX trailhead module.
- Clone the Gantt-Chart repository:
git clone https://github.com/appiphony/gantt-chart.git
cd gantt-chart - Create a scratch org and provide it with an alias (gantt-chart):
sfdx force:org:create -s -f config/project-scratch-def.json -a gantt-chart - Push the app to your scratch org:
sfdx force:source:push - Open the scratch org:
sfdx force:org:open - Navigate to the Lightning App Launcher and select the Gantt-Chart app.
- Create Resources on the Resource tab.
- Create a Project on the Project tab.
- The component will be on the detail page. You can add resources to this project by clicking the + Add Resources button.
