Add LWC to Dispatcher Console in Field Service Lightning
Are you looking to enhance your Salesforce Field Service Dispatcher Console with custom functionality?
In this guide, we’ll walk you through the steps to add a Lightning Web Component in Dispatcher Console.
By using Lightning Web Component, you can introduce features that go beyond the standard capabilities of the Service Lightbox in the Dispatcher console, enabling a more tailored user experience.
Explore more solutions offered by Webkul.
What is the Dispatcher Console in Field Service Lightning (FSL)?
The Dispatcher Console in Salesforce Field Service Lightning (FSL) is a powerful tool designed to help dispatchers efficiently manage field operations.
It provides a centralized interface for scheduling, optimizing, and tracking field service appointments in real-time.
Key Features of the Dispatcher Console:
- Interactive Gantt Chart: Visualize work orders, service appointments, and resource availability on a timeline.
- Real-Time Tracking: Monitor field technicians’ locations and job statuses.
- Drag-and-Drop Functionality: Easily adjust appointments by dragging them to different time slots or resources.
- Map Integration: View technician routes and optimize travel time with geolocation features.
- Alerts and Notifications: Receive automated alerts for scheduling conflicts, delays, or technician updates.
What is the Service Lightbox in Salesforce Field Service Lightning?
The Service Lightbox in Salesforce Field Service Lightning (FSL) is a quick-view pop-up window.
It provides dispatchers with essential details about a service appointment without leaving the Dispatcher Console.
It enhances efficiency by allowing dispatchers to review and update appointment details in real time, helping them make informed scheduling decisions.
The Service Lightbox is a vital tool in Salesforce Field Service Lightning, helping organizations streamline field service management and improve overall service efficiency.
Add Lightning Web Component in the Custom Tab of the Service Lightbox.
A Lightning Web Component cannot be directly added to the Service Lightbox of the Dispatcher Console.
You can easily add a Visualforce Page directly to the Service Lightbox.
To make it work with modern Salesforce features, the next step is to include a Lightning Web Component inside the Visualforce Page.
How: Adding a Lightning web component to a Visualforce page is a three-step process.
- Add the Lightning Web Components for Visualforce JavaScript library to your Visualforce page using the
<apex:includeLightning/>component. - Create and reference a standalone Aura app that declares your component dependencies.
- Write a JavaScript function that creates the component on the page using
$Lightning.createComponent().
How: Add the Visualforce Page in the Service Lightbox of the Dispatcher Console.
- Go to the Field Service Settings tab in the Field Service Admin App.
- In the left navigation pane, click Dispatcher Console UI.
- Scroll down to the Dispatcher View Customizations section.
- In the Service – Custom Tab 1 of the Service VisualForce pages, enter the name of the VisualForce page as c__pageName
The following Visualforce page will work as the parent for the Aura App and Lightning Web Component.
<apex:page showHeader="false" sidebar="false" standardController="ServiceAppointment" extensions="FslControllerExtension" lightningStylesheets="true">
<apex:includeLightning />
<div id="attachment"> </div>
<script>
$Lightning.use(
"c:fslAuraApp",
function() {
$Lightning.createComponent(
"c:wkWorkOrderAttachments",
{recordId:'{!serviceAppointmentID}'},
"attachment",
function(){
console.log('component loaded');
}
);
}
);
</script>
</apex:page>
The Apex class below serves as the controller for the Visualforce Page
public with sharing class FslControllerExtension {
public Id serviceAppointmentID {get;set;}
public FslControllerExtension(ApexPages.standardController serviceApp){
serviceAppointmentID = serviceApp.getId();
}
}
The Aura App will be implemented like this
<aura:application extends="ltng:outApp" access="GLOBAL">
<aura:dependency resource="wkWorkOrderAttachments"></aura:dependency>
</aura:application>
The Lightning Web Component will be implemented like this
HTML File
<template>
<template if:true={showSpinner}>
<lightning-spinner alternative-text="Uploading..." size="small"></lightning-spinner>
</template>
<div class="container">
<template lwc:if={showFile}>
<div class="slds-text-heading_medium">
Attachments
</div>
<div class="slds-grid slds-wrap">
<template for:each={files} for:item="file">
<div class="slds-col slds-m-around_small slds-align_absolute-center" key={file.Id}>
<img src={file.source} alt="" style="max-width: 140px;">
</div>
</template>
</div>
</template>
<template lwc:else>
<h1>No Attachments</h1>
</template>
<div class="slds-grid slds-grid_vertical">
<div class="slds-col slds-m-around_small slds-align_absolute-center">
<strong>{fileName}</strong>
<lightning-input type="file" accept=".png, .jpg, .jpeg," onchange={handleFileChange}></lightning-input>
</div>
<div class="slds-col slds-m-around_small slds-align_absolute-center">
<lightning-button label="Upload" onclick={uploadFile} variant="brand" class="s-margin-top" disabled={isUploadDisabled}></lightning-button>
<lightning-button label="Refresh View" onclick={refreshView} class="slds-m-left_small"></lightning-button>
</div>
</div>
</div>
</template>
Javascript File
import { LightningElement,api,track } from 'lwc';
import wkGetFiles from "@salesforce/apex/FileClass.wkGetFiles";
import createContentVersion from "@salesforce/apex/FileClass.createContentVersion"
export default class wkWorkOrderAttachments extends LightningElement {
@api recordId;
@track files=[];
imgList=[];
showFile=false;
showSpinner=false;
fileName;
fileContent;
isUploadDisabled=true;
connectedCallback(){
this.getRelatedImages();
}
getRelatedImages(){
this.showSpinner=true;
wkGetFiles({linkedEntityId:this.recordId}).then(response=>{
if(response!=null){
this.imgList=response;
for(let i=0;i<this.imgList.length;i++){
let image = {
Id: this.imgList[i].Id,
Title: this.imgList[i].Title,
source:window.location.origin + "/sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&versionId=" +this.imgList[i].Id +"&operationContext=CHATTER&contentId=" +this.imgList[i].ContentDocumentId
};
this.files.push(image);
}
}
this.showFile=true;
this.showSpinner=false;
})
}
handleFileChange(event){
const file = event.target.files[0];
if (file) {
this.fileName = file.name;
const reader = new FileReader();
reader.onload = () => {
const base64 = reader.result.split(',')[1];
this.fileContent = base64;
this.isUploadDisabled = false;
};
reader.readAsDataURL(file);
}
}
async uploadFile() {
if (this.fileContent && this.fileName) {
this.showSpinner = true;
try {
const result = await createContentVersion({
fileName: this.fileName,
base64Data: this.fileContent,
parentId: this.recordId,
});
this.uploadedFileId = result;
this.showSpinner = false;
this.isUploadDisabled = true;
this.files=new Array();
this.fileContent=null;
this.fileName=null;
this.connectedCallback();
} catch (error) {
this.showSpinner = false;
}
}
}
refreshView(){
this.isUploadDisabled = true;
this.files=new Array();
this.fileContent=null;
this.fileName=null;
this.connectedCallback();
}
}
The Apex class below serves as the controller for the Lightning Web Component
public with sharing class FileClass {
/**
* @description Method to retrieve the related images
* @param linkedEntityId the Salesforce recordId
* @return `List<ContentVersion>` List of related images
*/
@AuraEnabled
public static List<ContentVersion> wkGetFiles(String linkedEntityId){
List<String> fileTypes=new List<String>{'JPEG','JPG','PNG'};
Set<Id> contentDocumentIds = new Set<Id>();
for (ContentDocumentLink link : [
SELECT ContentDocumentId
FROM ContentDocumentLink
WHERE LinkedEntityId =:linkedEntityId
]) {
contentDocumentIds.add(link.ContentDocumentId);
}
return [
SELECT Id, Title, ContentDocumentId, FileType, VersionData
FROM ContentVersion
WHERE ContentDocumentId IN :contentDocumentIds
AND IsLatest = true AND FileType IN:fileTypes ORDER BY CreatedDate Asc
];
}
/**
* @description Method to create ContentVersion records
* @param fileName Name of the file
* @param base64Data the image converted to base64
* @param parentId RecordId of the related record
* @return `String` record Id of the inserted
* @exception
*/
@AuraEnabled
public static String createContentVersion(String fileName, String base64Data, String parentId) {
try {
// Decode the base64 string
Blob fileBody = EncodingUtil.base64Decode(base64Data);
// Create the ContentVersion record
ContentVersion contentVersion = new ContentVersion();
contentVersion.Title = fileName;
contentVersion.PathOnClient = fileName;
contentVersion.VersionData = fileBody;
if (String.isNotBlank(parentId)) {
contentVersion.FirstPublishLocationId = parentId; // Link to a record (optional)
}
insert contentVersion;
// Return the Id of the created ContentDocument
return contentVersion.Id;
} catch (Exception e) {
throw new AuraHandledException('Error uploading file: ' + e.getMessage());
}
}
}
Use Case: Enhancing Service Appointment Management with Lightning Web Component.
Imagine using a Lightning Web Component that allows Dispatchers to effortlessly upload and view images related to a Service Appointment.
This feature streamlines Service Appointment management, enabling Dispatchers to document and access visual information directly within the Dispatcher Console.
Conclusion
The Dispatcher Console is a game-changer for companies using Salesforce Field Service Lightning, helping them streamline operations and improve field service performance.
It helps Dispatchers efficiently assign service appointments, track job progress in real time, and manage schedule changes with an easy drag-and-drop interface.
Designed to optimize field service operations, it enhances workforce scheduling and resource management for faster, smarter service delivery.
Additionally, Lightning Web Component enables users to add custom features that extends capabilities of the Dispatcher Console in Field Service.
For any queries regarding Field Service Lightning or personalized solutions, contact our expert Salesforce Consultants at support@webkul.com or via Live Chat.
Our team is available year-round to provide customized solutions tailored to your business needs.