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 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

component as follows:

1. Open the properties for a component or attribute.
2. In the Formatting Rule section, click 

   Insert excerpt
   _add _add nopanel true

   ; 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. Insert excerpt
   _refresh _refresh nopanel true

    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 field
• to change an icon.

How to Highlight a Cell 

Anchor
cell cell

In this example we will set the colour of a cell in a grid where the value is null as illustrated below:

Image Removed

. In the screenshot below, the null cells are shown in red.

Image Added

1. In the grid header, click a column header to open the attribute properties.
2. In the Formatting Rule section, click 

   Insert excerpt
   _add _add nopanel true

   . PhixFlow opens the new formatting rule properties.
3. In the Enter a Rule Expression, in our .
   For this example we want to apply a style to be applied when the a Web field cell is empty. To do this enter the expression:
      _current.Web == _NULL
     where _current is used to make checks if each row check its has a value. Next we set the style that should be applied
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 

   Insert excerpt
   _add _add nopanel true

    next to the Style box and we will add a new style.If you have a style already that you wish to use, click . In Basic Settings, set:
   
   • a Name for the style.
   • Background Colour: #BF0426.
   • Click 

     Insert excerpt
     _

   style_list

   • finish _

   style_list

   • finish nopanel true

   , navigate to it and drag your style into the style box.
5. Enter a Name.
6. Enter #BF0426 in the background colour.
7. Save your changes
8. Save your Formatting Rule changes.

Now where the Web field is empty the cell will be highlighted red.

1. •  to save the style.
2. Phixflow automatically adds the new style to the formatting rule → Style.
3. Click 

   Insert excerpt
   _finish _finish nopanel true

    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 

Anchor
field 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 Modified

1. In the screen canvas, click a field component to open its properties.
2. In the Formatting Rule section click 

   Insert excerpt
   _add _add nopanel true

   .

1. Enter a Rule Expression

1. .
   In this example we want a style to be applied when the field is empty. To do this enter the expression:
      _value

1. ==

1. _NULL
     where _value

1.  checks the value in the form field.

2. Either select a style you want to use, or create a style to apply when the expression is true.

1. Next to the Style drop-down, click 

   Insert excerpt
   _add _add nopanel true

1. . In the style properties → Basic Settings, set:
   • Name, for example MandatoryField.
   • Border Style: Solid. 
   • Border Width: 1px 
   • Border Colour: #BF0426.
   • Click 

     Insert excerpt
     _

1. • finish _

1. • finish nopanel true

1. •  to save the style

1. • .

1. Phixflow automatically adds the new style to the formatting rule's Style.
2. Click 

   Insert excerpt
   _finish _finish nopanel true

    to save the formatting rule.

How to Set a Dynamic Icon 

Anchor
icon 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 Removed

Image Added

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

1. ; see Adding Images

1. .

Step 2  Configure the default icon

1. Create an area on your card component where you will display the images. We will call this

1. the icon area.
2. Open the properties for the

1. icon area component.
2. Set the area component's size to be suitable for an icon, for example with a Height and Width of 30px.
3. To ensure there is never a blank

1. icon area, select an  image to display be default. Use

   Insert excerpt
   _property_tabs _property_tabs name style nopanel true

    → Style Settings of 
   
   • either a shared style; see Screen Styling
   • or directly in the component properties
2. 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 

  Insert excerpt
  _finish _finish nopanel true

   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 

   Insert excerpt
   _add _add nopanel true

   .

1. Enter a Rule Expression

1. .
   We want to check which industry is on the card to determine which icon to display. To do this enter:
     _form.Industry

1. ==

1. "Finance"
     where _

1. form checks for the specified value in the

1. Industry field

1. .

2.  Create a style to apply when the expression is true. Next to the Style drop-down, click 

   Insert excerpt
   _add _add nopanel true

1. . In the style properties → Basic Settings, set:
   • Name: for example FinanceIcon.
   • Background Image: select the icon to represent finance.
   •  Click 

     Insert excerpt
     _finish _finish nopanel true

      to save the style.
2. Phixflow automatically adds the new style to the formatting rule's Style.
3. Click 

   Insert excerpt
   _finish _finish nopanel true

    to save the formatting rule.