Salesforce: Mobile Extension Toolkit for Field Service Lightning

As of Winter 21 release, Salesforce offers developers to create their own HTML based mobile extensions for native FSL App. This feature is currently in pilot so we can expect some more changes and updates from salesforce until it fully goes GA. In this post I am going to show you can host the HTML app as an FSL action and how different elements and functions integrate together.

Why do we use this feature?

As we all know whenever we work with salesforce mobile app there are certain considerations and limitations we have to take into account whenever we design a use case. In FSL the end users have a wide variety of choices to perform various types of actions which are built natively on salesforce using flows or standard quick actions. However we cannot build a fully customizable flow which runs a lightning web component or aura components in the background. This is currently a limitation on FSL. So if you want to use your own custom screens with fully customizable user interface flows Mobile extension toolkit is the best fit here.

Example

Let’s take a very simple example of creating a very simple HTML based application which uses standard FSL methods for fetching the record, getting the picklist values and run a SOQL Query. These are some of the very common methods you may use while building your own extensions. There are other capabilities which are also available but for this example I will use these 3 functions. Steps →

Step 1 → Create a native HTML app on your machine with index.html file as a root. This file is a must as this is the entry point of your extension.

Step 2 → Once your index file is ready, you can start forming your application structure by adding scripts and other features you would like to add. For this example I created a scripts folder to store my FSL scrips which will be executed from the root HTML file during runtime

Before we move the step 3, This how my page currently looks like on desktop.

Desktop View

Obviously it won’t work as it is only intended for FSL app on Mobile. You can refer the code from this GitHub Repo.

Step 3 → Now once our native HTML extension is all set, Its time to test! Navigate to salesforce setup → Mobile Extension Toolkit (Pilot) → Upload your HTML extension as a zip (make sure index.html is always present on the root)

Navigate to salesforce setup → Mobile Extension Toolkit (Pilot)

Upload Mobile Extensions by clicking on “New” button

Provide your extension details

One thing you need to keep in mind is before you upload this in salesforce, Have the index file load on your local browser to make sure its error free. FSL functions wont work as the browser doesn’t recognize it. Its only available once the extension is completely loaded on the FSL App.

Step 4 → Once your mobile extension is successfully uploaded to your org we now need to reference it in our global or quick actions in order to trigger the extension. For this example I have created a simple quick action button on Work Order object which will appear on the detail page.

Quick Action Referring the Mobile Extension we uploaded in Step 3

Make sure to add this quick action in Salesforce Mobile and Lightning Experience Actions section of the page layout

Step 5 → Now comes the most important bit. To test our extension in the FSL app. As mentioned above I am using 3 basic functions: Show a record info, Getting picklist value and run a basic SOQL query.

Result when Fetch Picklist button is clicked

Result when Execute SOQL is clicked

Result when Get Record is clicked

FSL Functions used in the above example –

Get Record → fsl.query.getRecord

SOQL → fsl.query.executeSoqlQuery

Fetch Picklist values → fsl.metadata.getPicklistValues

Other capabilities include calling Rest API, Context API, Create Record, Update Record, Delete Record, Barcode Scanner, ObjectInfo, Geolocation API, Calling Apex Rest Services etc.

Limitations

No native debugging and testing mechanism present. Debugging can only be performed from Mobile extension WebView. Desktop testing is not supported.

No support for calling native apex methods. Apex methods can only be called if they are exposed as rest service in apex rest resource.

No support for native lightning data service & lightning elements. Only pre defined FSL methods are supported

Reference of 3rd party links are restricted. 3rd party scripts are required to be downloaded and added in the current zip artifacts to get it working.

Guidelines and Best Practices to be considered

Usage of Mobile extension WebView for debugging is recommended

Scripts, CSS and other components should be maintained in dedicated folders of the native HTML5 app

As Mobile extension does not offer any native JS code testing it is recommended that the developers perform an offline JS test code at their end before uploading the zip in salesforce

Testing should be carried out in both Android and IOS devices for both iPad and iPhone as native HTML elements may behave differently in different devices.

Keep us posted on your findings and insights on this feature too !
We are waiting for it to be GA soon 🙂

Yours wisely