ThingWorx Model Definition and Composer > Visualization > Style and State Definitions
  
Style and State Definitions
Style Definitions
All colors, text formats and line formats are managed and rendered in the mashup environment using style definitions entities. A style definition is a collection of HTML styling elements that can be applied to a widget just as you would apply a CSS (Cascading Style Sheet) definition to an HTML tag.
How to use State based Formatting Video.
Defining and Using Style Definitions
When you create a style, the following properties may be defined:
Display String — descriptive string that can be displayed to indicate the current applied style definition
Background Color — background for charts, buttons, panels, etc.
Secondary Background Color (for widgets that support gradients)
Foreground Color — used for foreground characteristics such as button text and label text
Font Bold (true/false)
Font Italic (true/false)
Font Underline (true/false)
Image — can be used for image rendering
Line Color — for pen styling in charts
Line Thickness — for pen styling in charts
Line Style — Generally refers to borders. ThingWorx provides the following options: Solid, Dashed, Dotted, None.
Text Size — Choose a font size from 9-72px.
There are many style definitions that come pre-installed. It is encouraged to create your own to create a consistent look and feel for your mashup components.
State Definitions
A state definition is a collection of style definitions, along with rules on when to apply each style definition. The rule plus the style definition is a state. A state definition should have more than one state. This allows you to do data based formatting of cells in a grid, for example, based on the value of a column in the data service bound to the grid.
When you apply a state definition to a widget, you must also pick which field from the widget data set that you wish the rule to be evaluated against. This allows you to use fields other than the visible data column as the field that determines state.
Defining and Using State Definitions
When you create a state definition, you must first define it as a string matching (String/Value selection) or as a numeric range (Numeric Range selection). With string matching, only an exact match will result in the style definition being applied. With a numeric range, any number within a defined range will cause the corresponding style to be applied.
When you define a string match state definition, define the following fields for each state:
Default Value — the string you want to match.
Display Name — use this to indicate a pump running versus off, for example, rather than using the match value. This name also shows up when dynamically binding state values (see below).
Style — the style definition to apply on a match.
To define a numeric range state definition, define the following per state:
Display Name — Name to be used for labeling state at run time. This name also shows up when dynamically binding state values (see below).
Style — Style definition to be applied.
To add another numeric range, press the Split button (pick the top or bottom Split button based on where you want to insert the new range, above or below the current range). Each numeric range starts at a minimum value up to some level, and also has a range of some value to the maximum. You can then insert as many ranges in between as desired.
It is important to note that you can define a state definition rather generically, and use specific overrides when that state is applied to an object. For example, you may have a typical scenario where you have a Low-Low condition, a Low condition, a Normal condition, and High condition, and a High-High condition. You want to use the following color scheme whenever this concept applies:
Low-Low — Orange
Low — Yellow
Normal — Green
High — Purple
High-High — Red
However, the actual numeric range may be different for different data points, even though the five states will be the same. Rather than define a state definition for each data point, you can apply the same state definition, but override the actual numeric ranges for that specific application of a state definition to a widget. This is done within the Widget configuration.
There are two ways to override the state definition. The first is to pick the state definition to use for a specific widget, and put in widget specific values in the renderer and state configuration dialog.
The second way is to bind the state values to a data service. When you pick a state definition to be applied to a widget, an additional properties will be added to the widget properties panel, one for each state in a state definition. The additional properties will be named ValueFormat_<Display Name>, where Display Name is the name you applied in the original state definition. You can then bind a value from any data service to those properties, allowing you to dynamically set the state definition limits, and make it completely data driven.