Add LWC to the console to replace in the Lightning field service

Are you looking to improve your Salesforce Field Service Dispatch console with personalized features?

In this guide, we will guide you through the steps to add a Lightning web component in the dispatch console.

Using the Lightning web component, you can introduce features that go beyond the standard capacity of the Lightbox service in the Dispatcher console, allowing a more suitable user experience.

Explore more solutions offered by webkul.

What is the distributor console in Field Service Lightning (FSL)?

THE Distributor In Salesforce Field Service Lightning (FSL) is a powerful tool designed to help distributors effectively manage operations in the field.

It provides a centralized interface For planning, optimization and monitoring of service meetings in the field in real time.

Key characteristics of the dispatch console:

• Gart Gantt Interative: Visualize the workpayers, service meetings and the availability of resources on a calendar.
• Real -time monitoring: Monitor the locations and statutes of technicians in the field.
• Drag-drop functionality: Easily adjust the appointments by dragging them to different time slots or resources.
• Card integration: Show technicians and optimize travel time with Geolocation characteristics.
• Alerts and notifications: Receive automated alerts for conflict planning, delays or technician updates.

What is the Lightbox service in Salesforce Field Service Lightning?

THE Lightbox service In Salesforce Field Service Lightning (FSL) is a Quick vision window window.

It provides distributors essential details on a service meeting without leaving the Distributor.

It improves efficiency by allowing distributors to examine and update the details of real-time appointments, by helping them make informed planning decisions.

THE Lightbox service is a vital tool in Salesforce Field Service LightningHelp organizations to rationalize Management of field services and improve overall service efficiency.

Add a Lightning web component to the personalized Lightbox service tab.

A Lightning web component cannot be added directly to Lightbox service of the Distributor.

You can easily add a Visualforce page directly at Lightbox service.

To make it work with the Modern Salesforce features, the next step is to include a Lightning web component in the Visualforce page.

How: The addition of 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 to an autonomous will have declared the dependencies of your components.
• Write a JavaScript function that creates the component on the page using $Lightning.createComponent().

How: Add the Visualforce page in the Lightbox service of the Distributor.

• Go to Service settings in the field tab in the Field service admin App.
• In the left navigation pane, click Distribution console.
• Scroll down Personalization of the distribution view section.
• In the Service – Personalized tab 1 of the Visualforce Pages service, Enter the name of Visualforce paginer like C__Pagename

What follows Visualforce page will work as a parent of the Aura application and the 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 a controller for the Visualforce page

public with sharing class FslControllerExtension {
    public Id serviceAppointmentID {get;set;}
    public FslControllerExtension(ApexPages.standardController serviceApp){
        serviceAppointmentID = serviceApp.getId();
    }
}

The application will be implemented as 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 a 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: Improvement of the management of service appointments with Lightning web component.

Imagine using a Lightning web component which allows Distributors to effortlessly download and display images related to a Service meeting.

This functionality rationalizes Service meeting Management, authorization Distributors to document and access visual information directly in the Distributor.

Conclusion

THE Distributor change the situation for companies that use Salesforce Field Service LightningHelp them to rationalize operations and improve performance of services in the field.

It helps Distributors effectively attribute service meetingFollow the progress of real-time work and manage the schedule changes with an easy-to-dropping interface.

Designed to optimize service operations in the field, it improves labor planning and resource management for faster and more intelligent services.

In addition, the Lightning web component allows users to add personalized features that extend the capacities of the Distributor in the field service.

For any questions regarding field lightning solutions in the field or personalized solutions, contact our SALESFORCE expert consultants at [email protected] or via live cat.

Our team is available all year round to provide personalized solutions adapted to your business needs.