Pulsar FSL UI Customizations

Custom HTML documents enable you to create your own tabs and pages within the Pulsar FSL 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 FSL tab bar, as a card that exists on a particular FSL object type, or that launches from the Lightning Bolt menu.

Custom Documents on the FSL 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 FSL tabs or label : documentId pairs that will link to your custom documents.

Schedule
Inventory
Create Order:0696A000005Yr7i
Display Task:0696A000005Yw1V
Profile

The above values would place the standard FSL 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 FSL 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 FSL 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 FSL objects that match the object type / record type pair that you define in the setting.

pulsar.fsl.layout.workorder.order

ServiceAppointment
Contact
Asset
Asset Work Items:0696A000005ijL3
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.

Custom Documents on the Lightning Bolt Menu

See: Pulsar FSL Lightning Bolt Menu Customizations

Accessing the Bridge

The 3-2. Pulsar Platform - JS Bridge API is fully accessible from any custom document running in the Pulsar FSL 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); 
});

Pulsar FSL Functions

In order to allow for rich user experience, Pulsar exposes a number of FSL 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();

// 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 FSL UI
pulsar.showSpinner();
// do some time consuming work
pulsar.hideSpinner();


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

Page and Component Resizing

Documents are displayed within iFrames in the Pulsar FSL 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 FSL 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

Hiding The Map on Service Appointment Overview Screen

Some customers have asked us if they can hide the map on the appointment overview screen because it takes a significant amount of screen real estate on phones. You can do this by specifying a Pulsar Setting in your org.

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.

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.

Hiding Empty Sections in Generated Service Reports

Service report generation can be customized to hide sections which lack data. Service report sections can be customized through templates on Salesforce.com. There are three types of sections – normal, related list, and signature. Pulsar allows you to hide normal or related list sections that contain only empty values or have no rows.