You can assign CSS classes to individual ViewModel controls in MDriven Turnkey and use OCL expressions to select a class from the current model data; this is for developers who need to highlight or format a specific value without changing the application-wide theme.

What this technique does

A style reference is the class name that Turnkey adds to the HTML for a control. You define the class in CSS, then enter its name in the control's Style ref field in MDriven Designer.

For example, a vehicle registration number can use the class bombastic. When Turnkey renders the control, the class lets your CSS change how that registration number appears.

This is different from changing the shared colors, typography, or component sizing of the whole application:

Need	Use	Example
Style one control or select a style from its data	This page: a CSS class in Style ref	Show a status value in green when it is good and red when it needs attention.
Set a consistent application-wide theme	Documentation:MDriven Turnkey theming or Documentation:Tkusercss	Change the primary color, navigation bar color, or base font size across the application.
Maintain data-bound styles in the model rather than writing CSS	StylesInModel	Define reusable green and red model styles that can also be used in WPF.

Add a fixed CSS class to a control

Use this approach when every instance of a control should have the same appearance.

1. Open the relevant ViewModel in MDriven Designer.
2. Select the ViewModel column or control that you want to style. For example, select the column that displays a vehicle's registration number.
3. In the control's Style ref field, enter a class name, such as bombastic.
4. Add a CSS rule for that class in the Turnkey CSS available to the application. The class name in CSS must match the value in Style ref.
5. Save and send the model to the Turnkey application.
6. Refresh the application and confirm that the selected control has the new appearance.

For example, the following rule defines the class referenced by bombastic:

.bombastic {
  /* Add the visual properties required by your application here. */
}

The ViewModel does not contain the CSS rule. It only supplies the class name. If the CSS does not define .bombastic, entering bombastic in Style ref does not create a visible change.

Select a CSS class from model data

Use a Style ref expression when the class must change for each rendered object. Enable the expression option for the Style ref, then make the expression return the name of a CSS class.

For example, the following OCL expression returns one style when ThingsAreSuperGreat is true and another when it is false:

self.ThingsAreSuperGreat->casetruefalse(selfVM.Styles.TheGreenStyle,selfVM.Styles.TheRedStyle)

The expression result must correspond to styles that are available to the ViewModel. In a CSS-based implementation, define the returned class names in your CSS. The video example uses separate green and red classes so that a vehicle without a selected car is shown with the red class, and changes to the green class after a car is selected.

A conditional CSS implementation follows this pattern:

.bombastic-green {
  /* Appearance for the positive state. */
}

.bombastic-red {
  /* Appearance for the attention-required state. */
}

Keep the rule and the expression separate:

• CSS defines what bombastic-green and bombastic-red look like.
• The Style ref expression decides which class name applies to the current object.

Check the target before troubleshooting

Style references apply to the ViewModel control you selected. If the result is not visible, first verify that you styled the intended column or control rather than its containing form or another ViewModel clause.

Then check the following:

1. Confirm that the Style ref value exactly matches the CSS class name. A reference of bombastic-green requires a .bombastic-green rule.
2. Confirm that the CSS file is included in the deployed Turnkey application.
3. Refresh the application after sending the model or updating the stylesheet.
4. For an expression, confirm that it returns the expected class name for the current data state.
5. Use browser developer tools to inspect the rendered HTML and verify that the expected class was added to the control.

Use the right styling mechanism

Turnkey styling supports several related mechanisms. Do not use a control Style ref to replace a theme when the same change belongs across the application.

• For Turnkey components, modifier classes, contextual colors, and layout conventions, see Documentation:Turnkey Styling.
• For CSS behavior in ViewModels, including formatting, pictures, rows, columns, and individual table cells, see HowTos:Styling and CSS for Bootstrap, Angular and MVC.
• For reusable styles maintained as model data, see HowTos:Styling and Theming Your Application.
• For application-wide CSS custom properties or a compiled SCSS theme, see Documentation:Tkusercss and Documentation:MDriven Turnkey theming.

See also

• Documentation:Turnkey Styling
• HowTos:Styling and Theming Your Application
• HowTos:Styling and CSS for Bootstrap, Angular and MVC
• Documentation:MDriven Turnkey theming
• Documentation:MDriven Turnkey Series