Available in: Axsy Mobile for Salesforce, Field Service, Axsy Public Sector, Axsy Retail Execution

The Axsy Mobile App's offline-first Flow Engine supports the standard Salesforce Flow Data Table component which is available as part of Salesforce's Flow Designer.

Add Styling to Flow Data Tables

As per the below screenshot, the Axsy Flow Engine additionally supports the ability to add basic colour and text styling to both individual cells and/or entire columns within the Data Table.

NOTE: The Data Table styling described in this article is only supported in the Axsy Mobile App. When run as a Screen Flow in the Salesforce Web UI or Salesforce Mobile App, no styling is applied.

Styling for Entire Columns

Applying styling to an entire column of a Data Table is done via first creating a Flow Text Variable that has an API name with a specific naming convention: <datatable-api-name>_style_col_<column-number>

Example: If a Flow has a Data Table element with API name SelectCase and you want to apply styling to it's 1st and 3rd columns, you would create one Flow Text Variable with API name SelectCase_style_col_1 and a second Flow Text Variable with SelectCase_style_col_3

With the necessary Flow Text Variables created for each column that is to have styling, the styling to apply to all cells of the specified column - per the variable's API name - is done by setting the value of the Flow Text Variable to the desired formatting using HTML-style formatting, e.g. "font-weight:bold;background-color:red"

Styling for Individual Cells

In addition to styling an entire column, it is possible to style individual cells within a column. To do so, instead of creating a single-value Flow Text Variable, a multiple-value Flow Text Collection Variable should be created. The API name for any collection variables should follow the same convention described above, i.e. <datatable-api-name>_style_col_<column-number>

The Flow Text Collection Variable used for styling should be the same size as the number of rows of the Data Table - e.g. if the Data Table has 12 rows, the collection variables should have 12 values. Accordingly, each value in the collection variable defines the styling for its corresponding cell in the column, moving from top to bottom.

As described above, HTML-style formatting should be used for each value in the collection variable. For a cell that should not have any styling applied, a value of Empty String (Not Null) should be used.