# Listening and clearing

* **Listening and clearing** These are mechanisms that enable defining the dynamic behavior of form components and the variables associated with them. Thanks to them, changes in one field can automatically affect other fields, components, or values in the form.
* **Listening Attribute (ListeningOn)** – allows you to specify which other components or variables a given component is “listening” to. This means that a change in the value of the specified component or variable will trigger a response from the listening component – e.g. recalculating its value or refreshing its visibility.
* **Field Clearing Attribute (ClearOn)** – defines which changes in other components or variables will cause the given component’s value to be automatically cleared (removed). In other words, if the specified related field or variable changes its value, the component with clearing enabled will delete its own current value (clear the field).
* Both of the above attributes are available in the section **Interactions** of the selected component’s properties panel. Configuration is done using a special window – click the button **List** next to the field *Listening* or *Clearing a field*, which will open a popup for editing these settings.

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FW6KDReyUiMcyl4yjSN7L%2Fimage.png?alt=media&#x26;token=c478deaa-bfef-4d60-9948-42281e7cffff" alt=""><figcaption><p><em><strong>Figure 1.</strong> "Interactions" section</em></p></figcaption></figure>

* In the **Change-triggering elements** window (opened with the button **List**) a list of components that the given control listens to is displayed. The list can be narrowed using the filter field (**Filter...**) at the top of the window. Next to each added item there is a trash icon – it appears on hover – allowing you to remove that item from the list of listened-to elements.

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FWyuXkBpx0bs4f4NvKqU3%2Fimage.png?alt=media&#x26;token=f781cb03-c7fe-47b4-9670-b5cc7728be49" alt=""><figcaption><p><em><strong>Figure 2.</strong> Window for selecting elements to listen to</em></p></figcaption></figure>

* To add a new element to listen to, use the **Add MID** field at the bottom of the window. This field suggests all available identifiers (MID/ID) of components and variables that can be listened to. Select the desired component from the suggestion list (by clicking it or by confirming with Enter). The selected element will be added to the list, and the description of the Listening attribute in the properties panel will show the number of listened-to elements (e.g. *Listens to: 1*).

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2F7AZ1eGtww5vCbm4nSEXU%2Fimage.png?alt=media&#x26;token=93c89b19-1616-4413-a2a4-aa939a3e30e5" alt=""><figcaption><p><em><strong>Figure 3.</strong> Pointing to the element to add</em></p></figcaption></figure>

* *Note:* If validators, services, or conditions (visibility, activity, requiredness) used in the component’s logic refer to values of other fields or variables, you should **correctly set Listening (and possibly Field Clearing)** for these dependencies. Otherwise, changes in the related fields will not be automatically taken into account by the given component.

### Usage examples

* **Automatic field recalculation** – A calculated field (e.g. the sum of two values) listens for changes in the source fields. If the user changes the value in one of the component fields, the sum field will automatically recalculate its value.
* **Dynamic section visibility** – A form section displayed conditionally (e.g. additional details shown after checking the *"Show more"*&#x63;heckbox) should listen to that checkbox. This way, changing the checkbox state will immediately re-evaluate the condition and hide or show the section according to its definition.
* **Resetting the value of a dependent field** – A field that should be cleared after another selection changes uses the *Clearing a field*attribute. For example, the field *"Car model"* can listen to the field *"Car make"* and have clearing set in relation to it. Changing the make will automatically remove the previously selected model value so that the user chooses a new model matching the changed make.
* **Refreshing the document list after changing the page** – The *Document list* component (DocumentList) can listen to the variable `currentPageMid` (the identifier of the current form page). This causes the component to reload/refresh its data when moving to another page of the request. This helps avoid a situation where an outdated set of documents (e.g. prints) is displayed after changing the page.

### FAQ

* **Q:** How do the attributes *Listening* and *Clearing a field*?\
  **A:** *Listening* cause the component to react (recalculate or refresh) in response to a change in the value of a specified other field or variable. On the other hand, *Clearing a field* causes the component’s current value to be automatically erased when the indicated related field or variable changes.
* **Q:** Do I need to set listening if my component uses a condition or validator referring to another field?\
  **A:** Yes. If the component’s logic (e.g. a visibility or requiredness condition, validator script, etc.) uses the value of another field or variable, then the component **must listen** to that element. Otherwise, changes to that field’s value will not be taken into account immediately – the condition or validation will not react to the changed data.
* **Q:** I set the attribute *Clearing a field*, but the field does not clear its value when the related component changes – why?\
  **A:** Most likely the listening attribute is missing. For field clearing to work properly, the target component must **also listen** to the specified change-triggering element. In other words, in the component configuration you need to add *Listening* **together with** *Field Clearing* referring to the same component whose change is supposed to clear the value.
* **Q:** How do I add or remove an element from the listening list for a given component?\
  **A:** You need to open the listening configuration window – in the properties panel, click **List** next to the attribute *Listening*. In the **Change-triggering elements** window, add a new element using the **Add MID** field (by typing or selecting the appropriate component/variable from the list and confirming with Enter). To remove an element from the listening list, simply hover over its name in this window and click the trash icon next to it.
* **Q:** What elements can be listened to?\
  **A:** A form component can listen to changes in **other components** (form fields) and to **session variables** associated with the form. During configuration, the listening window provides a complete list of the IDs/MIDs of all fields and variables that can be selected as listening sources.