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 aform-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 benode-config-input-<property-name>
.The
<input>
type can be eithertext
for string/number properties orcheckbox
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.
Inputs
Plain HTML Input
Is done with <input>
tag.
TypedInput String/Number/Boolean
HTML:
oneditprepare
definition:
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:
oneditprepare
definition:
oneditprepare
definition:TypedInput msg/flow/global
HTML:
oneditprepare
definition:
oneditprepare
definition: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.
Last updated