Salesforce Field Service – Dispatch Console Custom CSS

Adjust your Dispatch Console with Custom CSS

Related References:

Customize the Field Service Dispatcher Console

Background

The Salesforce Field Service Dispatch Console offers some lesser known customization hooks that I would say aren’t very well publicized. In the next two posts I’ll give a couple of tips on how to utilize the custom CSS and JavaScript options available for the Dispatch Console. Let’s start with a quick look at the CSS option.

To provide an example for looking at the CSS customization option, let’s assume that users are having a difficult time reading the text for Resource Absences, and the lack of distinct borders sometimes creates difficulty in differentiating between Absences. Below is what things look like before we make any adjustments. We’ll use a basic CSS file to solve this problem.

Create CSS File and Add to Static Resources

The first step is to create the CSS file that we want to use. This can be done in a text editor or other tool of choice. In this example, we’ve kept things very simple and added some bold text to the NA_Absence class (the Resource Absence), and a black border to the ServiceEventPadding class (div outside the Resource Absence). Note that you’ll need to inspect the HTML to gather the class names and/or ids of the elements to which you want to apply styling.

.NA_Absence {
    font-weight: bold;
}

.ServiceEventPadding {
    border-style: solid;
    border-color: black;
}

Now we save the CSS file, and give it an appropriate name- ‘dispatchConsoleCss’ for this example.

Now we go to Setup => Static Resources, and create a new Static Resource. Here we’ve given it the same name as that of the file, and uploaded the CSS file to the Static Resource.

Add File to Field Service Settings

For the final step, we navigate to the ‘Field Service Settings’ app and select ‘Gantt Configurations’

Under ‘Dispatcher View Customizations’, and ‘External CSS’, we enter the name of the Static Resource created earlier. Save.

Try It Out

Now we’re ready to open the Dispatch Console and check our handiwork. Open up the Console, and find the original Resource Absence, and see the difference as we now have a border and bold text. It looks pretty horrible if we’re being honest, but does well to show how we can use CSS to adjust the Dispatch Console. Note that if you are already on the Dispatch Console in another tab, you will have to do an ‘Empty Cache and Hard Reload’ for the results to show.