Marking up HTML Elements

Marking up element tags with specialized attributes

The simplest and most direct method of binding HTML elements to server Tags is to mark up the element tag with one or more specialized attributes. Each attribute represents a behavior added to the HTML element, tied to the value and state of a Tag or set of tags. For example, if you wish to display the current value for the Ramp.Value tag within a text box, you would use the opc-tag-val attribute:

Web HMI Wizard

To learn how to use each of the markup attributes, you can use the interactive Web HMI Wizard to generate working example code.

Values are valid JSON

The value of the opc-tag-val attribute, like all opc-tag- attributes must be valid JSON. Each attribute requires a specific JSON structure for defining the element behavior, but the JSON structures consist of specific types and sub-types. For example, a simple opc-tag-value attribute expects JSON in the format:

For this attribute the config is optional, and would contain settings used to format the server Tag value for display. If you want to apply formatting to the server Tag value, you would use the formats setting in the Config:

Tying it all together

Tying this all together, if the server tag Pump.Value is a boolean, and you want “YES” and “NO” to be displayed in a text box instead of True or False, the full HTML markup would be: