# Controls Manage View

The **Edit Control Element** window allows users to modify a control element's settings. Here's a breakdown of its components.

<figure><img src="https://3041611997-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBfCYTTMdizqTrgCRWgKD%2Fuploads%2FmJpB59zjs82IZ45UZdT6%2FControls_Manage_View.png?alt=media&#x26;token=7609dcc9-a3b1-412d-b129-db3610eebb3d" alt=""><figcaption><p>Controls Manage View</p></figcaption></figure>

When the user clicks the **Manage** button, a new window titled **"Edit Control Element"** opens. This view allows users to modify an existing control element's details and configuration.

### **Overview**

* The **Edit Control Element** view is pre-populated with the existing details of the selected control.
* Users can modify the following fields: **Element Name**, **Site**, **Control Output**, and any dynamic fields related to the chosen output type (Native, MQTT, or HTTP).
* Sensitive fields, like the **MQTT Password**, are obscured for security.

### **Mandatory Fields**

These fields are required for the control element and are marked with a **star (\*).**

<table><thead><tr><th width="193">Field Name</th><th>Description</th></tr></thead><tbody><tr><td><strong>Element Name</strong>*</td><td>The name of the control element, pre-filled with the current value but editable.</td></tr><tr><td><strong>Site</strong>*</td><td>A dropdown menu to select or update the location associated with the control element.</td></tr><tr><td><strong>Control Output</strong>*</td><td>Displays the current communication method (Native, MQTT, or HTTP). Users can switch to another method.</td></tr></tbody></table>

### **Control Output Options**

The behaviour of the form changes dynamically based on the selected **Control Output** type.

### **1. Native**

* Displays the basic form with no additional fields.
* Editable fields:
  * **Element Name**
  * **Site**
  * **Sensor**

### **2. MQTT**

* If **MQTT** is selected, additional fields specific to MQTT configuration are displayed.
* **Password Field Behaviour**: The MQTT password is displayed as obscured input (e.g., "•••••") for security. Users can delete and re-enter a new password if needed.

<table><thead><tr><th width="203">Field Name</th><th>Description</th></tr></thead><tbody><tr><td><strong>Topic</strong>*</td><td>The MQTT topic used for publishing messages. Pre-filled with the existing value, but editable.</td></tr><tr><td><strong>Message (ON)</strong>*</td><td>The payload sent when the control is turned <strong>ON</strong>.</td></tr><tr><td><strong>Message (OFF)</strong>*</td><td>The payload sent when the control is turned <strong>OFF</strong>.</td></tr><tr><td><strong>User ID</strong>*</td><td>The username used to authenticate with the MQTT server.</td></tr><tr><td><strong>Password</strong>*</td><td>Displays the password as obscured input (e.g., "•••••"). Users can modify this if necessary.</td></tr><tr><td><strong>Server</strong>*</td><td>The MQTT server’s URL or IP address, pre-filled with the current value but editable.</td></tr></tbody></table>

### **3. HTTP**

* If **HTTP** is selected, additional fields specific to HTTP communication are displayed, along with body format options.

<table><thead><tr><th width="212">Field Name</th><th>Description</th></tr></thead><tbody><tr><td><strong>Body Format</strong></td><td>Options include <strong>x-www-form-URL encoded</strong>, <strong>raw</strong>, and <strong>binary</strong>. The current selection is pre-filled.</td></tr><tr><td><strong>URL</strong>*</td><td>The endpoint URL for HTTP communication. Pre-filled with the current value but editable.</td></tr><tr><td><strong>Message (ON)</strong>*</td><td>The payload sent when the control is turned <strong>ON</strong>.</td></tr><tr><td><strong>Message (OFF)</strong>*</td><td>The payload sent when the control is turned <strong>OFF</strong>.</td></tr></tbody></table>

### **Action Buttons**

Located at the bottom-right corner, these buttons allow users to save changes or cancel edits.

<table><thead><tr><th width="195">Button Name</th><th>Description</th></tr></thead><tbody><tr><td><strong>Cancel</strong></td><td>Discards all changes and exits the view without saving.</td></tr><tr><td><strong>Save</strong></td><td>Saves the updated control element configuration.</td></tr></tbody></table>

### **Dynamic Behaviour Summary**

<table><thead><tr><th width="183">Control Output</th><th>Additional Fields Displayed</th></tr></thead><tbody><tr><td><strong>Native</strong></td><td>No additional fields are displayed.</td></tr><tr><td><strong>MQTT</strong></td><td>Fields for <strong>Topic</strong>, <strong>Messages (ON/OFF)</strong>, <strong>User ID</strong>, <strong>Password</strong>, and <strong>Server</strong> appear. <strong>Password</strong> is obscured for security.</td></tr><tr><td><strong>HTTP</strong></td><td>Fields for <strong>Body Format</strong>, <strong>URL</strong>, and <strong>Messages (ON/OFF)</strong> appear.</td></tr></tbody></table>

### **Example Table: MQTT Password Behaviour**

<table><thead><tr><th width="215">Field Name</th><th width="247">Description</th><th>Behaviour</th></tr></thead><tbody><tr><td><strong>Password</strong>*</td><td>Used to authenticate with the MQTT server.</td><td>Obscured input (e.g., "•••••").</td></tr></tbody></table>

### **Conclusion**

The **Edit Control Element** view provides a streamlined interface for updating control configurations. With dynamic form behaviour based on the **Control Output** type and security features like password obscuration, it ensures flexibility and data integrity while maintaining user-friendly operations.