---
title: "Dispatch Panel styling for regular and Follow Up Appointments"
canonical: "https://help.fieldbuddy.com/space/FBDOCS/4904550407/Dispatch%20Panel%20styling%20for%20regular%20and%20Follow%20Up%20Appointments"
format: markdown
---
> Macro (excerpt)
>
> > ⚠️ This is an advanced guide. Executing this guide is at your own risk.
>
> > ℹ️ This is a community add-on to FieldBuddy. Developed by partners or customers of FieldBuddy. There’s no official support on these add-ons.
>
> 
>
> ## Colors & Shades
>
> - The included DPCSS version includes 9 different shades for 9 different hues
> - because HSL colors are used, hues and shades are consistent across styles
> - In the example above not all shade variations are used
> - The shades name is used in front of the color name in the css class name
> - The styling now also gives information about the Work Order’s Status
> - To take full advantage of this, you should update the FIELDBUDDY__Status__c picklist values for the Work Order object like shown below
>
>
> ## Follow Up Work Orders
>
> - Follow up Work Orders are recognized by the Original_Work_Order__c field on the Work Order being populated
> - This styling does rely on using a Original_Work_Order__c field that should be a lookup to the original Work Order
> - A Redo icon and the WO-number of the original Work Order are included aboce the Follow Up’s own WO-number
>
> ## How does it work
>
> - Modified version of DPCSS static resource
> - Customized versions of the following fields on the Resource Unit Assignment object:
> - DP_Row_1__c
> - DP_Style__c
>
> DP_Row_1__c formula
>
> ```
> IF(
> FIELDBUDDY__Work_Order__r.Exceptional_Work_Order_Type_Check__c,
>
> /* Exceptional Work Order */
> "" + TEXT(FIELDBUDDY__Work_Order__r.Exceptional_Work_Order_Type__c) + "
",
>
> /* Regular Work Order */
> IF(
> ISBLANK( FIELDBUDDY__Work_Order__r.Original_Work_Order__c ),
>
> /* Not Follow Up Work Order */
> "",
>
> /* Follow up Work Order */
> " " +
> FIELDBUDDY__Work_Order__r.Original_Work_Order__r.Name + "
"
> ) +
>
> " " +
> "" + FIELDBUDDY__Work_Order__r.Name + "
" +
>
> FIELDBUDDY__Work_Order__r.Account__c +
>
> IF(
> NOT(
> ISBLANK(
> FIELDBUDDY__Work_Order__r.FIELDBUDDY__Location__c
> )
> ),
>
> " - " + FIELDBUDDY__Work_Order__r.FIELDBUDDY__Location__r.FIELDBUDDY__Street__c +
> " " + TEXT(FIELDBUDDY__Work_Order__r.FIELDBUDDY__Location__r.FIELDBUDDY__House_Number__c) + "
" +
> FIELDBUDDY__Work_Order__r.FIELDBUDDY__Location__r.FIELDBUDDY__Postal_Code__c + ", " +
> FIELDBUDDY__Work_Order__r.FIELDBUDDY__Location__r.FIELDBUDDY__City__c,
>
> " - " + FIELDBUDDY__Work_Order__r.FIELDBUDDY__Service_Request__r.FIELDBUDDY__Installed_Product__r.FIELDBUDDY__Location__r.FIELDBUDDY__Street__c +
> " " + TEXT(FIELDBUDDY__Work_Order__r.FIELDBUDDY__Service_Request__r.FIELDBUDDY__Installed_Product__r.FIELDBUDDY__Location__r.FIELDBUDDY__House_Number__c) + "
" +
> FIELDBUDDY__Work_Order__r.FIELDBUDDY__Service_Request__r.FIELDBUDDY__Installed_Product__r.FIELDBUDDY__Location__r.FIELDBUDDY__Postal_Code__c + ", " +
> FIELDBUDDY__Work_Order__r.FIELDBUDDY__Service_Request__r.FIELDBUDDY__Installed_Product__r.FIELDBUDDY__Location__r.FIELDBUDDY__City__c + "
" +
> FIELDBUDDY__Work_Order__r.FIELDBUDDY__Service_Request__r.FIELDBUDDY__Installed_Product__r.FIELDBUDDY__Sub_location__r.FIELDBUDDY__Description__c
> )
> )
> ```
>
> DP_Style__c formula
>
> 
>
> ```
> IF(
> FIELDBUDDY__Work_Order__r.Exceptional_Work_Order_Type_Check__c,
> TEXT(FIELDBUDDY__Work_Order__r.Exceptional_Work_Order_Type__c),
> CASE(
> FIELDBUDDY__Work_Order__r.FIELDBUDDY__Status__c,
> "SCHEDULED", IF(
> ISBLANK( FIELDBUDDY__Work_Order__r.Original_Work_Order__c ),
> "Mid",
> "Pale"
> )
> +"Light",
> "IN_PROGRESS", "BrightMid",
> IF(
> ISBLANK( FIELDBUDDY__Work_Order__r.Original_Work_Order__c ),
> "MidMid",
> "PaleMid"
> )
> )
> +
> CASE(
> FIELDBUDDY__Work_Order__r.FIELDBUDDY__Type__c,
> "INSTALLATION", "red",
> "INSPECTION", "orange",
> "CORRECTIVE_MAINTENANCE", "yellow",
> "INCIDENT", "green",
> "REMOVAL", "teal",
> "OVERHAUL", "blue",
> "MAINTENANCE", "purple",
> "PREVENTIVE_MAINTENANCE", "pink",
> "gray"
> )
> )
> +
> CASE(
> FIELDBUDDY__Work_Order__r.FIELDBUDDY__Status__c,
> "SCHEDULED"," scheduled",
> "CONFIRMED"," confirmed",
> "ON_THE_GO"," onthego",
> "IN_PROGRESS" , " inprogress",
> "CLOSED", " closed",
> ""
> )
> ```
>
> ## What you need to configure
>
> - Make the DP_style__c formula match the Work Order Type names your customer uses
> - Populate the Original_Work_Order__c field in Follow Up Work Orders
>
> ## What you may want to configure
>
> - Choose fitting icons for each Work Order Type from fontawesome
> - You can select from v6.0.0
> - choose only from free icons
> - Modify the Work_Order_Type_Icon__c formula field in the Resource Unit Assignment object
> - Test if the icon really appears as intended
> - Modify which shade variations you use for what
> - Color names are constructed like this: PaleLightRed, BrightMidBlue, MidDarkGreen
> - First is the Saturation
> - Pale: 20%
> - Mid: 40%
> - Bright: 60%
> - Second is the Lightness
> - Dark: 30%
> - Mid: 50%
> - Light: 70%
> - Third is the Hue
> - red: 0
> - orange: 30
> - yellow: 50
> - green: 130
> - teal: 190
> - blue: 220
> - purple: 280
> - pink: 330
> - If requested by the customer you could dive into the css to tweak the Hue, Saturation and Lightness values of the classes.
> - If you want to do so: this excel file will help make these modifications more easily and consistently
>
> ## Exceptional Work Order RUA styling
>
> 
>
> ## Download package
>
> > 📝 [https://test.salesforce.com/packaging/installPackage.apexp?p0=04t03000000DVUG](https://test.salesforce.com/packaging/installPackage.apexp?p0=04t03000000DVUG&isdtp=p1)
> ⚠️ This is an advanced guide. Executing this guide is at your own risk.
## Colors & Shades
- The included DPCSS version includes 9 different shades for 9 different hues
- because HSL colors are used, hues and shades are consistent across styles
- In the example above not all shade variations are used
- The shades name is used in front of the color name in the css class name
- The styling now also gives information about the Work Order’s Status
- To take full advantage of this, you should update the FIELDBUDDY__Status__c picklist values for the Work Order object like shown below
## Follow Up Work Orders
- Follow up Work Orders are recognized by the Original_Work_Order__c field on the Work Order being populated
- This styling does rely on using a Original_Work_Order__c field that should be a lookup to the original Work Order
- A Redo icon and the WO-number of the original Work Order are included aboce the Follow Up’s own WO-number
## How does it work
- Modified version of DPCSS static resource
- Customized versions of the following fields on the Resource Unit Assignment object:
- DP_Row_1__c
- DP_Style__c
DP_Row_1__c formula
```
IF(
FIELDBUDDY__Work_Order__r.Exceptional_Work_Order_Type_Check__c,
/* Exceptional Work Order */
"" + TEXT(FIELDBUDDY__Work_Order__r.Exceptional_Work_Order_Type__c) + "
",
/* Regular Work Order */
IF(
ISBLANK( FIELDBUDDY__Work_Order__r.Original_Work_Order__c ),
/* Not Follow Up Work Order */
"",
/* Follow up Work Order */
" " +
FIELDBUDDY__Work_Order__r.Original_Work_Order__r.Name + "
"
) +
" " +
"" + FIELDBUDDY__Work_Order__r.Name + "
" +
FIELDBUDDY__Work_Order__r.Account__c +
IF(
NOT(
ISBLANK(
FIELDBUDDY__Work_Order__r.FIELDBUDDY__Location__c
)
),
" - " + FIELDBUDDY__Work_Order__r.FIELDBUDDY__Location__r.FIELDBUDDY__Street__c +
" " + TEXT(FIELDBUDDY__Work_Order__r.FIELDBUDDY__Location__r.FIELDBUDDY__House_Number__c) + "
" +
FIELDBUDDY__Work_Order__r.FIELDBUDDY__Location__r.FIELDBUDDY__Postal_Code__c + ", " +
FIELDBUDDY__Work_Order__r.FIELDBUDDY__Location__r.FIELDBUDDY__City__c,
" - " + FIELDBUDDY__Work_Order__r.FIELDBUDDY__Service_Request__r.FIELDBUDDY__Installed_Product__r.FIELDBUDDY__Location__r.FIELDBUDDY__Street__c +
" " + TEXT(FIELDBUDDY__Work_Order__r.FIELDBUDDY__Service_Request__r.FIELDBUDDY__Installed_Product__r.FIELDBUDDY__Location__r.FIELDBUDDY__House_Number__c) + "
" +
FIELDBUDDY__Work_Order__r.FIELDBUDDY__Service_Request__r.FIELDBUDDY__Installed_Product__r.FIELDBUDDY__Location__r.FIELDBUDDY__Postal_Code__c + ", " +
FIELDBUDDY__Work_Order__r.FIELDBUDDY__Service_Request__r.FIELDBUDDY__Installed_Product__r.FIELDBUDDY__Location__r.FIELDBUDDY__City__c + "
" +
FIELDBUDDY__Work_Order__r.FIELDBUDDY__Service_Request__r.FIELDBUDDY__Installed_Product__r.FIELDBUDDY__Sub_location__r.FIELDBUDDY__Description__c
)
)
```
DP_Style__c formula
```
IF(
FIELDBUDDY__Work_Order__r.Exceptional_Work_Order_Type_Check__c,
TEXT(FIELDBUDDY__Work_Order__r.Exceptional_Work_Order_Type__c),
CASE(
FIELDBUDDY__Work_Order__r.FIELDBUDDY__Status__c,
"SCHEDULED", IF(
ISBLANK( FIELDBUDDY__Work_Order__r.Original_Work_Order__c ),
"Mid",
"Pale"
)
+"Light",
"IN_PROGRESS", "BrightMid",
IF(
ISBLANK( FIELDBUDDY__Work_Order__r.Original_Work_Order__c ),
"MidMid",
"PaleMid"
)
)
+
CASE(
FIELDBUDDY__Work_Order__r.FIELDBUDDY__Type__c,
"INSTALLATION", "red",
"INSPECTION", "orange",
"CORRECTIVE_MAINTENANCE", "yellow",
"INCIDENT", "green",
"REMOVAL", "teal",
"OVERHAUL", "blue",
"MAINTENANCE", "purple",
"PREVENTIVE_MAINTENANCE", "pink",
"gray"
)
)
+
CASE(
FIELDBUDDY__Work_Order__r.FIELDBUDDY__Status__c,
"SCHEDULED"," scheduled",
"CONFIRMED"," confirmed"
"ON_THE_GO"," onthego",
"IN_PROGRESS" , " inprogress",
"CLOSED", " closed",
""
)
```
## What you need to configure
- Make the DP_style__c formula match the Work Order Type names your customer uses
- Populate the Original_Work_Order__c field in Follow Up Work Orders
## What you may want to configure
- Choose fitting icons for each Work Order Type from fontawesome
- You can select from v6.0.0
- choose only from free icons
- Modify the Work_Order_Type_Icon__c formula field in the Resource Unit Assignment object
- Test if the icon really appears as intended
- Modify which shade variations you use for what
- Color names are constructed like this: PaleLightRed, BrightMidBlue, MidDarkGreen
- First is the Saturation
- Pale: 20%
- Mid: 40%
- Bright: 60%
- Second is the Lightness
- Dark: 30%
- Mid: 50%
- Light: 70%
- Third is the Hue
- red: 0
- orange: 30
- yellow: 50
- green: 130
- teal: 190
- blue: 220
- purple: 280
- pink: 330
- If requested by the customer you could dive into the css to tweak the Hue, Saturation and Lightness values of the classes.
- If you want to do so: this excel file will help make these modifications more easily and consistently
## Exceptional Work Order RUA styling
## Download package
> 📝 [https://test.salesforce.com/packaging/installPackage.apexp?p0=04t03000000DVUG](https://test.salesforce.com/packaging/installPackage.apexp?p0=04t03000000DVUG&isdtp=p1)