--- title: "Adjust Styling for Appointment blocks" canonical: "https://help.fieldbuddy.com/space/FBDOCS/4768595969/Adjust%20Styling%20for%20Appointment%20blocks" format: markdown --- > Macro (toc) > ⚠️ This documentation is for Dispatch Panel v1. To see how to customize appointment blocks in Dispatch Panel v2, see [https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/5242650667](https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/5242650667). > ℹ️ There is also a document created by @Stefan Schellings (Unlicensed) : [https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/4904550407](https://upperdeck.atlassian.net/wiki/spaces/FBDOCS/pages/4904550407) > Macro (excerpt) > > You might have noticed that some blocks are different then the other in DispatchPanel. For example: > > > ![image](media://a8fb84f8-455c-44d1-8780-12ba381f65cb) > > It is possible to configure/adjust those stylings up to certain level. Below is a short information how to do it > > ### Detailed Explanation > > #### How it works > > Every single “feature” of a Dispatch Panel has a Salesforce object behind itself. Check the following example: > > ![image](media://96426ee9-220e-42d8-ac0e-7613cc3a5d5e) > > Every single Appointment is a Resource Unit Assignment (api name FIELDBUDDY__Resource_Unit_Assignment__c) and inside that following information is stored: > > - Link to Resource Unit (FIELDBUDDY__Resource_Unit__c) > - Link to Work Order (FIELDBUDDY__Work_ORder__c) > - Start and End time (FIELDBUDDY__Start_Time__c and FIELDBUDDY__End_Time__c) > - DP Row 1 and DP Row 2 fields (T_DP_Row_1__c and T_DP_Row_2__c) > - DP Style (T_DP_Style__c) > > Last 3 fields are formulas, and are possible to be manually adjusted. Example of formula for DP Style: > > ![image](media://6a518084-dd88-4d4a-af09-76c37fba8f21) > > > ``` > 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__Type__c, > "INSTALLATION", "orange", > "INSPECTION", "blue", > "CORRECTIVE_MAINTENANCE", "purple", > "INCIDENT", "green", > "REMOVAL", "yellow", > "OVERHAUL", "gray", > "MAINTENANCE", "yellow", > "PREVENTIVE_MAINTENANCE", "green", > "" > ) > ) > + IF ( ISPICKVAL( FIELDBUDDY__Work_Order__r.FIELDBUDDY__Status__c, "CLOSED"), " closed", "") > + IF ( ISPICKVAL( FIELDBUDDY__Work_Order__r.FIELDBUDDY__Status__c, "IN_PROGRESS") , " inprogress", "") > ``` > > By default, it is not on layout of Resource Unit assignment by default, but they can be added if necessary. > > Given formula (DP Style) is injected as CSS class of a block element of the Resource Assignment. > > What is CSS – it is style sheet language that allows to change user interface of the elements on web application. Nice explanation and even playground is here - [https://www.w3schools.com/css/css_intro.asp](https://www.w3schools.com/css/css_intro.asp) > > In simple words, CSS describe rule which can be applied to certain element on the web page, and change its properties, like position, color etc. > All the CSS classes which can be referenced in the DP Style formula field are stored in the Static Resource called DPCSS: > > ![image](media://5c1a6811-8724-464a-a95a-f32c99f73d66) > > Example of Static Resource: > > ``` > .closed { > opacity: 0.3; > } > > .inprogress { > border-width: 2px; > border-style: solid; > border-color: rgb(255, 153, 128, 1) !important; > } > .green { > border-color: rgb(195, 228, 230); > background: rgba(78, 244, 66, 0.5); > color: rgb(20, 154, 158); > } > > .gray { > border-color: rgb(217, 217, 217); > background: rgba(230, 230, 230, 0.5); > color: rgb(89, 89, 89); > } > .vacation, .verlof { > color: #443d1e; > font-size:16px; > border-color: #404040; > border-width: 1px; > background: > /* On "top" */ > repeating-linear-gradient( > 45deg, > transparent, > transparent 10px, > #FFEB9B 10px, > #FFEB9B 20px > ); > } > .other, .overige { > color: #203342; > font-size:16px; > border-color: #404040; > border-width: 1px; > background: > /* On "top" */ > repeating-linear-gradient( > 45deg, > transparent, > transparent 10px, > #80c7ff 10px, > #80c7ff 20px > ); > } > .dashed { > border-width: 3.5px; > border-style: dashed; > border-color: #3E3E3E; > } > > ``` > > Which rules are applied is determined in the formula. > > ![image](media://a16f1ef8-0cb3-479f-834d-0c04b842cfd1) > > For example, if related work order to the appointment is not special (`Exceptional_Work_Order_Type_Check__c` is unchecked), has type of `INCIDENT` and status `IN PROGRESS` then applied styles would be `green inprogress`. Therefore color and border would be impacted. Example is on the right > > > > > > > > > > > #### Steps to change style > > 1. Think what do you want to change – is that color or border of appointments for particular type or related account? > For example, for every high priority work orders, color needs to be red, and for everything else blue > 2. Check existing available stylings in Static Resource DPCSS. You can go to Setup> Custom Code > Static Resources, pick DPCSS and download it. Save that as DPCSS.css on your computer > 3. Check existing formula T_DP_Style__c on Resource Unit Assignment object > 4. Adjust the formula to reflect your changes.Example > 5. Adjust DPCSS to contain your styles. You can add more styles to it. For example: > 6. Update your static resource - click Update and upload new file > 7. Check if DP works as expected > > #### Hints > > 1. Always save separately formula value of DP Style and original static resource before changing those. In case of any typos/mistakes – you can revert it back > 2. You can add DP Style to page layout or list view of Resource Unit Assignments. That will help checking if formula evaluates to what it is expected to be. > 3. You can use chrome “Inspect” action to see why your style is not working as expected > > ### Useful links > > - More about Formula fields in salesforce: [https://trailhead.salesforce.com/content/learn/modules/point_click_business_logic/formula_fields](https://trailhead.salesforce.com/content/learn/modules/point_click_business_logic/formula_fields) > - Getting started with CSS > - [https://www.w3schools.com/css/css_intro.asp](https://www.w3schools.com/css/css_intro.asp) > - [https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/Getting_started](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/Getting_started) > - How to use Chrome Dev Tools to inspect style > - [https://designtlc.com/use-chrome-inspector-edit-website-css/](https://designtlc.com/use-chrome-inspector-edit-website-css/) > > ### I have no time, just explain me in 4 sentences > > Every appointment is a RUA (FIELDBUDDY__Resource_Unit_Assignment__c object) with link to Resource Unit and Work Order. There is a custom formula field (unmanaged) with name T_DP_Style__c. Value of that field is being applied to class property of each block, and custom extra classes are stored in Static Resource named DPCSS.