This page is for application designers who want to vary the formatting of components depending on conditions.

Overview

Sometimes you want to vary the style of a component depending on some condition. For example, for a form field that:

• has data, you want to apply a style that displays the field background in green
• does not have data, you want to apply a style that displays the field background in red

Use a formatting rule to determine when a style should be applied to an component as follows:

1. Open the properties for a component or attribute.
2. In the Formatting Rule section, click  Add New; see the Formatting Rule properties for details of all options.
3. Enter a Rule Expression to perform a logic check of the data.
4. Specify a style. If the expression returns True, this style overrides any existing style on the component.
   • Either select an existing style in the Style box drop-down list.
     Alternatively, open the repository to find a style and drag it into the Style box.
   • Or create a new style, set its properties and save it.
     PhixFlow automatically adds a new style to the Style box.
5. Save the formatting rule.
6.  Refresh the screen, or close and reopen the screen to see the formatting rule applied to the screen.

This page shows how to use formatting rule expressions and styles:

• to highlight a cell or Applying Formatting Rules#field
• to change an icon

How to Highlight a Cell 

In this example we will set the colour of a cell in a grid where the value is null. In the screenshot below, the null cells are shown in red.

1. In the grid header, click a column header to open the attribute properties.
2. In the Formatting Rule section, click  Add New. PhixFlow opens the new formatting rule properties.
3. Enter a Rule Expression.
   For this example we want to apply a style when a Web cell is empty. To do this enter the expression:
      _current.Web == _NULL
     where _current checks if each row has a value.
4. Either select a style you want to use, or create a style to apply when the expression is true. Next to the Style drop-down, click  Add New. In Basic Settings, set:
   
   • a Name for the style.
   • Background Colour: #BF0426.
   • Click  Apply and Close to save the style.
5. Phixflow automatically adds the new style to the formatting rule → Style.
6. Click  Apply and Close to save the formatting rule.

Refresh or reload the page to show the grid with the empty cells of the Web column highlighted in red.

How to Highlight a Field 

In this example we will set the border of an input field to be red where the value is empty, as illustrated below:

1. In the screen canvas, click a field component to open its properties.
2. In the Formatting Rule section, click  Add New.
3. Enter a Rule Expression.
   In this example we want a style to be applied when the field is empty. To do this enter the expression:
      _value == _NULL
     where _value checks the value in the form field.
4. Either select a style you want to use, or create a style to apply when the expression is true. Next to the Style drop-down, click  Add New. In the style properties → Basic Settings, set:
   • Name, for example MandatoryField.
   • Border Style: Solid. 
   • Border Width: 1px 
   • Border Colour: #BF0426.
   • Click  Apply and Close to save the style.
5. Phixflow automatically adds the new style to the formatting rule's Style.
6. Click  Apply and Close to save the formatting rule.

How to Set a Dynamic 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:

The screen illustrated above has a card container backed by company data. On the card we expect a field called Industry. We want to display a different icon for each industry.

Step 1  Upload icons for each industry

1. Upload the images that you want to use as your icons; see Adding Images.

Step 2  Configure the default icon

1. Create an area on your card component where you will display the images. We will call this the icon area.
2. Open the properties for the icon area component.
3. Set the area component's size to be suitable for an icon, for example with a Height and Width of 30px.
4. To ensure there is never a blank icon area, select an image to display as default. Use  Styles tab → Style Settings of 
   
   • either a shared style; see Screen Styling
   • or directly in the component properties
5. Set:
• Background Image: select the image that you want to be the 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. Alternatively, specify a size in px.
  
• Click  Apply and Close to save the shared style or component.

Step 2 Create a formatting rule for each icon 

The following formatting rule checks the industry to determine which icon to display. Create a formatting rule for each of the icons.

1. In the Formatting Rule section, click  Add New.
2. Enter a Rule Expression.
   We want to check which industry is on the card to determine which icon to display. To do this enter:
     _form.Industry == "Finance"
     where _form checks for the specified value in the Industry field.
3.  Create a style to apply when the expression is true. Next to the Style drop-down, click  Add New. In the style properties → Basic Settings, set:
   • Name: for example FinanceIcon.
   • Background Image: select the icon to represent finance.
   •  Click  Apply and Close to save the style.
4. Phixflow automatically adds the new style to the formatting rule's Style.
5. Click  Apply and Close to save the formatting rule.