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:

1. Image AddedSelect the column header and its properties open.
2. In the Formatting Rule section click 

   Insert excerpt
   _add _add nopanel true

   .
3. In the Rule Expression, in our example we want a style to be applied when the Web field is empty. To do this enter:

   1. _current.Web == _NULL

   2. _current is used to make each row check its value. 

4. Next we set

   the criteria that if it returns true, the selected style will apply. In

   the style that should be applied when the expression is true.

5. click 

   Insert excerpt
   _add _add nopanel true

    next to the Style box and we will add a new style.
   1. If you have a style already that you wish to use, click 

      Insert excerpt
      _style_list _style_list nopanel true

      , navigate to it and drag your style into the style box.
6. Enter a Name.
7. Enter #BF0426 in the background colour.
8. Save your changes
9. 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:

Image Added

1. Select the input field to open its properties.
2. In the Formatting Rule section click 

   Insert excerpt
   _add _add nopanel true

   .
3. In the Rule Expression, in our example we want a style to be applied when the Web field is empty. To do this enter:
   1. _value == _NULL
   2. _value checks the value in the form field. 

4. Next we set the style that should be applied when the expression is true.

5. click 

   Insert excerpt
   _add _add nopanel true

    next to the Style box and we will add a new style.
   1. If you have a style already that you wish to use, click 

      Insert excerpt
      _style_list _style_list nopanel true

      , navigate to it and drag your style into the style box.
6. Enter:
   1. Name, something indicative of the style e.g. Mandatory form Field.
   2. Border Style, Solid. 
   3. Border Width, 1px.
   4. Border Colour, #BF0426.
7. Save your changes
8. Save your Formatting Rule changes.
9. 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:

Image Added

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.

1. Upload the images that you want to use as your icons, see Adding Images for details on how to achieve this.
2. 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.
3. Open the properties for the Icon Area.
   1. 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.
4. Set:
1. Background Image, Select the image that you want to be our default image if none of the formatting rules are true. 
2. Background Repeat, None.
3. Background Position, center. This is CSS so we use the American spelling.
4. 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.
5. In the Formatting Rule section click 

   Insert excerpt
   _add _add nopanel true

   .
   1. 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:
      1. _
      current
      1. form.
      Web == _NULL
      sdcc
      1. Industry == "Finance"
         1. _form.Industry checks the value in the form field industry. 
   1. click 

      Insert excerpt
      _add _add nopanel true

       next to the Style box and we will add a new style.
   2. Enter:
      1. Name, indicative of the style e.g. Finance Icon.
      2. Background Image, set this to be the icon you wish to show when the expression is true.
      3.  Save your changes
   3. Save your Formatting Rule changes.
6. Repeat step 5 to create the formatting rules for each of the icons you wish to setup.