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.
Obviously it won’t work as it is only intended for FSL app on Mobile. You can refer the following code. Its a basic HTML code executing some FSL functions.
The files can also be referred 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)
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.
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.
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 behave differently in different devices
Note: If feature is not enabled in your SF Org, Please contact salesforce support.
