Add the LWC Quick Action to the Salesforce Field Service Mobile App

Do you want to enhance your Salesforce Field Service mobile app with custom features?

In this guide, we’ll walk you through the steps to add a Lightning Web Component Quick Action (LWC) to the Field Service mobile application.

By using Quick Actions in the Lightning Web Component, you can introduce custom features that go beyond the standard capabilities of the Field Service mobile app, enabling a more personalized user experience.

Discover more solutions offered by Webkul.

Prerequisite: Enable the Lightning SDK in the Field Service mobile app

Before continuing, make sure you have done the following:

1. Access the System permissions of the permission set assigned to your service resource.
2. Check the box to “Enable the Lightning SDK for online and offline use in the Field Service mobile app. »
   • Note: If the Lightning SDK organization setting for Field Service Mobile is enabled, it will override this permission.

Without this crucial parameter, the Lightning Web Component Quick Action will not appear in the Field Service mobile app.

Why use the Salesforce Field Service mobile app?

The Field Service mobile app for Android and iOS offers a comprehensive tool for today’s mobile workforce.

Built with an offline approach, it allows you to work and save changes even without internet access. You can also customize the app to meet your specific business needs.

What is a Lightning Web Component quick action?

Lightning Web Components (LWC) Quick Actions allow users to easily complete tasks in Salesforce by directly invoking custom Lightning Web Components on record pages.

With personalized quick actions, you streamline navigation and workflows, giving users quick access to the most important information.

These intuitive user interface buttons improve productivity by putting the tools and data they need at their fingertips.

How do I configure a Lightning Web Component as a quick action on a registration page?

Configure a Lightning Web Component (LWC) as a quick action on a record page by setting metadata in the file <component>.js-meta.xml deposit.

Specify a lightning__RecordAction target and define isExposed has true to make the component accessible by a quick action.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="
    <apiVersion>62.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordAction</target>
    </targets>
</LightningComponentBundle>

Follow these simple steps to create a Lightning Web Component Quick Action (LWC) in Salesforce and add it to the layout:

1. Go to Facility.
2. Go to Object Manager and select the object in which you want to create the quick action.
3. Click on Buttons, links and actions then select New action.
4. Choose Action type as Lightning Web Component.
5. Select the desired component, specify the name and label, and click To safeguard.
6. Add the newly created quick action to the Layout of the object.

Use Case: Improving Work Order Management with LWC Quick Action

Imagine using a LUCK Rapid action which allows Service resources to effortlessly download and view images related to a work order.

This feature streamlines work order management, allowing field technicians to document and access visual information directly in the Salesforce Field Service mobile app.

The following Apex class will work as a controller for the Lightning Web Component quick action.

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());
        }
    }
}

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();
    }
}

Example

Conclusion

THE Field Service Mobile App is a powerful tool designed to enable field technicians to efficiently manage their tasks on the go.

It offers customizable features that integrate seamlessly with Salesforce Field Service, allowing businesses to streamline operations and improve customer satisfaction.

Additionally, Quick Actions in the Lightning Web Part allow users to add custom features that extend the capabilities of the Field Service mobile app.

For questions about Field Service Lightning or custom solutions, contact our expert Salesforce consultants at [email protected] or via live chat.

Our team is available year-round to provide customized solutions tailored to your business needs.