PhixFlow Help

8. Styling Grids

Add additional styles to grid view components. To recap the steps in the video:

Highlight Inactive Customers

  1. Hide the UID column.
  2. Add two new businesses, the first with Active ticked and the second with Active unticked.
  3. Set Conditional Formatting on the View attribute Name:
    1. Name: InactiveCustomer
    2. Rule Expression: _current.Active != true
    3. Add a Style and set:
      1. Name: InactiveCustomer
      2. Text Colour: red

Style the Selected Item

  1. In the configuration form for the Businesses Grid View, in Styles Settings add a style to Row Selection Style and set:
    1. Name: SelectedBusiness
    2. Font Weight: bold
    3. Font Style: Italic

Update the Header Styles

  1. In the configuration form for the Businesses Grid View, under the Styles Settings add a style to Grid Header Style and set:
  2. Name: BusinessGridHeader
  3. Text Size: 22

Grouping Grid Headers

  1. In the configuration form for the Name attribute set the Label to Business, Name. The element before the comma will provide the grouping.
  2. Repeat the above step for Type.
  3. Group the address details together using Address.
  4. Logically group your remaining fields.


Please let us know if we could improve this page feedback@phixflow.com