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 oas-tag-val attribute:

<input type="text" id="my-textbox" oas-tag-val='{"tag":"Pump.Value"}' ">

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 oas-tag-val attribute, like all oas-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 oas-tag-val attribute expects JSON in the format:

{
    "tag": "TagName.Property",
    "config" : <Config>
}

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:

{
    "formats": [
        "bad_q": <optional string: displayed when data quality is bad>,
        "string": <optional string: replaces {0} with server value>,
        "bool_f": <optional string: displayed when boolean server value = false>,
        "bool_t": <optional string: displayed when boolean server value = true>,
        "int": <optional string: integer number formatter - see reference>,
        "float", <optional string: float number formatter - see reference>
    ]   
}

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:

<input type="text" id="my-textbox" oas-tag-val='{"tag":"Pump.Value", "config":{"formats":["bool_f":"NO", "bool_t":"YES"]}}' ">