[Deprecated] Declarative Style for WebVI

[MilanR]

Description

Description-Separate-1

---

Note: Deprecated 

This example is deprecated and no longer maintained. 

WebVIs should instead use the Control Extensions for WebVI example instead which uses a simplified control reference based API.

---

The example includes VIs to help create custom styles for controls in WebVIs. See the Best Practices for Customizing the Appearance of Controls in a WebVI for information about when to use custom styling in a WebVI. See an example page using the library.

Note: If you use this library to create CSS to customize the appearance of controls, these modifications may not persist from release to release. If you modify the CSS from NI defaults using this library, plan to test your code each time you upgrade to a new version of the G Web Development Software and update or modify this library as necessary.

Components of a Style

The library includes a Create Style VI that has two inputs, the rule selector and the rule properties:

• The rule selector allows you to choose what parts of the page you want to style. For example, I want to style all Data Grid cells that contain the text "fail".
• The rule properties are the style properties that you want to apply to a selector. For example, I want to set the background color property to "dark red" and the text color property to "white".

The rule selector and rule properties are combined together with the Create Style VI to create a CSS style. For example, I want to select all Data Grid cells that contain the text "fail" and set the background color property to "dark red" and the text color property to "white".

Choosing a control in the page

In order to choose a control in the page to apply styles to you have to add a unique class to the control and create a CSS class selector to target the control.

• Create a unique class for a control: Choose a unique class name to add to a control. For example, use the name my-class-name and add the class to the HTML class attribute for the control in the properties pane.
  
  Note: The class attribute in the HTML class attribute field should not have a dot prefix
• Create a CSS class selector for the control: Take the unique class name that was chosen and prefix it with a dot. For example, for the previous class name the CSS selector would be .my-class-name to set on the diagram.
  
  Note: The selector input on the diagram should have a dot prefix

Full example

The following shows a Data Grid control as an example with a unique class name added that targets that specific Data Grid:

The following shows the diagram to select the Data Grid using the css selector .my-class-name (Note the dot prefix that was added) and the Data Grid column at index zero and looks for string cells containing the text "fail" case-insensitively and sets the background color to dark red and the text color to white:

The following shows the above example running in the browser:

Available Selectors

• Button - Glyph: Select the glyph in a Button element.
• DataGrid - String Column - Text Match: Allows you to select a string column in a Data Grid where the string contains / exactly matches / starts with / ends with some specified text. Note: Due to limitations of CSS this case can only perform case-insensitive matching.
• DataGrid - String Column: Select a string column in a Data Grid.

Available Properties

• Background Color
• Font Color
• Custom: Directly set the CSS Property name and value for advanced usage

Available Values

• Url Image Value: Creates a url() string from a provided relative url.

Specific Examples

• The WebApp Component shows a Data Grid-specific example of setting the --ni-overflow-x: auto css property and value for Data Grid string columns to allow the scrollbar to show when there is a large amount of horizontal text
• The WebApp Component shows specifying a custom glyph for a button by pointing to an image url

Changelog

Release 5 - Add Button - Glyph selector, Url Image Value, and example to customize a Button glyph

Release 4 - Support for G Web Development Software 2021

Release 3 - Fix style behavior when grouping is used in DataGrids
Release 2 - Add DataGrid - String Column selector and Data Grid-specific horizontal scrollbar example
Release 1 - First release

---

Note: Deprecated 

This example is deprecated and no longer maintained. 

WebVIs should instead use the Control Extensions for WebVI example instead which uses a simplified control reference based API.

---

Description-Separate-2