Pulsar SFS UI Customizations

Custom HTML documents enable you to create your own tabs and pages within the Pulsar SFS environment. These pages have full access to the Pulsar JSAPI bridge, enabling you to modify and display data as you see fit. You can add a custom document to the SFS tab bar, as a card that exists on a particular SFS object type, or that launches from the Lightning Bolt menu.

1 Showing the Quick Status Change Flow Option in Pulsar
2 Setting the List View on the Schedule Screen (Available in Pulsar 13.0+)
3 Custom Documents on the SFS Tab Bar
4 Custom Documents as Cards within an Object Type
5 Custom Documents on the Lightning Bolt Menu
6 Accessing the Bridge
7 Pulsar SFS Functions
8 Page and Component Resizing
9 Changing the Number of Details Shown Throughout Pulsar SFS
10 Customizing the SObject Page Carousel Items
11 Hiding the Assign Contact Button
12 Displaying Resource Absences in the Schedule
13 Overriding the Resource Absence Indicator on the Calendar
14 Hiding the App Browser
15 Overriding the Calendar Display Dates
16 Display Work Week Days Only on the Calendar
17 Set the First Day of the Week on the Calendar
18 Displaying the Gantt Label for Resource Absences in the Schedule
19 Displaying a Lightning Bolt Menu on Appointments in the Schedule View
20 Hiding the Add Resource Absence Button
21 Hiding the Add Product Request Line Item Button(s)
22 Hiding the Inventory’s Add Product Request button
23 Hiding the Inventory’s Add Product Transfer button
24 Optionally Hide “Complete” Work Step
25 Optionally Hide “Mark Not Applicable” Work Step
26 Hiding Get Driving Directions from the Schedule Page
27 Hiding Create Service Report Buttons
- 27.1 Static Pulsar Setting
- 27.2 Dynamic Pulsar Setting
28 Hiding the Service Note
29 Applying logic before allowing the user to create a Service Report
30 Hide “Mark Not Present” option in Service Report signature capture
31 Hiding Empty Sections in Generated Service Reports
32 Display the Generated Service Report
33 Hiding Submit Button on TimeSheet Screen
34 Displaying Future Time Sheets on the TimeSheet Screen
35 Optionally Displaying a Native Detail Screen for Service Appointments
36 Enabling Back Navigation in Flows
37 Enabling Syncing Screen Flows
38 Customizing Additional Display Fields in the Pricebook Products List
39 Determining if the User Can or Cannot View an Object using beforeView (available in Pulsar 14.0+)
40 Schedule Screen Map
- 40.1 Using Your Own Google Maps API Key
  - 40.1.1 Setup Steps to get your own Google Maps API key for Windows or Android Devices
- 40.2 Using Your Own Azure Maps API Key
  - 40.2.1 Set Up Steps to Get Your Own Azure Maps API Key
- 40.3 Using Your Own Apple MapKit JS API Key
- 40.4 Hiding The Map on Schedule Screen
41 Service Appointment Overview Screen Map
- 41.1 Use a different maps provider than out of the box options.
- 41.2 Hiding The Map on Service Appointment Overview Screen
- 41.3 Hiding Get Driving Directions Button on Service Appointment Overview Screen
42 Enabling the Asset Hierarchy Link

Showing the Quick Status Change Flow Option in Pulsar

The Quick Status Change Flow Option allows the user to change the Service Appointment status directly from the Schedule Screen, without opening the Service Appointment.

Log into your Salesforce org as an admin.
Navigate to Setup > Field Service Mobile Settings.
Under Quick Status Change, click the pencil icon to edit the Flow Name. Enter the name of your Quick Status Change Flow.
The next time the user syncs Pulsar, this option should appear on the schedule screen or in the Lightning Bolt Menu for the Service Appointment.

Setting the List View on the Schedule Screen (Available in Pulsar 13.0+)

The Schedule Screen will use the search layout by default. Starting in Pulsar version 13.0, you can use a different list view on the Schedule Screen.

Log in to your Salesforce org as an admin.
Navigate to Field Service Mobile Settings.
Select Show Details under the drop-down menu for the desired Field Service Mobile Setting.
Scroll down to the Service Appointment Priming section.
Click the pencil icon to edit the Default List View Developer Name field.

Pulsar will output debug-level log entries to help you confirm the list view developer name was correctly added to Field Service Mobile Settings. Below are the possible log entries you may see:

When no default list view is defined:

FSL Schedule: using search layout

When using a valid default list view:

FSL Schedule: using list view with developer name 'Example_Default_SA_List_View'

When using an invalid default list view:

FSL Schedule: list view developer name 'Example_TYPO_SA_List_View' not found. Using search layout.

When using a valid default list view that has no fields available:

FSL Schedule: list view with developer name 'Example_Empty_SA_List_View' found but no fields to display. Using search layout.

Custom Documents on the SFS Tab Bar

Adding a custom document to the tab bar is done through the pulsar.fsl.layout.tabs Pulsar setting. The values for this setting are separated by new lines and consist of a series of entries of either reserved words for standard SFS tabs or label : documentId pairs that will link to your custom documents. Optionally, you may add URI parameters as a third item for any custom document (e.g. label : documentId : key=value&param=text). Custom Document query parameters are available as of Pulsar 15.0.

You must add all tabs that you wish to see on the tab bar to this setting. Failure to add a tab will exclude it from the app. This includes the standard SFS tabs.

The keywords for the standard SFS tabs are: Schedule, Inventory, Notifications, and Profile.

Schedule
Inventory
Create Order:0696A000005Yr7i
Display Task:0696A000005Yw1V:param1=value1&param2=other+value+with%20space
Time Sheet
Profile

The above values would place the standard SFS schedule tab at the far left, the inventory tab to the right of that and a custom tab with the label text “Create Order” in the third location that would link to a custom document pointed at by the Id 0696A000005Yr7i. The fourth tab in Pulsar’s SFS application is always labeled More. Any items after the third will be placed in a modal pop-up that is launched when the More tab is tapped.

Custom Documents as Cards within an Object Type

Adding custom HTML as a card as part of the display of an SFS object is done through the pulsar.fsl.{objectType}.{optionalRecordTypeDeveloperName}.order Pulsar setting. When you create this Pulsar setting you are defining all of the cards that will display when viewing SFS objects that match the object type / record type pair that you define in the setting. Optionally, you may add URI parameters as a third item for any custom document (e.g. label : documentId : key=value&param=text). Custom Document query parameters are available as of Pulsar 15.0.

Failure to include a card in the value of the setting will result in it not being displayed.

pulsar.fsl.layout.workorder.order

ServiceAppointment
Contact
Asset
Asset Work Items:0696A000005ijL3:param1=value1&param2=other+value+with%20space
Asset History:0696A000005ivUl
WorkOrderLineItem
KnowledgeArticle
ServiceReport

The above value for the setting would display the cards listed from top to bottom on all WorkOrder objects. This would place two custom cards containing the HTML you defined in the files pointed to by the documents listed to the right of the colons. The text to the left of the colons will appear as the title of the card.

Standard SFS cards are: ServiceAppointment, Contact, Asset, WorkOrderLineItem, KnowledgeArticle, ServiceReport, ProductRequestLineItem, ProductTransfer, Parent, and TimeSheetEntry. Many of these may not make sense depending on the context (SFS Object) from which these cards are displayed. If the object context does not contain a relation to the standard card object, it may display no data.

You can add a generic related list card by referencing any valid related list object by the proper developer name. The object must be related to the pages WorkOrder or WorkOrderLineItem and must be synchronized within Pulsar.

Custom Documents on the Lightning Bolt Menu

See: Pulsar SFS Lightning Bolt Menu Customizations

Accessing the Bridge

The Pulsar Platform - JS Bridge API is fully accessible from any custom document running in the Pulsar SFS environment.

var bridge = window.parent.pulsar.bridge;

var request = { 
    "type"   : "read",
    "object" : "Account",
    "data"   : { "Name" : "John Doe Industries" }
};
bridge.sendRequest(request, function (responseData) { 
  alert('Request Result: ' + responseData); 
});

This means of accessing the bridge is different from custom documents running outside of SFS in Pulsar. Outside of the SFS context, the bridge has not yet been initialized and registration code must be executed. Consider limiting your use cases to one style, though it is possible to create a hybridized bridge set up function.

Pulsar SFS Functions

In order to allow for rich user experience, Pulsar exposes a number of SFS specific methods in addition to the bridge.

var pulsar = window.parent.pulsar;

// Go back to the previous Pulsar page
// * only relevant to pages launched from a Pulsar SObject page
// * Tab bar pages will be the "root" of that tab, so back will be ignored
pulsar.goBack();

// Go home to the schedule page
// * useful if you navigate from one custom document to another
// * safe way to exist a stack of custom navigated pages
pulsar.goHome();

// Go back to the last non-custom-document on this tab's navigation history.
// * a user can create a series of custom documents which work together and
// and then call this method to dismiss them all and return to the initial
// page in the navigation history that launched the first custom document.
pulsar.goBackToTab();

// Open another custom document
// * Important - you must specify a document Id or title. If both are null,
// this method will fail, if you want to open by title, pass null for the Id
pulsar.displayContentDocument(aDocumentId, aDocumentTitle, { "someParameter": "a value" }, function () {
  alert("Document has been displayed.");
});

// Show/Hide a Spinner that disables the Pulsar SFS UI
pulsar.showSpinner();
// do some time consuming work
pulsar.hideSpinner();

// Set Page Title
// Custom pages will have an empty title unless set explicitly.
pulsar.setTitle("My Title");

// Show/Hide the Pulsar SFS navigation bar
pulsar.hideNavBar();
// Your page is responsible for re-displaying the navigation bar
pulsar.showNavBar();

// Create a named handler that will execute whenever a sync finishes
// IMPORTANT: Please clean up your handler as shown below.
pulsar.addSyncFinishedHandler('myHandler', function(syncFinishedInfo) {
  console.log('Sync finished with info!', syncFinishedInfo);
  pulsar.removeSyncFinishedHandler('myHandler');
});

// Create a named handler that will execute whenever a sync update event occurs
// IMPORTANT: Please clean up your handler as shown below.
pulsar.addSyncUpdateHandler('myHandler', function(updateInfo) {
  console.log('Sync updated with info!', updateInfo);
  pulsar.removeSyncUpdateHandler('myHandler');
});

Page and Component Resizing

Documents are displayed within iFrames in the Pulsar SFS document. The size of this iFrame is based upon the size of the content. However, there are cases in which a document may have a dynamic size or one that is created after the iFrame has sized itself. In these cases, we make use of the javascript postMessage function.

// Once you have determined the height you'd like the iFrame to conform to...
// inform Pulsar SFS of that height formatted as you would CSS.
var myHeight = "800px";

window.parent.postMessage({
  "type": "refresh",
  "height": myHeight
}, "*");

// Note: sending "*" as the origin is acceptable since this will never carry sensitive data
// Note 2: sending "*" as the height tells FSL to size the iFrame to fill the available space in the view port

Changing the Number of Details Shown Throughout Pulsar SFS

One common way that information about various SObjects is displayed in Pulsar SFS is through what we call Display Fields. These fields are defined by the compact, search and related list layouts on those objects. We define the header as the first field in the set of fields on any of those layouts. We define the details as the remaining fields, excluding the header. Generally, whenever we show a list of details we separate them with a “•” (bullet character). By default, Pulsar SFS shows up to 4 detail fields in addition to the header. If an SObject does not have a value for a given display field, it will not show the field. It is important to make sure that your header fields are required fields or your users may have a confusing UI experience.

We have created a Pulsar Setting pulsar.fsl.layout.detailFieldCount to allow the user to control how many detail fields are displayed throughout the app in situations like the one shown below. Pulsar will try to show up to 4 fields by default unless overridden by this setting. The number of fields displayed is also determined by the associated layout. The details below are driven by the related list layout between the WOLIs and their parent WorkOrder. If the related list has only 3 total fields defined, then one will be used as the header and only two detail fields could possibly be shown. Remember, if the field is undefined on the object, it will not be shown (see the bottom most set of details, which appears to not have an AssetId property defined).

To determine where a set of details or a header is coming from, refer to Pulsar SFS Screens and the data that feeds them for more information.


Name	Number of Detail Fields
Key	pulsar.fsl.layout.detailFieldCount
Value	Number
Default Value (if any)	4
Description	Sets the maximum number of detail fields to be displayed.
Notes/Comments

Customizing the SObject Page Carousel Items

In Pulsar SFS, SObject pages have a series of tabs displayed in a carousel identified to the right. Three of these elements (Overview, Details and Related) are always present but there are four optional carousel items that may or may not be displayed when available to a given SObject. The Work Plans, Location, Products and Feed tabs are displayed by default but a user can select any or none of these to display with the following Pulsar Setting pulsar.fsl.layout.carouselItems.

The values that are valid for this setting are: work-plans, location, products and feed. These are case-sensitive so be careful when adding them. You may separate them with new lines or commas. Removing the setting will show all four items if present on the object.

Certain items, like Work Plans, may not appear if there are no associated Work Plans with the object (for instance, a Work Order).

Starting with Pulsar 13.0, you may define object-level carousel items using the Pulsar Setting pulsar.fsl.layout.{objectType}.carouselItems for more granular control. For example, you can define pulsar.fsl.layout.workorderlineitem.carouselItems with different items compared to pulsar.fsl.layout.carouselItems.

Starting with Pulsar 14.0, you may define object-level carousel items to be excluded using the Pulsar Setting pulsar.fsl.layout.{objectType}.carouselItems.excludedItems.


Name	Customized Carousel Items
Key	pulsar.fsl.layout{.objectType}.carouselItems
Value	A list of valid values separated by commas or new lines. Valid strings are: work-plans location products feed
Default Value (if any)	work-plans location products feed
Description	Use this setting to customize the set of carousel items on an SObject page in SFS.
Notes/Comments	Providing specific object type for this setting is available in 13.0+


Name	Excluded Carousel Items
Key	pulsar.fsl.layout{.objectType}.carouselItems.excludedItems
Value	A list of valid values separated by commas or new lines. Valid strings are: work-plans location products feed
Default Value (if any)
Description	Use this setting to customize the visibility of carousel items on an SObject page in SFS. Any valid values set will not be visible in the SObject page carousel items.
Notes/Comments	Available 14.0+

Hiding the Assign Contact Button

The SObject overview page contact component will by default display a button to assign a Contact to the Service Appointment. Use this setting to hide the button if desired by setting the value to false.


Name	SFS: Show Assign Contact Button
Key	pulsar.fsl.layout.showAssignContactButton
Value	TRUE/FALSE
Default Value (if any)	TRUE
Description	Use this option to display/hide the assign contact button.
Notes/Comments

Displaying Resource Absences in the Schedule

It may be useful to your users to see resource absences displayed in the Field Service Lightning schedule screen in Pulsar. You can achieve this through this setting. Resource absences will not display in the scrolling calendar navigation view as “dots” (implying the presence of a Service Appointment) but they will be shown in the list of events for a selected day and on the full calendar display.


Name	Display Resource Absences
Key	pulsar.fsl.layout.schedule.showResourceAbsences
Value	TRUE/FALSE
Default Value (if any)	FALSE
Description	Use this option to display resource absences on the schedule view.
Notes/Comments	None.

Overriding the Resource Absence Indicator on the Calendar

Some users may wish to prevent a specific Resource Absence type from displaying in the calendar as a Red Dot on the day of the Resource Absence.


Name	Ignore Resource Absence Indicator
Key	pulsar.fsl.schedule.ignoreAbsenceRecordTypes
Value	A list of valid ResourceAbsence Record Type Names separated by commas or new lines. For example: Break Lunch Coffee
Default Value (if any)	All Resource Absences will display the red dot in the calendar regardless of their Record Type.
Description	Controls which Resource Absence Record Types should NOT be displayed as Red Dots in the Calendar.
Notes/Comments	None.

Hiding the App Browser


Name	Display App Browser
Key	pulsar.home.toolbar.enableappbrowser
Value	TRUE/FALSE
Default Value (if any)	TRUE
Description	Use this option to display or hide the 9 squares icon on the bottom toolbar
Notes/Comments	None.

Overriding the Calendar Display Dates

Some users may wish to display more dates on the calendar navigation control – as well as more appointments and absences – than Salesforce field service mobile settings allows (45 days before and after).


Name	SFS Schedule - Number of Days Before or SFS Schedule - Number of Days after
Key	pulsar.fsl.schedule.numDaysBefore or pulsar.fsl.schedule.numDaysAfter
Value	a number of days
Default Value (if any)	Will use the value in SFS mobile settings
Description	Controls the number of days to display in the calendar navigation component before and after the current date.
Notes/Comments	None.

Display Work Week Days Only on the Calendar

Some users may wish to only display the days of the work week(Monday through Friday) on the calendar. The default(FALSE) is to display the weekends.


Name	Display Work Week Days Only
Key	pulsar.fsl.calendar.enableworkweekonly
Value	TRUE/FALSE
Default Value (if any)	FALSE
Description	Controls if the calendar only displays the days of the work week (Monday through Friday).
Notes/Comments	None.

Set the First Day of the Week on the Calendar

Some users may wish to set the first day week(Sunday or Monday) Organization-wide on the Pulsar FSL Calendar.


Name	Set the First Day of the Week
Key	pulsar.fsl.calendar.firstdayofweek
Value	0 or 1 (Sunday == 0, Monday == 1)
Default Value (if any)	0 (Sunday)
Description	Sets the first day of the week organization-wide.
Notes/Comments	If set, any user locale will be overridden by this setting so all users have the same first day of the week.

Displaying the Gantt Label for Resource Absences in the Schedule

If resource absences are shown in the Field Service Lightning schedule screen with the previous setting, they will display in the format of “RA: <unique RA #>”. Alternatively, you can choose to display the Gantt label in place of the RA number. You can achieve this through this setting.


Name	Show Gantt Label for Resource Absences
Key	pulsar.fsl.layout.schedule.showGanttLabelForResourceAbsences
Value	TRUE/FALSE
Default Value (if any)	FALSE
Description	Use this option to display the Gantt label on resource absences in the schedule view.
Notes/Comments	None.

Displaying a Lightning Bolt Menu on Appointments in the Schedule View

It may be useful to your users to have quick access to the Lightning Bolt Menu for a given Service Appointment directly from the schedule and not have to click into the object itself. This can be achieved via a pulsar setting.


Name	Display Lightning Menu on Schedule Items
Key	pulsar.fsl.layout.schedule.showLightningButton
Value	TRUE/FALSE
Default Value (if any)	FALSE
Description	Use this option to display a lightning menu button on each service appointment in the list of appointments on the schedule page.
Notes/Comments	None.

Hiding the Add Resource Absence Button

The + button on the Profile page in SFS can be hidden through the following setting:


Name	Hide Add Resource Absence
Key	pulsar.fsl.layout.profile.hideAddResourceAbsence
Value	TRUE/FALSE
Default Value (if any)	FALSE
Description	Hides the add resource button on the profile page of SFS.
Notes/Comments	None.

Hiding the Add Product Request Line Item Button(s)

The + button (and larger Add Product Request Line Item button) on the Product Request page in SFS can be hidden through the following setting:


Name	Hide Add Product Request Line Item Button
Key	pulsar.fsl.layout.productRequest.hideAddProductRequestLineItem
Value	TRUE/FALSE
Default Value (if any)	FALSE