Add LWC Components to FSL Mobile App

How to extend Salesforce FSL Mobile App with LWC?

Starting from the Spring '23 Release, Salesforce has enabled us to use LWC(Lightning Web Components) in FSL (Field Service Lightning) Mobile. This is achieved by creating quick or global actions of the type "Lightning Web Component". Once created and added to the appropriate page layout, these actions appear in the "Action Menu" of the FSL Mobile App. We can use LWCs in FSL Mobile to do anything Salesforce can do.

Image 0: Lightning Web Component in the "Actions" menu of FSL Mobile App

To access LWC components inside FSL Mobile, users must have the following permission: "Custom Applications for Field Service Mobile" (previously it was named "Access Lightning Web Components inside Field Service Lightning Mobile App."). This permission can be found under "System Permissions" in a profile or permission set.

Image 1: Access Lightning Web Component in Field Service Mobile now named (Custom Applications for Field Service Mobile)

To understand how to create and add an LWC component to FSL Mobile App consider we go through an example of adding a "Hello World" LWC component to FSL Mobile App.

Create a LWC Quick Action

I have the following "hello world" LWC component:

(Read here To learn more about creating LWC Quick Actions.)

<template>
    {_message}
</template>

import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {
    _message = "Hello World"
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordAction</target>
      </targets>
      <targetConfigs>
        <targetConfig targets="lightning__RecordAction">
          <actionType>ScreenAction</actionType>
        </targetConfig>
      </targetConfigs>
</LightningComponentBundle>

After deploying my LWC component to my org, I created an LWC Quick Action on the "Service Appointment" object. Therefore, this action will only be visible in the FSL Mobile App "Action" menu when you are viewing a "Service Appointment". If you would like the action to be visible globally then you can create a global action instead and add it to the publisher layout.

Follow the steps below to see how I created the quick action on "Service Appointment" object.

Image 2: Navigating to "Service Appointment" to create a New Action.

I navigated to the "Service Appointments" object from Object Manager; I clicked "Buttons, Links, and Actions" and then "New Action."

Image 3: Creating a Lightning Web Component Action on Service Appointment object.

I select "Lightning Web Component" for the action type, and then my LWC component from the dropdown for "Lightning Web Component. I give my action a label which is the name it will have in the FSL Mobile App "Action" menu. I Click "Save" and then navigate to the Service Appointment page layout.

Image 4: Adding the Lightning Web Component Action to page layout.

I select the page layout my intended users use in the FSL Mobile App. I locate my Lightning Web Component Quick Action in the "Mobile and Lightning Actions" section and drag and drop it into my desired spot in the "Salesforce Mobile and Lightning Experience Actions" section. I save.

Finally, I log in to the FSL mobile app and navigate to a service appointment. I click "Actions," and I see "Hello World" available in the list of actions for "Service Appointment."

I select the "Hello World" action and see a new screen with my LWC Component.

Thanks for reading, incase you have any questions please feel free to reach out to me at asimalicodes@gmail.com or by leaving a comment below this blog.

Take care!