Editor

The widget can be used to show any kind of text like JSON or scripting code.

Model

{
    "type": "editor",
    "actions": {},
    "content": {},
    "contentToCompare" : {},
    "dataSource": {},
    "editorOptions": {},
    "language" : "json",
    "name": "Editor",
    "schema": {},
    "toolbars": {}
}
Name Description

actions

Optional property used to implement action pipelines for selected trigger events

content

Primary editor content. This can be either text or JSON.

contentToCompare

Setting this property activates the editor’s compare functionality which shows the difference between the content and the contentToCompare side by side.

dataSource

Optional property, used to retrieve data from the system

editorOptions

Optional configuration to define styling for the editor. See Editor Options for all the available editor options.

When the editor is used to compare content, either of the panels can be configured to be editable or read-only by setting the readOnly and originalEditable options as follows:

Editable Panels readOnly originalEditable

Both panels

false

true

Neither panel

true

false

Only the content

true

true

Only the contentToCompare

false

false

id

Unique widget identifier

language

The language setting is used to activate the editor’s syntax coloring and checking. Supported languages:

  • json Default

  • lua

  • markdown

  • txt

  • xml

schema

This property is used when the language is set to "json". It must be assigned a valid JSON Schema definition, which is used by the editor to perform code-completion and schema validation.

toolbars

Optional configuration to add, customise and hide toolbars. See the toolbars section below.

Options

In addition to the generic widget options, the Editor widget supports the following additional options.

{
    "options": {
        "showLanguageSelection": true,
        "showToolbar": false
    }
}
Name Description

showLanguageSelection

Determines whether the editor language selector is displayed in the toolbar. If the showToolbar property is set to false, the editor language will not be displayed regardless of the value assigned to the showLanguageSelection option. Default is false

showToolbar

Configures if the editor widget toolbar is displayed.

Actions

The actions property of the editor widget can be used to invoke action pipelines for specific action hooks.

Action Hooks

In addition to the generic widget actions, the editor widget supports the following action hooks:

onContentChange

The onContentChange action hook is invoked every time the textual content of the widget is updated. It can be used together with the send action pipeline to send the content to another widget.

{
    "onContentChange": [
        {
            "type": "send",
            "to": "Place here the ID of the widget"
        }
    ]
}

Receive messages (Send Topics)

The editor widget can receive messages from other widgets. This widget only supports the generic refresh and update topics.

DataSource

If the dataSource property is defined as an object, the message returned by the data is usually determined by the type field.

If the dataSource type field does not match the widget type, then the content and contentToCompare properties are checked for in the payload. In this scenario, there are three cases to consider:

  • Both the content and contentToCompare properties are defined in the payload: The content and contentToCompare properties are merged into the model

  • Only the content property is defined in the payload: The content property is merged into the model

  • Only the contentToCompare property is defined in the payload: The contentToCompare property is merged with the model and the whole payload is assigned to the content property.

If either the content or contentToCompare fields are string values, then the fields may be parsed as a JSON.
DataSource Pipeline

DataSource Examples

This section provides examples illustrating the merge behavior of the message payload returned by the dataSource on the Editor widget.

Message payload defined as an object where the type field matches the widget type

Consider the following example where the message payload, defined as an object, returned by the dataSource on the editor widget contains a type field that matches the widget type. In this case, any matching model properties from the payload will be merged to the model, namely captionBar, content and editorOptions in this example.

{
    "payload": {
        "type": "editor",
        "captionBar": {
            "hidden": true
        },
        "content": {
            "name": "FC4711",
            "quality": "Good",
            "timestamp": 1699959561632,
            "value": 52.491416931152344
        },
        "editorOptions": {
            "fontSize": 16,
            "fontWeight": "bold",
            "readOnly": true
        }
    }
}

Message payload defined as an object where the type does not match the widget type but the content and/or contentToCompare field is specified

In this example, the message payload returned by the dataSource is defined as an object but does not contain a type property. In this scenario, if the message payload contains a content and/or contentToCompare field, these will be the only fields that will be merged to the model.

{
    "payload": {
        "captionBar": false,
        "content": {
            "name": "FC4711",
            "quality": "Good",
            "timestamp": 1699959561632,
            "value": 52.491416931152344
        },
        "contentToCompare": {
            "name": "QC4711",
            "quality": "Good",
            "timestamp": 1700231863632,
            "value": 43.959320068359375
        }
    }
}

Message payload defined as an object where the type field does not match the widget type and the content and contentToCompare fields are not defined

If the dataSource returns the following message payload, where the type does not match the widget type and the content and contentToCompare fields are not defined, then the content of the payload is merged to the content property in the model.

{
    "payload": {
        "type": "messagedebugger",
        "editorOptions": {
            "fontSize": 16,
            "fontWeight": "bold",
            "readOnly": true
        },
        "actions": {
            "onContentChange": {
                "type": "notify"
            }
        }
    }
}

Similarly, if the dataSource is defined as an array or a string, then the content of the payload is merged to the content property in the model.

Toolbars

The editor widget can have one or more custom toolbars. Additional tools can be added to the default toolbars. To do this, see the toolbars section in the widget documentation.

Tools

The following tools have a default implementation on the editor widget:

Icon Name Description

Editor Language Menu

Editor Language

This tool can be used to change the language of the editor widget. Default is JSON.

JSON Format

Format

This tool can be used to format the text in the editor if required.

Refresh Btn

Refresh

Refreshes the widget

Spacer

This tool is used to specify the alignment of tools in the widget toolbar.

Update Behavior

The update logic of this widget accepts a payload, which is a string or a JSON element. In case the value of the payload is a string, the value will be used to update the content in the model. When the language in the model model is set to json, the widget tries to convert the string into a JSON element. In case the JSON conversion fails, the initial payload string value will be used to update the content in the model.

When the payload is a JSON object, the widget uses the fields content and language to update the fields in the model accordingly. In case the payload does not contain the content field, the JSON object in the payload will be used to update the content in the model. When the content field in the payload is a string and the language field in the model or payload is set to json, the widget tries to convert the value of the content in the payload to a JSON element.