Add Photos on a Newly-Created Record Using Field Service Mobile Flow and SFS (FSL) Mobile (Developer

Information:

Salesforce Field Service (SFS) was formerly known as Field Service Lightning (FSL).

In this article, we will demonstrate how make use the SharinPix app to add photos on a newly-created object record using the Field Service Mobile Flow on the SFS mobile app.

The scenario will be as follows:

• A field technician launches the Salesforce Field Service mobile app.

• He encounters an issue relating to a Work Order record and wants to document on same by adding a subject and a description on a new Case record. The technician also wants to add photos to the same Case record.

• To do so, the technician taps on a button labelled as** Open a Case** to create a new Case record with the necessary information and photos.

The button, Open a Case , mentioned in the introduction launches a Field Service Mobile Flow allowing the technician to enter information about the new Case record. The Flow also consists of a deeplink to the SharinPix mobile app to capture the photos that will be subsequently added to the same record.

In the following sections, you will learn how to implement the above using:

1. A Field Service Mobile Flow to enter the Case details as well as to launch the SharinPix mobile app to take pictures

2. A Webhook alongside an Apex class to move the photos captured to the Case record when the latter is created

Preconfiguration

Before setting up the Flow and Webhook, we first need to add a custom field on the Case object. This field will be used later on to store a Case record identifier. We will explain the need for this identifier in a subsequent step. For now, go ahead and create the custom field on the Case object using the following details:

Label: SharinPix Temporary ID

Data Type: Text Area

Setup the Field Service Mobile Flow

To create the flow, follow the steps below:

• Go to Setup then type Flow in the Quick Find box. Under Process Automation, select Flows

• Click on New Flow. You will be directed to the Flow Designer

• Click on Show More and select Field Service Mobile Flow. Then click on Create

Retrieve SharinPix token from the work order record

Whenever the SharinPix mobile app is used to upload photos on any record, a token is needed. This token provides SharinPix with information such as the album on which the photos should be uploaded. More information on how to generate these tokens via automation here or via Apex code here.

In our case, however, we do not have any token being generated for the Case record. Therefore, how are we going to launch the SharinPix app to capture images? The answer is:

1. Firstly, by making use the token already present on the Work Order record instead to upload the photos on the Work Order record itself

2. Secondly, by using a Webhook that will call an Apex class to move the images captured from the Work Order record to the Case record

Note:

There are several ways of generating a SharinPix token on an object records. Some of the common methods are using Trigger or Process Builders to create and store the token inside a Salesforce field when a record is being created.

However, using such methods is not recommended in our scenario as users might trigger the Flow on the SFS app while being offline.

In the following section, we will configure the Flow so as to retrieve SharinPix token from the Work Order record. To do so, follow the steps below:

• Go on the Manager tab and click on New Resource.

  • Resource Type: Variable

  • API Name: Id

  • Data Type: Text

  • Default Value: {!$GlobalConstant.EmptyString}

  • Availability Outside the Flow: Available for input

• Go on the Manager tab again and click on New Resource.

  • Resource Type: Variable

  • API Name: WorkOrderRecord

  • Data Type: Record

  • Object: Work Order

  • Click Done** **

• Next, go on the **Elements tab then drag and drop the Get Records **element found under the Data section onto the blank canvas. For the Get Records:

  • Label: g****etWorkOrder

  • Object: Work Order

  • Conditions: Id (Field) equals (operator) **{!Id} **(newly-created resource named Id)

  • In the How Many Records to Store , check the Only the first record option

  • In the Where to Store Field Values , check the** Together in a record variable** option

  • Then in the **Select Variable to Store Work Order **section, use the WorkOrderRecord variable for the **Record **field

  • In the Select Work Order Fields to Store in Variable section, click on Add Field and select the token field, that is, SharinPix_Token__c for this demo

  • Click **Done **when finished

  • Then, connect the Get Records (Get Work Order) element to the Start element

Create the case record

Next step is to setup a **Screen **element to enter the Case record's details. To do so:

• Go on the **Elements tab then drag and drop the Screen ** element onto the blank canvas. Label the Screen element as Create Case

• Next, drag and drop two **Text **components on the screen canvas

• Label the first Text component as **Subject **and the second one as Description

• Click Done to save

• Then, connect the Screen (Create Case) element to the Get Records (Get Work Order) element previously added

Now, let's add a Create Records element to the canvas to create the Case record.

First, we will create a variable to store the record using the steps below:

• Click on New Resource

  • Resource Type: Variable

  • API Name: caseRecord

  • Data Type: Record

  • Object: Case

  • Click Done

Now, let us add the Create Records element to the canvas:** **

• Go on the **Elements tab then drag and drop the Create Records **element onto the blank canvas. For the Create Records:

  • Label: New Case Record

  • In the How to Set the Record Fields section, select Use separate resources, and literal values

  • Object: Case

  • In the** Set Field Values for the Case **section, choose Subject as the field and Subject as the matching value then click on add button. Next choose Description as the second field the variable Description as value

  • In the Store Case ID** in Variable **section, choose **{!caseRecord.Id} **as value

  • Click Done to save

• Next, connect the** Create Record **(New Case Record) element to the Screen (Create Case) element added previously

Generate a temporary ID to identify the newly created Case record

In this section we will demonstrate how to generate a unique Id to identify the Case record.

From the **Manager **tab, create a new resource to store the local cached Case record Id as indicated below:

• Resource Type: Variable

• API Name: caseID

• Data Type: Text

• Then, from the **Elements tab, drag and drop the Assignment **element onto the blank canvas. For the Assignment element:

  • Label:** Assign Case ID**

  • In the **Set Variable Values **section: Choose CaseID as the Variable, Equals as the operator and caseRecord.Id as the value

  • Click **Done **to save

• Then, connect the** Assignment**(Assign Case ID) element to the Create Records(New Case Record) element added previously

Note:

Whether online or offline at this point, the value of caseRecord.Id (as well as in caseID) is not a standard Salesforce Id, it is a local cached record Id which looks like something like this:

local_record_begin_Case-Local_delim-I11F1I80-OE3E-46I1-9A1B-1II001E40I6F_end_record_local

Therefore, to create a temporary ID to identify the newly created Case record, we will retrieve this part, -I11F1I80-OE3E-46I1-9A1B-1II001E40I6F from the local cached record Id as demonstrated in the following step.

Next, we will create a Formula variable, that will use the value stored in the **caseID **variable to generate a temporary ID. To do so, create a new Resource by following the steps below:

• Resource Type: Formula

• API Name tempID

• Data Type: Text

• Formula: RIGHT( TRIM( LEFT( {!caseID}, 72 ) ), 36 )

Update the Case record with temporary ID

Now, we need to update the field created at the beginning of this article (that is, SharinPix Temporary ID) with the identifier generated (and stored in the variable tempID) in the previous section.

To do so, drag and drop the Update Records element onto the canvas and fill the fields as indicated below:

• Label: Update Case

• For the section** How to Find Records to Update and Set Their Values**,choose Specify conditions to identify records, and set fields individually

• Object: Case

• In the **Filter Case Records **section, choose **Id **as the field, **Equals **as the operator and **{!caseRecord.Id} **as the value

• In the **Set Field Values for Case Records **section, choose **SharinPix_Temporary_ID__c **as the field and **{!tempID} **as the value

• Click on **Done **to save.

• Then, connect the Update Records (Update Case) element to the** Assignment**(Assign Case ID) element added previously

Add deeplink to SharinPix app

The next step is to add a Screen element to enable launching of the SharinPix app to capture photos. To do so, follow the steps below.

Firstly, let's create a new resource that will store the deeplink to the SharinPix app with the following details:

• Resource Type: Variable

• API Name: deeplink

• Data Type: Text

• Default Value:

< a href="sharinpix://upload?token** ={!WorkOrderRecord.SharinPix_Token__c}&caseTempId={!tempID}">Click to launch the SharinPix App**

In the deeplink above, we are also passing the temporary ID as caseTempId={!tempID}.

For more details about the deeplink syntax, please refer to the following article:

SharinPix mobile App : Deeplink syntax

Next, add a Screen element to launch the SharinPix app using the deeplink. Follow the steps below:

• Drag and drop a **Screen **element on the canvas with **Launch SharinPix App **as label

• Next, drag and drop a **Display Text **component on the screen and add the following details:

  • API Name: sharinpixAppLauncher

  • In the **Insert a resource... **section, select deeplink

• Click Done to save

• To complete, connect the Screen (Launch SharinPix App) element to the Update Records (Update Case) element previously added

The Flow should look like this at this point.

Save the Flow as **Create Case **and activate it. Then add the Flow as an **Action **labelled as **Open a Case **on the **FSL Work Order Layout **to make it visible on the FSL mobile app.

Tip:

If you have difficulties adding the Flow on the SFS mobile app, click here for more details about how to implement this.

Setup the SharinPix Webhook

A SharinPix Webhook can be created and configured** ** so as to detect whenever an image is uploaded to SharinPix. Webhook can also be used to make calls to Apex method to perform actions.

Tip:

For more information about Webhook, please refer to the following article:

SharinPix Webhooks

In this section, we will:

• Create a static method in an Apex class that will use transmitted data as well Webhook information to move the images uploaded from the Work Order record o the newly-created Case record

• Configure the SharinPix Webhook so that it detects the upload event and makes a call to the static method

Create method to move images captured

Use the Apex code below to implement the method that will move the images captured to the newly-created Case record:

    global with sharing class SharinPixMoveImages {
    	global static void uploadDone(String payload, String webhookInformation) {
            Map<String, Object> payloadMap = (Map<String, Object>)JSON.deserializeUntyped(payload);        
            if(!(payloadMap.containsKey('app_url'))){return;}
            if(!((String)payloadMap.get('app_url')).contains('&caseTempId=')) {return;}
            List<String> lstImageIDs = new List<String>();
    
            //Retrieve Image Public IDs of images captured and add to list
            for(Object id : (List<Object>)payloadMap.get('image_ids')) {
                lstImageIDs.add(String.valueOf(id));
            }
    
            //Retrieve the temporary ID from the Payload
            String appUrl = (String)payloadMap.get('app_url');
            List<String> urlParams = appUrl.split('&caseTempId=');
            String tempID = urlParams[1];
            //Query the ID of the newly-created case
            Case cs = [SELECT Id FROM Case WHERE SharinPix_Temporary_ID__c =: tempID LIMIT 1];
    
    	if(Test.isRunningTest()) { return; }
    
            /*Use the SharinPix method moveImages to move images from Work Order record
              to the Case record*/
            sharinpix.Image.moveImages(lstImageIDs,cs.Id);
        }
    }

Tip:

• In the code snippet above, we made use of the SharinPix moveImages method to perform the move operation

• You can use the code snippet below to implement your test class:

    @isTest
    public class SharinPixMoveImagesTest {
    	@isTest
        private static void uploadDoneTest() {
            Case cs = new Case(SharinPix_Temporary_ID__c = 'Test Temp ID'); // Replace the field SharinPix_Temporary_ID__c with your desired field API name
            insert cs;
    
            String payload = '{"app_url":"https://app.sharinpix.com/upload?token=TestToken\u0026caseTempId=' + cs.sharinPixTemporaryID__c + '","count":1,"platform":"mobile","album_id":"testAlbumId","image_ids":["adca4739-1466-4c2a-b04c-c7bcaee4eb91"]}';
    		String webhookInformation = '{"id":37384143,"event_type":"upload_done","type":"Webhooks::V2"}';
    
            Test.startTest();
            SharinPixMoveImages.uploadDone(payload, webhookInformation);
            Test.stopTest();
        }
    }

Now that our method is ready, we can configure our SharinPix Webhook.

Configure the SharinPix Webhook

To configure the Webhook, go to the SharinPix Admin Dashboard and follow the instructions below:

• From the top menu bar, select Webhooks

• Then click on the button **New Webhook **located at the top right corner

• Next, enter the Webhook details as indicated below:

  • For the Action type , choose apex_method

  • For the Class name , enter the name of the Apex class created above, that is SharinPixMoveImages

  • For the Method name , enter the name of the method using the transmitted data and Webhook information to move the images, that is, uploadDone

  • Leave the field **Type **as Webhook::V2

  • To complete, check the event Upload done. This event is triggered once all images have been uploaded to SharinPix

• Click on **Create V2 **when done

We are now all set!

To test this new implementation, go ahead and use the Flow to create a new Case record and capture images.

Demo

To test our new implementation:

• Open the SFS mobile app

• Go on a Work Order record

• From the **Show Actions menu, select the option Open a Case ** to launch the Field Service Mobile Flow

• Once inside the flow, enter the new Case details and click Next :

• Next, click on the link **Click to launch the SharinPix App **to launch the SharinPix mobile app so as to capture photos:

• Once back in the Flow, then click on Next again followed by Finish

Now that the Flow is completed, the images captured will be moved to the newly-created Case record when the latter becomes available.

Tip:

SharinPix Images can also be added to SFS Service Reports. How more information about how this is done, please refer to the following article:

Display Images in Service Report (Salesforce Field Service / FSL)