Widget Schema Property Descriptions

This document provides a general description of the properties used in widget schemas and their effects on the widgets.

General Properties

types

  • Description: Specifies the data types that the widget can handle.

  • Possible Values: ["bool", "int", "float", "string", "langString", "long", "time", "uint", "ulong", "dyn_uint", "dyn_ulong", "dyn_int", "dyn_long", "dyn_float", "dyn_bool", "dyn_string", "dyn_time", "dyn_langString"]

widgetType

  • Description: Must still be specified due to legacy code. The value is irrelevant for the web component dashboard, the property must be present.

  • Example Values: "label", "alerttable"

label

  • Description: The label displayed for the widget. Can be either a language string (inline object with language codes) or a key from a language catalog.

  • Flattened Translation Key Pattern: WUI_<widget>.<leaf> (legacy wrapper segments like Widget.<widgetName>. were removed).

  • Example Value: "WUI_Widget_Label.Label", { "de.utf8": "Bild", "en.utf8": "Image"}

description

  • Description: A brief description of the widget. Can be either a language string or a key from a language catalog.

  • Example Value: "WUI_Widget_Label.Description", { "de.utf8": "Kurze Beschreibung", "en.utf8": "Short description"}

size

  • Description: Specifies the minimum size of the widget in terms of rows and columns.

  • Properties:

    • minRows: Minimum number of rows.

    • minCols: Minimum number of columns.

  • Example Value: { "minRows": 3, "minCols": 6 }

defaultSettings

  • Description: Defines the default settings for the form field of the widget settings. Properties of the default settings depend on the widget

  • Example Value: { "fontSizeFactor": "large", "iconSizeFactor": "medium", "iconPosition": "left", "unitFontSizeFactor": "small" }

svgFile

  • Description: Relative project path to the SVG file representing the widget. The SVG file must be in the data folder, otherwise the web server cannot deliver the SVG file.

  • Example Value: "/data/WebUI/svg/label.svg"

Component Settings

Component settings are used to define the behavior of the widget. They are specified in the componentSettings property of the widget schema.

styles

  • Description: Can be used to apply additional styles to the widget. URLs are specified that lead to CSS files, which are then queried when the widget is loaded. If the retrieval is successful, these are applied to the widget. Can be left empty.

  • Example Value: [] ["/data/WebUI/styles/default.css"] ["https://unpkg.com/lit-weather/dist/tw.css"]

scripts

  • Description: The specified scripts will be loaded as soon as the widget is loaded. The script files must be ES modules and should follow the ES module standard. If the file ends with .js omit the ending. Add a ? or & at the end of the string for other files or urls that do not end with .js

  • Example Value: ["label"] ["https://unpkg.com/lit-weather/dist/lit-weather?module&"] ["/data/WebUI/widgets-v2/example.widget"]

tagname

  • Description: The custom tag name for the widget component. Must be unique and include an "-" in the name.

  • Example Value: "wui-widget-label"

JSON Schema Property Descriptions

Description

Defines the underlying data to be shown in the UI (objects, properties, and their types). This Object should comply to the JSONSchema interface from @jsonforms/core library. For more details please refer to their repository. Using JSON Schema, you can:

  • Define the required fields in a JSON object

  • Specify data types for values (e.g. string, number, boolean)

  • Set constraints on values (e.g. minimum/maximum for numbers, patterns for strings)

  • Describe nested objects and arrays

  • Create reusable definitions for common structures

Example JSON Schemas

{
  "type": "object",
  "properties": {
    "value": { "type": "number" },
    "color": { "type": "string" },
    "alertColor": { "type": "string" },
    "format": { "type": "string" },
    "unit": { "type": "string" },
    "name": { "type": "string" },
    "fontSizeFactor": { "type": "string" },
    "unitFontSizeFactor": { "type": "string" },
    "iconPosition": { "type": "string" },
    "iconSizeFactor": { "type": "string" },
    "icon": { "type": "string" }
  },
  "required": ["value"]
}
{
  "type": "object",
  "properties": {
    "showLegend": {
      "type": "boolean"
    },
    "legendOrientation": {
      "type": "string"
    },
    "legendVerticalPosition": {
      "type": "string"
    },
    "legendHorizontalPosition": {
      "type": "string"
    },
    "range": {
      "type": "object",
      "properties": {
        "min": {
          "type": "number"
        },
        "max": {
          "type": "number"
        }
      }
    },
    "isStacked": "boolean",
    "isHorizontal": "boolean",
    "series": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "value": {
            "type": "number"
          },
          "color": {
            "type": "string"
          },
          "alertColor": {
            "type": "string"
          },
          "name": {
            "type": "string"
          },
          "format": {
            "type": "string"
          },
          "unit": {
            "type": "string"
          }
        }
      }
    }
  }
}

For further examples see WinCC OA version under data/WebUI/widgets-v2/StandardLibrary.

UI Schema Property Descriptions

Description

The UI schema describes the general layout of a form and is just a regular JSON object. It describes the form by means of different UI schema elements, which can often be categorized into either Controls, Layouts or Groups. Some UI schema elements allow an options property which allows for further configuration of the rendering result. The actual configuration options are often renderer specific and hence need to be looked up.

Controls

Controls represent the basic building blocks for creating forms.

A control is usually displaying the value of one property from the data in an UI element such as an input field. But there are also exceptions such as DataPointControl which resolves to several properties at once.

Example Control:

This will render a simple input field. The content that the user enters, is set on the property propertyName of the UI element during runtime.

{
  "type": "Control",
  "label": "WUI_Widget_Example.PropertyNameLabel",
  "placeholder": "WUI_Widget_Example.PropertyNamePlaceholder",
  "scope": "#/properties/propertyName",
  "options": {}
}

Available Controls:

  • Control a regular form input. options can include:

    • inputType .. can be any HTML input type e.g.: "checkbox" | "number" | "color" | "range"

    • tooltip .. to set a tooltip

    • context .. set to "series" to enable rules within groups

    • step .. set a specific step size when using "inputType": "number". can also be "any"

    • value .. when using "inputType": "checkbox" this can define the checked value

  • ContextControl A context control can retrieve or transform given user inputs into a different format or form. options need to define what kind of transformation is applied and how the field is rendered:

    • contextInputType can be one of:

      "translate" .. let the user input multiple texts for each project language, while the UI element will only recieve the text in current application language "dpconnect" .. let the user select a datapoint and continuously forwards its current value to the UI element "color" .. lets the user select a datapoint and continuously forwards its current alarm color to the UI element "unit" .. gives the user a option to define value formatting e.g. %.2f "navigate" .. when working with events from the UI element, navigate can be used to redirect to a different page "dpset" .. when working with events from the UI element, dpset can be used to set a value on specified datapoint "history" .. to retrieve historic values from an WinCC OA archive backend

  • DataPointControl A control that combines multiple features into one renderer. This can be used to retrieve data from a selected datapoint. It will search for certain attributes in the JSON schema in order to retrieve specific data. It respects these attributes in the JSON schema: value, format, unit, name, alertColor and color. options can include:

    • fetchMethod .. "historic" let the user select a time-range and will retrieve historic values

    • historic .. when fetch method is historic, allow here more options

      • customCompress .. true/false if set, the user can select the compress method

      • customFields .. true/false if set, the user can select which fields should be retrieved

      • customTimeSlots .. true/false if set, the user can select how many time slots should be retrieved

      • customTimeSlotSeconds .. true/false if set, the user can select how many seconds each time slot should cover

      • customInterpolate .. true/false if set, the user can select which interpolate method should be used

      • in addition, it is possible to set default values for:

        • compress .. true if aggregate methods should be used to retrieve values, or false if only values and timestamps should be retrieved

        • fields .. which fields should be retrieved, e.g. ["values", "timestamps", "min", "max", "last", "avg", "sum", "count"]

        • timeSlots .. when compress is true, how many time slots should be retrieved

        • timeSlotSeconds .. when compress is true, instead of defining how many time slots should be retrieved, the user can define how many seconds each time slot should cover

        • interpolate .. when compress is true, which interpolate method should be used. can be one of ["begin", "intermediate", "end"]

    • dpSet .. to configure the context to listen to events, when an event was emited, the event value is set to the given datapoint. this is an object containing:

      • customValue .. overide the events value and use this one

      • validate .. only forward it to the dpset if the event is validated

      • event .. "click" | "change" defines which event name should be listening for

      • successNotification .. true|false defines if a success notification should be shown

  • NodemapControl An interactive graph visualization control built with Cytoscape that allows users to create and edit node-edge network diagrams. Users can add nodes with customizable colors and multi-language names, draw connections (edges) between nodes with interactive drawing mode, move and reposition nodes via drag-and-drop, apply automatic layout algorithms (breadthfirst), and assign datapoints to edges for data binding. options can include:

    • nodeShape .. defines the visual shape of nodes in the graph. Accepts Cytoscape node shape values: ellipse, triangle, round-triangle, rectangle, roundrectangle, hexagon

  • IconSelectorControl

  • IconPositionControl

  • IconSizeControl

  • FileSelectorControl

  • ColorSelectorControl

  • FontSizeSelectControl

  • OrientationSelectControl

  • PositionSelectControl

  • AlignmentSelectControl

  • MultiLangTextControl

  • IconToggleButtonGroupControl

  • MappingControl

Layouts

Layout elements in the UI Schema contain other UI Schema elements like controls or other layouts and serve the purpose of defining the layout of those, e.g. a layout could arrange all its contained UI Schema Elements into a horizontal alignment. Layout has several render options:

  • orient .. "vertical"|"horizontal" .. defaults to horizontal, arrange elements accordingly

  • noborder ... omits the frame around the layout

  • collapsible .. true|"open"|"closed" .. turns the layout into a collapsible area

  • showFirstElementAsHeader ... uses the first given element as header of the collapsible area, which is then even shown when there the area is closed.

Available Layouts:

  • WuiLayout

Example Layout:

This will render a simple content area, that is collapsible, but by default open and which includes a data-point selector and an icon selector form element.

{
  "label": "WUI_Settings.Area.Content",
  "type": "WuiLayout",
  "options": {
    "noborder": true,
    "showFirstElementAsHeader": false,
    "collapsible": "open"
  },
  "elements": [
    {
  "label": "WUI_Settings.Area.Datapoint",
      "scope": "#/properties/datapoint",
      "type": "DataPointControl"
    },
    {
      "type": "IconSelectorControl",
      "label": "WUI_Settings.GeneralLabels.Icon",
      "scope": "#/properties/icon"
    }
  ],
},

Groups

Groups can contain other UI schema elements like layouts. But instead of just visually displaying the elements differently, the child properties are grouped into one object property.

Example Groups:

  • SeriesGroup

  • HorizontalGroup

  • VerticalGroup

Control → Context → Attribute Reference

This section explains the full data pipeline: how each UI schema control generates a context in the widget instance JSON, and what HTML attributes the widget receives at runtime.

How It Works

UI Schema Control       →  Widget Instance (JSON)    →  HTML Attribute on Widget
─────────────────         ───────────────────           ─────────────────────────
User configures in        Stored as context +           Context component resolves
settings page             config object                 data and sets attribute

Attribute assignment rules:

  • string / number → set as HTML attribute (node.setAttribute(name, value))

  • boolean → presence/absence of attribute (true = attribute present, false = removed)

  • object / array → set as JavaScript property (node[name] = value)

Simple Controls (Direct Value)

These controls store the user's input directly. The value is forwarded to the widget as a static context.

UI Schema Control Context Generated Widget Receives Value Type
Control static User-entered value string / number / boolean
Control (inputType: "checkbox") static true / false or custom value boolean or string
Control (inputType: "number") static Numeric value number
Control (inputType: "color") static Color hex string string
FontSizeSelectControl static "small" / "medium" / "large" string
IconSelectorControl static Icon name (e.g., "temperature") string
IconPositionSelectControl static "left" / "right" / "top" / "bottom" string
IconSizeSelectControl static "small" / "medium" / "large" string
ColorSelectorControl static Color hex string string
FileSelectorControl static-file File path string
OrientationSelectControl static "horizontal" / "vertical" string
PositionSelectControl static Position value string
AlignmentSelectControl static Alignment value string
MultiLangTextControl translate Text in current language string
IconToggleButtonGroupControl static Selected value string

ContextControl (Configurable Context)

ContextControl uses options.contextInputType to determine which context options are available. When multiple options are listed, the user picks one in the settings UI.

contextInputType Available Context Options Widget Receives
"data" dpconnect, dpget, static DP live value, DP single read, or static value
"dpconnect" dpconnect Live datapoint value (updates in real-time)
"color" dpconnectalertcolor, static-color Alert color from DP, or static color hex
"range" dpgetpvrange, static-range { min, max } from DP config or static
"format" dpgetformat, static-format Format string from DP (e.g., "%.2f") or static
"unit" dpgetunit, translate, static Unit from DP, translated text, or static string
"name" dpgetdescription, translate, static Description from DP, translated text, or static string
"history" historicaldata, historicalconnect Historical values (one-shot or live-updating)
"static" static Static user input
"translate" translate Multi-lang text resolved to current language
"alarm" alertconnect, alerthistory Live or historical alarm data
"event" dpset, navigation No value to widget; triggers DP write or navigation on event
"dpset" dpset No value; writes to DP on event
"navigate" navigation No value; navigates on event
"file" static-file File path
"apidecorator" apidecorator OaRxJsApi instance (property)
"connectionstate" connectionstate "ok" / "warn" / "alert" / ""

DataPointControl (Combined Multi-Attribute)

DataPointControl is special — it generates a single data-point context that resolves multiple attributes at once from one datapoint. Which attributes are included depends on which properties exist in the widget's jsonSchema.

JSON schema properties → Widget attributes:

jsonSchema Property Widget Attribute Value Type Description
value value number / string / boolean / object Current DP value (or historic data object)
name name string DP description/name
unit unit string Unit of measurement
format format string Format string (e.g., "%.2f")
color color string Color value
alertColor alertColor string Current alarm color
min min number Minimum value (from PV range config)
max max number Maximum value (from PV range config)
alertRanges alertRanges { min, max, color }[] Alert range definitions
dpSet — — Enables event-based writing (no attribute, listens for events)
datapoint datapoint string DP name itself
valueType valueType string JS type of value ("number", "string", etc.)
lastUpdate lastUpdate number Timestamp of last value change

Generated instance JSON example: 

{
  "context": "data-point",
  "config": {
    "dpName": "System1:ExampleDP_Arg1.",
    "definedConfigs": ["value", "name", "unit", "format", "alertColor", "min", "max"],
    "fetchMethod": "historic",
    "historic": { "sTimeRange": "1h", "compress": true },
    "dpSet": { "event": "change", "validate": true }
  }
}

The definedConfigs array is automatically derived from which of the above properties exist in the widget's jsonSchema. Only attributes listed in definedConfigs are queried from the backend and forwarded to the widget.

MappingControl

MappingControl generates a mapping context that transforms input values to different output values based on a user-defined mapping table.

Event-Based Contexts (No Attribute Output)

These contexts don't forward data to the widget. Instead, they listen for events emitted by the widget and perform an action.

Context Triggered By Action
dpset Widget event (e.g., change, click) Writes event value to configured datapoint
navigation Widget event Navigates to configured URL/dashboard

Example UI Schemas

A settings page, that will include a content and a formatting area.

{
  "type": "object",
  "elements": [
    {
      "type": "WuiLayout",
      "label": "WUI_Settings.Area.Content",
      "options": {
        "collapsible": "open",
        "showFirstElementAsHeader": false,
        "noborder": true
      },
      "elements": [
        {
          "type": "DataPointControl",
          "scope": "#/properties/datapoint",
          "label": "WUI_Settings.Area.Datapoint"
        }
      ]
    },
    {
      "type": "WuiLayout",
      "label": "WUI_Settings.Area.Formatting",
      "options": {
        "collapsible": true,
        "showFirstElementAsHeader": false,
        "noborder": true
      },
      "elements": [
        {
          "type": "FontSizeSelectControl",
          "label": "WUI_Widget_Label.FontSizeFactor",
          "scope": "#/properties/fontSizeFactor"
        },
        {
          "type": "FontSizeSelectControl",
          "label": "WUI_Widget_Label.UnitFontSizeFactor",
          "scope": "#/properties/unitFontSizeFactor"
        },
        {
          "type": "IconSelectorControl",
          "label": "WUI_Widget_Label.Icon",
          "scope": "#/properties/icon"
        },
        {
          "type": "IconPositionSelectControl",
          "label": "WUI_Widget_Label.IconPosition",
          "scope": "#/properties/iconPosition"
        },
        {
          "type": "IconSizeSelectControl",
          "label": "WUI_Widget_Label.IconSizeFactor",
          "scope": "#/properties/iconSizeFactor"
        }
      ]
    }
  ]
}

This will render an extendable list of datapoints in the content area and different options regarding chart legends and axis labels. There are also examples for RULES that will either SHOW or HIDE a form element based on the value of a different element.

{
  "type": "object",
  "elements": [
    {
      "type": "WuiLayout",
      "label": "WUI_Settings.Area.Content",
      "options": {
        "collapsible": "open",
        "showFirstElementAsHeader": false,
        "noborder": true
      },
      "elements": [
        {
          "type": "SeriesGroup",
          "scope": "#/properties/series",
          "label": "WUI_Settings.Area.Series",
          "options": {
            "itemLabel": "WUI_Settings.GeneralLabels.SerieIndex"
          },
          "elements": [
            {
              "type": "DataPointControl",
              "scope": "#/properties/datapoint",
              "label": "WUI_Settings.Area.Datapoint"
            }
          ]
        }
      ]
    },
    {
      "type": "WuiLayout",
      "label": "WUI_Settings.Area.Formatting",
      "options": {
        "collapsible": true,
        "showFirstElementAsHeader": false,
        "noborder": true
      },
      "elements": [
        {
          "type": "WuiLayout",
          "label": "WUI_Settings.Legend.Title",
          "options": {
            "orient": "vertical"
          },
          "elements": [
            {
              "type": "Control",
              "label": "WUI_Settings.Legend.Show",
              "scope": "#/properties/showLegend",
              "options": {
                "inputType": "checkbox"
              }
            },
            {
              "type": "WuiLayout",
              "options": {
                "noborder": true
              },
              "elements": [
                {
                  "type": "OrientationSelectControl",
                  "label": "WUI_Settings.Legend.Alignment.Title",
                  "scope": "#/properties/legendOrientation",
                  "rule": {
                    "effect": "SHOW",
                    "condition": {
                      "scope": "#/properties/showLegend",
                      "schema": {
                        "const": true
                      }
                    }
                  }
                },
                {
                  "type": "PositionSelectControl",
                  "label": "WUI_Settings.Legend.Position.Title",
                  "scope": "#/properties/legendVerticalPosition",
                  "rule": {
                    "effect": "SHOW",
                    "condition": {
                      "scope": "#/properties/showLegend",
                      "schema": {
                        "const": true
                      }
                    }
                  }
                },
                {
                  "type": "AlignmentSelectControl",
                  "label": "WUI_Settings.Legend.Alignment.Title",
                  "scope": "#/properties/legendHorizontalPosition",
                  "rule": {
                    "effect": "SHOW",
                    "condition": {
                      "scope": "#/properties/showLegend",
                      "schema": {
                        "const": true
                      }
                    }
                  }
                }
              ]
            }
          ]
        },
        {
          "type": "WuiLayout",
          "label": "WUI_Settings.GeneralLabels.YAxisOptions",
          "options": {
            "orient": "vertical"
          },
          "elements": [
            {
              "type": "Control",
              "label": "WUI_Settings.GeneralLabels.Name",
              "scope": "#/properties/yAxisName"
            },
            {
              "type": "Control",
              "label": "WUI_Settings.GeneralPrompts.Color",
              "scope": "#/properties/yAxisColor",
              "options": {
                "inputType": "color"
              }
            },
            {
              "type": "Control",
              "label": "WUI_Settings.GeneralPrompts.Unit",
              "scope": "#/properties/yAxisUnit",
              "options": {
                "contextInputType": "unit"
              }
            },
            {
              "type": "Control",
              "label": "WUI_Settings.GeneralLabels.Range",
              "placeholder": "WUI_Settings.Range.Automatic",
              "scope": "#/properties/range",
              "options": {
                "inputType": "range"
              }
            }
          ]
        },
        {
          "type": "WuiLayout",
          "elements": [
            {
              "type": "Control",
              "label": "WUI_Widget_Barchart.IsStacked",
              "scope": "#/properties/isStacked",
              "options": {
                "inputType": "checkbox"
              }
            },
            {
              "type": "Control",
              "label": "WUI_Widget_Barchart.IsHorizontal",
              "scope": "#/properties/isHorizontal",
              "options": {
                "inputType": "checkbox"
              }
            }
          ]
        }
      ]
    }
  ]
}

For further examples see WinCC OA version under data/WebUI/widgets-v2/StandardLibrary.

Language Catalogs

Description

To add new language catalogs to the project, for example to use them in new widgets, they must be stored in the project under the following path:

data/WebUI/msg/[lang].utf8/

Replace [lang] with the appropriate language code. Use the combination of ISO 639-1 language code and ISO 3166-1 country code (two letters), separated by an underscore

Examples of valid paths:

  • data/WebUI/msg/de_AT.utf8/ (German for Austria)

  • data/WebUI/msg/en_US.utf8/ (English for the United States)

By correctly placing the language catalogs in these directories, you ensure that the system can locate and use the appropriate translations for various languages and regional variants.

The content of such a catalog is a JSON object, which can also be nested. Words that are enclosed with {{ }} are placeholders. These can be replaced with values ​​later when translating. The word is used as a key during the replacement.

Example File Content

{
  "header": {
    "title": "Hello",
    "subtitle": "World"
  },
  "cta": {
    "awesome": "{{ animals }} are awesome!",
    "cats": "Cats"
  }
}

Full example

This is a full example of a widget schema. The widget supports numeric input types. It has a label, description, and a minimum size. The default settings include two different properties. The SVG file is specified, and the component settings include styles, scripts, and a custom tag name. The html tag of wui-example will be used and must correspond to the same unique tag that is used in the script. The script tag refers to a file name example.widget.js - the .js in end is added by the application and must be omited in the config. The JSON schema defines the properties of the widget, while the UI schema describes the layout and controls.

{
  "types": ["int", "float", "long", "uint", "ulong"],
  "widgetType": "example",
  "label": {
    "de.utf8": "Beispiel Widget",
    "en.utf8": "Example Widget"
  },
  "description": {
    "de.utf8": "Dies ist ein Beispiel-Widget.",
    "en.utf8": "This is an example widget."
  },
  "size": {
    "minRows": 3,
    "minCols": 6
  },
  "defaultSettings": {
    "property1": "default1",
    "property2": 2
  },
  "svgFile": "/data/WebUI/svg/example.svg",
  "componentSettings": {
    "styles": [],
    "scripts": ["/data/WebUI/widgets-v2/example.widget"],
    "tagname": "wui-example",
    "jsonSchema": {
      "type": "object",
      "properties": {
        "property1": {
          "type": "string"
        },
        "property2": {
          "type": "number"
        }
      }
    },
    "uiSchema": {
      "type": "object",
      "elements": [
        {
          "type": "WuiLayout",
          "label": "WUI_Settings.Area.Content",
          "options": {
            "collapsible": "open",
            "showFirstElementAsHeader": false,
            "noborder": true
          },
          "elements": [
            {
              "type": "Control",
              "scope": "#/properties/property1",
              "label": {
                "de.utf8": "Beispiel-Property 1",
                "en.utf8": "Example Property 1"
              }
            }
          ]
        },
        {
          "type": "WuiLayout",
          "label": "WUI_Settings.Area.Formatting",
          "options": {
            "collapsible": true,
            "showFirstElementAsHeader": false,
            "noborder": true
          },
          "elements": [
            {
              "type": "Control",
              "scope": "#/properties/property2",
              "label": {
                "de.utf8": "Beispiel-Property 2",
                "en.utf8": "Example Property 2"
              },
              "options": {
                "inputType": "number"
              }
            }
          ]
        }
      ]
    }
  }
}

Full example for retrieving historical data from OA

This example forwards a series array of objects containing value, name, unit and format and a separate property2 property to the ui element. For value so called historical data is received, providing an object of arrays for values, timestamps, last, min and max. The timerange is set to 1h and the context is instructed to compress the received values instead of retrieving all values. The context is also configured in a way, to react to events by providing the dpSet configurations. This will automatically set the value of the custom event to the selected datapoint. The event name can be changed for each series individually. It is also important to add the dpSet property to the list of properties in the jsonSchema.

{
  "types": ["int", "float", "long", "uint", "ulong"],
  "widgetType": "example",
  "label": {
    "de.utf8": "Beispiel Archiv Widget",
    "en.utf8": "Example Archive Widget"
  },
  "description": {
    "de.utf8": "Dies ist ein Beispiel-Widget.",
    "en.utf8": "This is an example widget."
  },
  "size": {
    "minRows": 3,
    "minCols": 6
  },
  "defaultSettings": {
    "series": {
      "context": "array",
      "config": [
        {
          "context": "group",
          "datapoint": {
            "context": "data-point",
            "config": {
              "definedConfigs": ["value", "name", "unit", "format"],
              "fetchMethod": "historic",
              "historic": {
                "sTimeRange": "5m"
              },
              "dpSet": {
                "validate": true,
                "customEvent": true,
                "event": "change"
              }
            }
          }
        }
      ]
    },
    "property2": 2
  },
  "svgFile": "/data/WebUI/svg/example.svg",
  "componentSettings": {
    "styles": [],
    "scripts": ["/data/WebUI/widgets-v2/example.widget"],
    "tagname": "wui-example",
    "jsonSchema": {
      "type": "object",
      "properties": {
        "series": {
          "type": "array",
          "items": {
            "type": "object",
            "properties": {
              "value": {
                "type": "object",
                "properties": {
                  "values": {
                    "type": "array"
                  },
                  "timestamps": {
                    "type": "array"
                  },
                  "last": {
                    "type": "array"
                  },
                  "min": {
                    "type": "array"
                  },
                  "max": {
                    "type": "array"
                  }
                }
              },
              "name": {
                "type": "string"
              },
              "format": {
                "type": "string"
              },
              "unit": {
                "type": "string"
              },
              "dpSet": {
                "type": "number"
              }
            }
          }
        },
        "property2": {
          "type": "number"
        }
      }
    },
    "uiSchema": {
      "type": "object",
      "elements": [
        {
          "type": "WuiLayout",
          "label": "WUI_Settings.Area.Content",
          "options": {
            "collapsible": "open",
            "showFirstElementAsHeader": false,
            "noborder": true
          },
          "elements": [
            {
              "type": "SeriesGroup",
              "scope": "#/properties/series",
              "label": "WUI_Settings.GeneralLabels.Series",
              "options": {
                "itemLabel": {
                  "de.utf8": "Serie",
                  "en.utf8": "Series"
                }
              },
              "elements": [
                {
                  "type": "DataPointControl",
                  "scope": "#/properties/datapoint",
                  "label": "WUI_Settings.Area.Datapoint",
                  "options": {
                    "fetchMethod": "historic",
                    "historic": {
                      "compress": true
                    },
                    "dpSet": {
                      "validate": true,
                      "customEvent": true
                    }
                  }
                }
              ]
            }
          ]
        },
        {
          "type": "WuiLayout",
          "label": "WUI_Settings.Area.Formatting",
          "options": {
            "collapsible": true,
            "showFirstElementAsHeader": false,
            "noborder": true
          },
          "elements": [
            {
              "type": "Control",
              "scope": "#/properties/property2",
              "label": {
                "de.utf8": "Beispiel-Property 2",
                "en.utf8": "Example Property 2"
              },
              "options": {
                "inputType": "number"
              }
            }
          ]
        }
      ]
    }
  }
}