> For the complete documentation index, see [llms.txt](https://docs.aitheon.com/creators-studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.aitheon.com/creators-studio/new-component-creation-tutorial/component.ht/properties-edit-dialog.md).

# 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.

![](https://lh3.googleusercontent.com/tOpS3-5cSq1J-Gi6GyrfsUn0o1L99UerzWcAH3lHxVPS5o5nedVuek0yx32UTsdIA7M1Vh0K5l0449gP1DG6igB1dZU8MSg8Xwa5W4zleJcqXopU89joNXQmjpmmBjEcK89Edja9)

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](https://fontawesome.com/v4.7.0/icons/).
* 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&#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MUmRdi4prGlM6rvkWH9%2F-MUmYiK6T0v94LMvySPU%2F11pic.png?alt=media\&token=32f7d068-455c-4e39-a0a3-8ba8de0d04a2)

### Small Button&#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MUmRdi4prGlM6rvkWH9%2F-MUmYndeVCw_CuxcixOz%2F12pic.png?alt=media\&token=5afb7216-9e4e-4f59-be5a-1a867dab0879)

### Toggle Button Group&#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MUmRdi4prGlM6rvkWH9%2F-MUmYsBfUAinsbIDEvMS%2F13pic.png?alt=media\&token=18133d72-a45c-4eb7-b781-545e8b9fe303)

{% hint style="info" %}
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.
{% endhint %}

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

![oneditprepare](https://lh5.googleusercontent.com/-ePo8EVlM0SgAW6PiAurBhyxytb_myBWEHDZKrvBiTTa9qdNKDUeC902dvMeDt2yxF0S-giiEPfh3RvEGhueRYLl3_OaNH6XP6H9x3z7W0Mmv1WdS3hrU3dS2raqrOF5-OIBwN-1)

## Inputs

### Plain HTML Input

![](https://lh5.googleusercontent.com/gISoszsZky91-mOwf6g5cwgFlgDBKtQUKb7DP7ZEz_xEG-SC5lWJQc6WO0-nLjThw7qr6BLab_XTDZg58cxw8J2IVV1Mc9zEHJEp4h6aKRk_DWChp5HiDhIXmAUhaJv0bgtNiMfw)

Is done with **`<input>`** tag.

![](https://lh6.googleusercontent.com/01lQdY0YqlH2qJCXDTQfBE7m29xeCVyLYU9m_1xONqE_ZPbKIOqn6HIP8PyDPJN_NpygACkjnaaIQM6NQExsKKfco9ZrQtUyoGAtZQsDl16srwQnluQVhNBletANVl8mq1ScMi0f)

### TypedInput String/Number/Boolean

#### HTML:

![](https://lh4.googleusercontent.com/NOSw2SfC_eGCaVHWE4SceO0dRa791ZrN431ukrVSoZzLRDtz7jlW7NjkQpwIzDRrixgLNRRtTU6s4i-hYDKBOjwfeH9ZmyfUzlrA5qANyO9lyXYzETdsCpLS4qywiRJmEBvhudi2)

#### `oneditprepare` definition:

![](https://lh5.googleusercontent.com/6B3JEBjxJH3vb8kkzEZbdmN3wX9KeNoIQ0aaY-ui-dvrGEx08FszYJ81pCGAdzjZiueppE6dwlvOe3M2fN-HXvxqZ0i455p5HqudQino64J8dHeePx2BLG5JyXm7ChY4dyMdysp8)

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>`**.<br>

### TypedInput JSON<br>

![](https://lh5.googleusercontent.com/h9sTB2zqA4nnt0QNKXootHFvrJtf38yLGM1wUp9-xYdGAw0d9nzBnrhHp9nXs8zLJh9Nj_bLR80BCfhxCYYDPwjo67s_uxmEr-0IiIi1ed0rVZNTTqbIeK8CV8-89FVikDpYf7wR)

#### **HTML**:

![HTML](https://lh5.googleusercontent.com/PeD2m3N6huoJGzLiORWtGfgVzMtv7MONhmlLlWTHWf-ZFJPckkFzUoYdH70VgRIXs2rmVqj2-GrBXlBRhLK2-yNIGlH5_dRuPk4KEu-qKVWAFq3EoDilF-1c1ysP9K3x-vFsaD_Y)

#### **`oneditprepare`** definition:

![oneditprepare](https://lh3.googleusercontent.com/6MlW2wI_XhVnp2ppRRNlkomC5Nkx_Vrjk0zAobh_CnermBFmB9lISYeYG8eqAoK3zG9eKHF7Gg2kDxqMNJDXLywuNzJiZ-9suV9wJOpXj8ZuKxgWcOsaJ3d1lKjpfm7oTLzlHRqC)

### TypedInput msg/flow/global

![](https://lh5.googleusercontent.com/30OaBCM647xn8s3sT-gD6hgLjqTbM98uz_eU19nsSE445YxxeIoX855-upyNjnufoRvRbf_oBiQLOViWqqtCRGYGzqVRU17NoRzY717Q_dH-_0yCtFvE54eIcIls6aRc3q0GbPj2)

#### HTML:

![HTML](https://lh5.googleusercontent.com/S9VTD7SrkkA0kn3Oz_6TiHA3k1UdhG106QS1GtymX9M9Zx-Q1TWT4mFjOfU8aULpqyNiIpYbMt3DZPprTTfsGZt0LtcmCxYWN27-ppxUArXUahZIoeIhYuu5gQDSo4OOD6bw2OtK)

#### **`oneditprepare`** definition:

![oneditprepare](https://lh5.googleusercontent.com/d-xq-xqQLXbuGc3R5h7WuB-MY7qDx3PwAin0g-5X5cEf6zxFlMzezAftOtpK9ezeze4vC4w-iqjtSMqo3u5hjfAZ8MsVGL-9t4RkC_SR_dgQGZ71b4GXwQGt9SJ1CZ6XgiX6424H)

## 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.&#x20;

![](https://lh6.googleusercontent.com/ekBuQbXmK119RzLiFabrFXvjeGXMhqdypPP32MdsckgI8M-sMdNuSxvG2UrZANiffYK4ErtNKDodm1egHhXUnUCctdwFxT6zWI_lVvyZcvRzq7XkLmV1ZVxRQWPvan3Xd68SjG-N)

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.

![](https://lh3.googleusercontent.com/eat7kv8xkypZtYKuw3XITlTlvh_zYqSGKN9xsTZHaEvh4V2sfOcslvRYQefkWAz9E-GIK_9neDxE8SX3qQWIuvObIEOGPYXJvlMNLkm735fv0rvEB9iO3eV6CTJGgq75b_QN5YWy)

In the component’s **`oneditprepare`** function, the text editor is initialized using the **`APPS.editor.createEditor`** function:&#x20;

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MUmRdi4prGlM6rvkWH9%2F-MUm_xmBx8GAuYvNV8O8%2F14pic.png?alt=media\&token=5b4ef313-ad0e-47ec-a137-dd16890b4abf)

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.

![](https://lh6.googleusercontent.com/FGJz62PMXfa4iVxn8IPCJGALcHJEKfDxuxCM6qSvM6uqpUSPjVHFuFIr7wjyuK7DXMfCwgXQoRODN6PXVvwEAQG2US-UMOL_OEoLJcVV7CnkmhWFkthWbg1o2gtNtWIbjt_v2QOy)