Examples of styles
Rules > Examples of styles
The following rules are configured with the Rules editor.
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
|
The value typed in here is sensitive case. |
Background color: RED
|
Find more colors here. |
Save and Publish this style, and then go to Form designer, 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
|
Find more colors here. |
Save and Publish this style, and then go to Form designer, 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
|
The value typed in here is sensitive case. |
Color: RED
|
Find more colors here. |
Save and Publish this style, and then go to Form designer, 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 global 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, open the proper form, select the Map component, and select the newly created rule in Style rule (under Properties).
|
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. |
|
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 that:
|
|
Values are case-sensitive, i.e., typing "cancelled" in lowercase for the list item "Cancelled", would fail the validation. Also, if the list item is a number, you must use the function string. |
Find more colors here.
| Save and Publish this style, and then go to Form designer, open the proper form, select the Calendar component, and select the newly created rule in Style rule (under Properties). |
|
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
|
The value typed in here is sensitive case. |
Color: RED
|
Find more colors here. |
Save and Publish this style, and then go to Form designer, open the proper Detail section form, select the Record selector component, and select the newly created rule in Style rule (under Properties).
|
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
|
Find more colors here. |
Save and Publish this style, and then go to Form designer, 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 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, open the proper form, select the Meter component, and select the newly created rule in Style rule (under Properties).