# Examples of styles > Style rule examples: color fields by their own or another field's value, and color Map markers, Calendar events, Record selector names, and Meter bars. [Rules](rules.md) > Examples of styles The following rules are configured with the [Rules editor](rules_editor.md). > **Note:** > > The values in style configuration is case-sensitive. ## Make a field change its background color depending on its value If the user chooses the item "Cancelled" in the Drop-down "Status", its background will be set to red. **Table**: Order **Field**: Status (Drop-down) **Name**: Status red if cancelled **Style** type: Background color **Operator**: Equal to **Value/Match**: Cancelled **Background color**: RED > **Tip:** > > Find more colors [here](https://www.w3schools.com/colors/colors_names.asp). **Save and Publish** this style, and then go to [Form designer](form_designer.md), open the proper form, _select the field in question_, and select the newly created rule in **Style rule** (under **Properties**). ## Make a field change its background color upon any value entered Make a field change its background color upon any value entered **Table**: Order **Field**: Remarks (Note) **Name**: Remarks yellow if used **Style type**: Background color **Operator**: Has value **Background color**: YELLOW > **Tip:** > > Find more colors [here](https://www.w3schools.com/colors/colors_names.asp). **Save and Publish** this style, and then go to [Form designer](form_designer.md), open the proper form, _select the field in question_, and select the newly created rule in **Style rule** (under **Properties**). ## Make a field change its color depending on the value of another field If the Shipment type is "Urgent", then set the ETA (estimated time of arrival) to red. **Table**: Shipment **Field**: Shipment type (Drop-down) **Name**: Urgent shipment turns ETA red **Style type**: Color **Operator**: Equal to **Value/Match**: Urgent **Color**: RED > **Tip:** > > Find more colors [here](https://www.w3schools.com/colors/colors_names.asp). **Save and Publish** this style, and then go to [Form designer](form_designer.md), open the proper form, _select the field in question_, and select the newly created rule in **Style rule** (under **Properties**). ## Set color to the markers in a Map component If the user wants to customize the color of the markers by the legends displayed at the bottom left of the map component when using the Categorize markers setting, to: red, for those sites that are cancelled; green, for the ongoing sites; and orange, for the sites that are on hold, so it’s easy to identify the status in a general way. **Table**: Site **Field**: Status (Drop-down) **Name**: Color for markers **Style type**: Background color **Operator**: Equal to **Value/Match**: Cancelled **Background color**: RED After this, click on the + icon (at the bottom right) to add another line, where you will choose again "Status", but this time you will type Ongoing as "Value/Match" , and GREEN as "Background". Once again, add another line, to configure the ORANGE color for On hold. **Save and Publish** this style, and then go to [Form designer](form_designer.md), open the proper form, _select the Map component_, and select the newly created rule in **Style rule** (under **Properties**). > **Note:** > > To ensure the correct functioning of the Map, _a color for each and every option_ (i.e., list item, in this example) must be defined. > **Tip:** > > Advanced style rules are also supported for Maps. ## Set color to the events in a Calendar component (Advanced) Customize the color of the events to: red, for any event related to a service where the Payment expiration date is about to ocurred or already did; and yellow, for cancelled services. **Table**: Service **Field**: Payment expiration (Date) **Name**: Color for events **Valid when**: if Payment expiration ⇐ today plus 1 days then background:red else if dropdown item in Service status in language of en = Cancelled then background:yellow else > **Note:** > > Note that: > > - "_if_" and "_today_" are functions. > > - "_plus days_" comes from selecting the function "_addDays_". Also, "_addSeconds_" is available. > > - "_dropdown item in in language of _" comes from selecting the function "itemname", which must be used for dropdown comparison. > Find more colors [here](https://www.w3schools.com/colors/colors_names.asp). > **Tip:** > > **Save and Publish** this style, and then go to [Form designer](form_designer.md), open the proper form, _select the Calendar component_, and select the newly created rule in **Style rule** (under **Properties**). > **Tip:** > > Regular Style rules are also supported for Calendars. ## Set backround color to the Record name in the Record selector All shipment Id’s (i.e., record names) that are "Urgent" will be displayed as red in the Record selector list. **Table**: Shipment **Field**: Shipment type (Drop-down) **Name**: Urgent shipments red **Style type**: Color **Operator**: Equal to **Value/Match**: Urgent ## Set colors to the bars of Meter component **Color**: RED > **Tip:** > > Find more colors [here](https://www.w3schools.com/colors/colors_names.asp). **Save and Publish** this style, and then go to [Form designer](form_designer.md), open the proper _Detail section form_, _select the Record selector_ component, and select the newly created rule in **Style rule** (under **Properties**). > **Note:** > > Note that the Record name field, usually included in all forms, is also subjected to have a style. ## Set background color to the Record name in the Record selector (Advanced) All shipment Id’s (i.e., record names) that haven’t been delivered and their planned delivery date has passed, will be displayed as red in the Record selector list; otherwise, they will be displayed as orange in case their planned delivery dates are due in a week. **Table**: Shipment **Field**: Record name **Name**: Late shipments in red, close to be late in orange **Valid when**: if Planned delivery date > today and Delivery date is empty then background:red else if Planned delivery date > today plus -7 days then background:orange else > **Tip:** > > Find more colors [here](https://www.w3schools.com/colors/colors_names.asp). **Save and Publish** this style, and then go to [Form designer](form_designer.md), open the proper _Detail section form_, _select the Record selector_ component, and select the newly created rule in **Style rule** (under **Properties**). ## Set colors to the bars of Meter component Set different colors to the bars of the [Meter](form_designer_components.md#_meter) component other than the default color (black). **Table**: Work activity **Field**: Work completion progress **Name**: Progress bar color **Style** type: Color **Operator**: Less than **Value/Match**: 10 **Color**: RED Create other four styles within this rule: Less than 30 ORANGE, Less than 50 YELLOW, Less than 90 YELLOWGREEN, Has value GREEN. **Save and Publish** this style, and then go to [Form designer](form_designer.md), open the proper form, _select the Meter_ component, and select the newly created rule in **Style rule** (under **Properties**).