Overview
Formatting rules are used to determine when a style should be applied to an object. For example, highlighting a form field with a missing entry or changing an icon based on the selected company's industry sector.
For information about all the available options see Formatting Rule
All Formatting Rules perform a logic check that if it returns True the shared style will be applied.
Example - Highlight a Cell
In this example we will set the colour of a cell in a grid where the value is null as illustrated below:
- Select the column header and its properties open.
- In the Formatting Rule section click Add New.
- In the Rule Expression, in our example we want a style to be applied when the Web field is empty. To do this enter:
_current.Web == _NULL
- _current is used to make each row check its value.
Next we set the style that should be applied when the expression is true.
- click Add New next to the Style box and we will add a new style.
- If you have a style already that you wish to use, click Error rendering macro 'excerpt-include' : No link could be created for '_style_list'., navigate to it and drag your style into the style box.
- If you have a style already that you wish to use, click
- Enter a Name.
- Enter #BF0426 in the background colour.
- Save your changes
- Save your Formatting Rule changes.
Now where the Web field is empty the cell will be highlighted red.
Example - Highlight a Field
In this example we will set the border of an input for to be red where the value is empty as illustrated below:
- Select the input field to open its properties.
- In the Formatting Rule section click Add New.
- In the Rule Expression, in our example we want a style to be applied when the field is empty. To do this enter:
- _value == _NULL
- _value checks the value in the form field.
Next we set the style that should be applied when the expression is true.
- click Add New next to the Style box and we will add a new style.
- If you have a style already that you wish to use, click Error rendering macro 'excerpt-include' : No link could be created for '_style_list'., navigate to it and drag your style into the style box.
- If you have a style already that you wish to use, click
- Enter:
- Name, something indicative of the style e.g. Mandatory form Field.
- Border Style, Solid.
- Border Width, 1px.
- Border Colour, #BF0426.
- Save your changes
- Save your Formatting Rule changes.
- Close and reopen the screen and the formatting rule will be applied.
Example - Set an Icon
In this advanced example we will set an icon on a card component based on the industry field of our record as illustrated below:
We need a screen setup that has a card container backed by company data. On our card we expect a field called Industry which we will check in our formatting rule to determine which icon to display.
- Upload the images that you want to use as your icons, see Adding Images for details on how to achieve this.
- Create an area on your card component where you will display the images. We will call this area Icon Area. Set it to be the desired size, for example height and width 30px each.
- Open the properties for the Icon Area.
- We will set a default icon and image settings. We do this so there is never a blank space where an icon should be and we only need to set the image settings once. This can be done directly on our area or within a shared style.
- Set:
- Background Image, Select the image that you want to be our default image if none of the formatting rules are true.
- Background Repeat, None.
- Background Position, center. This is CSS so we use the American spelling.
- Background Size, contain. Contain scales the image as large as possible within its container without cropping or stretching the image. We can specify a size in px.
- In the Formatting Rule section click Add New.
- In the Rule Expression, in our example we want a style to be applied when a specific industry is populated in the industry field. To do this enter:
- _form.Industry == "Finance"
- _form.Industry checks the value in the form field industry.
- _form.Industry == "Finance"
- click Add New next to the Style box and we will add a new style.
- Enter:
- Name, indicative of the style e.g. Finance Icon.
- Background Image, set this to be the icon you wish to show when the expression is true.
- Save your changes
- Save your Formatting Rule changes.
- In the Rule Expression, in our example we want a style to be applied when a specific industry is populated in the industry field. To do this enter:
- Repeat step 5 to create the formatting rules for each of the icons you wish to setup.