Properties Edit Dialog

In this dialog, a user can configure the component`s behavior. The properties available in the edit dialog are described in this section. The <script> tag must have a text/html type to prevent the browser from treating it like common HTML and to provide appropriate syntax highlighting in the editor.

The tag's data-template-name should be set to the component`s type otherwise the editor won't be able to show appropriate content in the edit dialog.

The edit dialog should be intuitive and consistent with other components. For example, among all components` properties should be a Name field.

The edit dialog consists of a number of rows, each has its label and input.

• Each row described in a <div> tag with a form-row class.

• A row usually has a <label> (name of an editable component property) that contains an icon defined in <i> tag with class took from Font Awesome.

• The form element containing the property must have an id of node-input-<propertyname>. In the case of Configuration nodes, the id must be node-config-input-<property-name>.

• The <input> type can be either text for string/number properties or checkbox for boolean properties. Alternatively, a <select> element can be used if there is a restricted set of choices.

Buttons

To add a button to the edit dialogue use the <button> HTML tag with editor-button class.

Plain Button

Small Button

Toggle Button Group

Note: avoid whitespace between the <button> elements as the button-group span does not currently collapse whitespace properly. This will be addressed in the future.

To toggle the selected class on the active button, you will need to add code to the oneditprepare function to handle the events.

oneditprepare

Inputs

Plain HTML Input

Is done with <input> tag.

TypedInput String/Number/Boolean

HTML:

oneditprepare definition:

When the TypedInput can be set to multiple types, an extra component property is required to store information about the type. This is added to the edit dialog as a hidden <input>.

TypedInput JSON

HTML:

HTML

oneditprepare definition:

oneditprepare

TypedInput msg/flow/global

HTML:

HTML

oneditprepare definition:

oneditprepare

Multi-line Text Editor

A component may contain a multi-line text editor with syntax highlighting and errors check based on Ace web code editor.

Hover the error mark to see the error description.

In the following example, the component property that we will edit is called exampleText.

In your HTML, add a <div> placeholder for the editor. This must have the node-text-editor CSS class. You will also need to set a height on the element.

In the component’s oneditprepare function, the text editor is initialized using the APPS.editor.createEditor function:

The oneditsave and oneditcancel functions are also needed to get the value back from the editor when the dialog is closed and ensure the editor is properly removed from the page.