This repo contains examples of how to add or adjust functionality to the Salesforce Field Service Dispatcher Console via custom Javascript or CSS.
IMPORTANT: This code is not intended to be deployed directly to a Salesforce production environment, but to be used as an example. This is not a Salesforce product and is not officially supported by Salesforce.
The DispatcherConsoleCSS static resource allows for more text to be displayed on a planning bar in the gantt. The Gantt Label information is displayed on multiple lines instead of just a single line. See screenshot for how this is displayed.
How to add this to the Dispatcher Console:
- Save this code snippet in a file named: dispatcherConsoleCSS.css
- Create a static resource with the name dispatcherConsoleCSS and upload the dispatcherConsoleCSS.css file
- Navigate to Field Service Settings (tab) -> Dispatcher Console UI -> Gantt Configurations, scroll down and enter "dispatcherConsoleCSS" in the External CSS option
- Save your changes
- Reload the Dispatcher Console
Alternatively, you can clone this repository, and deploy the static resource using VSCode. Or when you are already using an External CSS, you can add the content to the existing one.
Standard keyboard shortcuts: https://help.salesforce.com/s/articleView?id=sf.pfs_gantt_keyboard_shortcuts.htm&type=5 The following keyboard shortcuts are added:
- 8 - 2 weeks view
- f - toggles gantt chart filter options
- p - opens the Gantt Palettes menu and focuses on the palette selection dropdown
- c - opens the Resource filter menu and focuses on the Crews Filtering selection dropdown
- m - toggle Match Gantt Dates
- l - puts focus on the list filters for the service appointments list
- h - toggles the "Show Horizontal Scrollbar" option
- Shift + S - focus on the search service appointments input field
- Shift +R - focus on the filter resources input field
How to add this to the Dispatcher Console:
- Save this code snippet in a file named: dispatcherConsoleJS.js
- Create a static resource with the name dispatcherConsoleJS and upload the dispatcherConsoleJS.js file
- Navigate to Field Service Settings (tab) -> Dispatcher Console UI -> Gantt Configurations, scroll down and enter "dispatcherConsoleJS" in the External JS option
- Save your changes
- Reload the Dispatcher Console
Alternatively, you can clone this repository, and deploy the static resource using VSCode. Or when you are already using an External JS, you can add the content to the existing one.