Styling the Grid and Applying State Formatting
Applying State Formatting to the Grid
You can use standard the standard style definition entities to apply state-based formatting to the grid rows and columns in two ways: row-based and cell-based. Cell-based formatting applies styles to cells under a single column. To apply conditional formatting styles to an entire row based on the value of a cell, use column-based formatting.
To apply state formatting to a column:
1. In Mashup Builder, open the widget configuration dialog box for the grid.
2. In the left pane, select a column to apply the state formatting to, and then open the State Formatting tab on the right.
3. Select State-based Style Definitions.
◦ Under Dependent Field, choose the infotable field to use for the state formatting. Typically, the dependent field is the same as the current column name. However, you can apply the state definitions rules based on the value of any column in the infotable.
◦ Under State Definition, select a State Definition entity.
◦ Create multiple rules to apply different styles for multiple conditions or values.
◦ Create a single rule to apply a style based on a single condition or value.
4. Click Done to close the dialog box, then view the mashup.
To apply state formatting to rows:
1. In Mashup Builder, select a Grid widget on the canvas or using the Explorer panel.
2. On the Properties panel, click the State Formatting button next to the RowFormat property. The state formatting configuration dialog opens.
3. Select State-based Style Definitions and then under Dependent Field, select the infotable column with the data to use for the row formatting.
4. Under State Definition, select the state definition to apply to the grid rows.
◦ Optionally, change the default values and style definitions of each state.
5. Click Done to close the dialog box, then view the mashup.
The row style is changed based on the value of the selected column cell.
For more information about state formatting, see
Applying State Formatting to Widgets.
Styling the Grid Widget Using the Mashup Style Theme
1. In Composer, open and edit the current mashup style theme.
2. On the Styles tab, under Elements, expand Grids and Lists and then Grids.
3. Edit the background and text style settings for the background, text, and borders. The border styles are available under Borders and Dividers (Preview).
You can preview the changes to the widget on the Grids and Lists tab of the Theme Preview mashup.
4. Click Save to save changes to the style theme.
Editing the Widget Style Properties
1. In Mashup Builder, select a Grid widget on the canvas, then open the Style Properties panel.
2. Expand a widget state to display a list of a parts, then edit the available styles for the widget parts.
3. Click Save