/
8. Styling Grids

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.


Related content

6. Card Views
6. Card Views
Read with this
15. Grid View Actions, Editing and Filtering
15. Grid View Actions, Editing and Filtering
More like this
6. Adding Content to a Screen
6. Adding Content to a Screen
More like this
6. Adding Content to a Screen
6. Adding Content to a Screen
More like this
Linked and Driving Views or Forms
Linked and Driving Views or Forms
More like this

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