Tracking Milestones Visually in Salesforce Using LWC
In modern Salesforce applications, visual indicators play a huge role in improving user experience. Today, I implemented a feature where a milestone icon gets highlighted when a milestone is created for a specific vehicle. This enhancement helps users quickly identify progress without digging into related lists.
Objective
The goal was to track if a milestone is created for a record (like Vehicle__c) and highlight a milestone icon dynamically when a milestone exists. This gives users a quick, visual confirmation of milestone progress for that record.
Business Use Case
In the automotive sector (or any workflow-based environment), certain actions or lifecycle stages (milestones) are crucial—such as “Inspection Completed”, “Servicing Done”, or “Delivery Scheduled”.
Rather than forcing users to click and check each record’s related list, we provide a more intuitive approach:
- If a milestone exists → highlight the icon
- If no milestone exists → icon remains neutral
This saves time and provides instant feedback.
How It Works
- Apex Controller checks if at least one milestone record exists for a given vehicle.
Apex Method:
@AuraEnabled(cacheable=true)
public static List<Asset_Milestone__c> GetExistingMilestones(Id vehicleId) {
return [
SELECT Name, Milestone_Type__c FROM Asset_Milestone__c
WHERE Vehicle__c = :vehicleId
];
}
- LWC Component fetches this info and renders the result.
- Based on the result:
- If true → icon is visually highlighted (e.g., green)
- If false → icon remains gray or default
LWC Html Component
<template>
<div class=”timeline-container”>
<template for:each={milestones} for:item=”milestone”>
<div key={milestone.label} class=”milestone”>
<lightning-icon
icon-name={milestone.iconName}
size=”medium”
class={milestone.iconClass}
onclick={handleMilestoneClick}
data-label={milestone.label}>
</lightning-icon>
<div class=”label”>{milestone.label}</div>
</div>
</template>
</div>
</template>
LWC Css Component
.timeline-container {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
overflow-x: auto;
padding: 1rem 0;
}
.milestone {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.milestone-icon {
background-color: #f3f3f3;
border-radius: 50%;
padding: 0.5rem;
fill: #555;
}
.milestone-icon.completed {
background-color: #4f7dcc;
fill: #004e92;
}
.label {
margin-top: 0.5rem;
font-size: 0.9rem;
color: #333;
}
LWC Js Component
import { LightningElement, track, api } from ‘lwc’;
import GetAssetMilestoneField from ‘@salesforce/apex/VehicleMilestoneStagesController.GetAssetMilestoneField’;
export default class VehicleMilestoneStages extends LightningElement {
@api recordId;
@track milestones = [];
milestoneDefinitions = [
{ label: ‘Vehicle Order Received’, iconName: ‘utility:check’ },
{ label: ‘Vehicle Manufactured’, iconName: ‘utility:settings’ },
{ label: ‘Vehicle Delivered’, iconName: ‘utility:package’ },
{ label: ‘Vehicle Sold’, iconName: ‘standard:asset_object’ },
{ label: ‘10,000 Miles’, iconName: ‘custom:custom11’ },
{ label: ‘50,000 Miles’, iconName: ‘custom:custom11’ },
{ label: ‘1,00,000 Miles’, iconName: ‘custom:custom11’ },
{ label: ‘Critical Recall’, iconName: ‘utility:warning’ },
{ label: ‘Owner Changed’, iconName: ‘utility:people’ },
{ label: ‘5 Year Anniversary’, iconName: ‘utility:like’ },
{ label: ’10 Year Anniversary’, iconName: ‘utility:like’ },
{ label: ‘Lease Extended’, iconName: ‘utility:contract_alt’ },
{ label: ‘Warranty Extended’, iconName: ‘utility:shield’ }
];
connectedCallback() {
this.loadMilestones();
}
loadMilestones() {
GetExistingMilestones({ vehicleId: this.recordId })
.then(existingMilestones => {
const completedLabels = existingMilestones.map(m => m.Milestone_Type__c);
this.milestones = this.milestoneDefinitions.map(def => ({
…def,
iconClass: completedLabels.includes(def.label)
? ‘milestone-icon completed’
: ‘milestone-icon’
}));
})
.catch(error => {
console.error(‘Error loading milestones:’, error);
});
}
}
- Optionally, a label beneath the icon displays the status (“Milestone Created” or “No Milestone Yet”).
Benefits
- Quick visualization of milestone tracking
- No need to expand related lists
- Enhanced decision-making for operations teams
- Fully customizable for any object/relationship
Conclusion
This simple visual enhancement delivers meaningful insights right on the UI. It’s a great example of how Lightning Web Components can boost both functionality and user experience in Salesforce apps.