---
title: "How to: Build an On Watch Checker Extension"
slug: "how-to-build-an-on-watch-checker-extension"
description: "Build an On Watch Checker Extension to identify resource-intensive components and verify functionality with a test module in Unqork applications."
updated: 2025-10-28T13:46:48Z
published: 2025-10-28T13:46:48Z
canonical: "docs.unqork.io/how-to-build-an-on-watch-checker-extension"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# How to: Build an On Watch Checker Extension

In this how-to guide, you’ll build an [extension](/v1/docs/introduction-to-extensions) that checks a module for logic components using the **On Watch** setting. Components using **On Watch** are resource-intensive and might not meet an organization’s best practices. You’ll also test the extension to verify it performs its function using a test module.

> Discover more about extensions in our [Introduction to Extensions](/v1/docs/introduction-to-extensions) article.

## Build an On Watch Checker Extension

The following process is required to build an **On Watch** checker extension:

1. Create and tag an extension module.
2. Configure the extension module to look for components using the **On Watch** setting.
3. Verify the extension’s function in a test module.

## Create and Tag an Extension Module

While not required, extension modules can be built in their own application, or in an existing application. For this example, create an extension module in an existing application.

To create an extension module from the Application page:

1. Click **+ Create New**.
2. Select **Module**. The Create Module modal displays.
3. In the **Module Name** field, enter a name for your module. For example, `On Watch Checker Extension` . The **Module Path** field populates using the Module Name field’s value.
4. From the **Module Type** drop-down, select **Front-End**.
5. In the **Module Description** field, enter `Checks for logic components using the On Watch setting.` This field display’s in the Extension’s **View Details** modal.
6. Click the **Tags** field, enter or select `extension`. After creating the module, this tag converts the module to an extension module. ![Module creation interface displaying description, tags, and data models for logic components.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/onWatchCreateModule.webp?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A10Z&se=2026-11-08T19%3A05%3A10Z&sr=c&sp=r&sig=VA93G%2BBS3FNIxk7Aa4NEp05Vmp5C%2BUkDity%2BZcAjjwA%3D)
7. Click **Create**. A new page displays the extension module.

The module now functions as an extension and becomes available in the [Module Extension Drawer](/v1/docs/module-extensions).

## Configure the Extension Module

Like standard Unqork Front-End modules, an extension module serves as the front-end UI for your extension. This example demonstrates building the UI layout. However, Creators can use the [Extension Starter Kit Template’s](/v1/docs/extension-start-kit-template) **Extension Layout Example** module, which includes the minimum component layout required to display an extension module.

### Configure the Extension Design Layout

The extension design layout uses two [Field Group](/v1/docs/field-group-component) components. One contains the extension’s content, where input and logic components perform their function. The second contains the buttons for triggering the extension’s functions or closing the extension.

1. In the Module Builder, drag and drop a **Field Group** component onto the canvas.
2. In the **Property ID** field, enter `fgExtensionContent`.
3. In the **Custom CSS Class** field, enter `UD_ModalDialog_Content`. This value styles the extension to match Unqork’s UDesigner style.
4. Click **Save Component**.
5. Drag and drop a second **Field Group** component on the canvas, placing it below the `fgExtensionContent` **Field Group** component.
6. In the **Property ID** field, enter `fgExtensionActions`.
7. In the **Custom CSS Class** field, enter `UD_ModalDialog_Actions`. This value styles the extension to match Unqork’s UDesigner style.
8. Click **Save Component**.

### Configure the `htmlOnWatch` HTML Element Component

Use an [HTML Element](/v1/docs/html-element-component) component to provide a simple description of what the extension does when the Creator runs it.

1. From the Module Builder, drag and drop an **HTML Element** component onto the canvas, placing it inside the `fgExtensionContent` **Field Group** component.
2. In the **Property ID** field, enter `htmlOnWatch`.
3. In the **Content** field, enter `Check for components using "On Watch" trigger.`.
4. Click **Save Component**.

### Configure the `componentsIn` Hidden Component

The [Hidden](/v1/docs/hidden-component) component stores the component data retrieved from a module that’s currently on the canvas. Configure its Property ID to use the `componentsIn` reserved value. This value is utilized by UDesigner extensions to store component data retrieved from a module that’s currently on the canvas.

1. Drop and drop a **Hidden** component onto the canvas, placing it below the `htmlOnWatch` **HTML element** component.
2. In the **Property ID** field, enter `componentsIn`.
3. Click **Save Component**.

### Configure the `componentsOnWatch` Hidden Component

Configure a hidden component to receive an array of component Property IDs that use the On Watch setting.

1. Drop and drop a **Hidden** component onto the canvas, placing it below the `componentsIn` **Hidden** component.
2. In the **Property ID** and **Label Text** fields, enter `componentsOnWatch`.
3. Click **Save Component**.

### Configure the `htmlOnWatch2` HTML Element Component

Create a UI header that explains the extension’s results to the end-user.

1. Drag and drop an **HTML Element** component onto the canvas, placing it below the `componentsOnWatch` **Hidden** component.
2. In the **Property ID** field, enter `htmlOnWatch2`.
3. In the **Content** field, enter `Components on watch:`. This value acts as the header for the list that displays **On Watch** components in a module.
4. In the **Tag** field, enter `h2`.
5. Click **Save Component**.

### Configure the `htmlComponentsOnWatch` HTML Element Component

This component is purposely left empty. After the extension’s executes its logic, any **On Watch** components display in this component’s content field.

1. Drag and drop an **HTML Element** component onto the canvas, placing it below the `componentsOnWatch` **Hidden** component.
2. In the **Property ID** field, enter `htmlComponentsOnWatch`.
3. Click **Save Component**.

### Configure the `dwfGetOnWatchComponents` Data Workflow Component

Use a [Data Workflow](/v1/docs/data-workflow-component) component to define the logic that retrieves component data from the `componentsIn` **Hidden** component and filters it for components that use the **On Watch** setting.

1. Drag and drop a **Data Workflow** component onto the canvas, placing it below the `componentsIn` **Hidden** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `dwfGetOnWatchComponents`.
3. Drop and drop an **Input** operator onto the Data Workflow canvas.
4. Configure the operator's **Info** window as follows:

| Info |
| --- |
| Category | Input |
| Component | componentsIn |
| Required | Yes |
| Source | Default |
5. Drag and drop a **Filter** operator onto the Data Workflow canvas.
6. Configure the operator's **Info** window as follows:

| Info |
| --- |
| Category | Filter |
| Label | triggerType="watch" |
| Do Not Sanitize Formula | ![checkedDummy.jpg](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/checkedDummy(1).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A10Z&se=2026-11-08T19%3A05%3A10Z&sr=c&sp=r&sig=VA93G%2BBS3FNIxk7Aa4NEp05Vmp5C%2BUkDity%2BZcAjjwA%3D) (**Checked**). |
| Preserve Argument Type | ☐ (**Unchecked**) |
| Expression | triggerType="watch" |
7. Connect the output port (right) of the `componentsIn` **I****nput** operator to the input port (left) of the `triggerType="watch"` **Filter** operator.
8. Drag and drop a **Size** operator onto the Data Workflow canvas.
9. Connect the output port (right) of the `componentsIn` **I****nput** operator to the input port (left) of the **Size** operator.
10. Drag and drop a **Decision** operator onto the Data Workflow canvas.
11. Configure the operator's **Info** window as follows:

| Info |
| --- |
| Category | Decision |
| Input List |  |
| Preserve Argument Type | ☐ (**Unchecked**) |
| Condition | _arg>0 |
12. Connect the output port (right) of the `triggerType="watch"` **Filter** operator to the input port (left) of the `_arg>0` **Decision** operator.
13. Connect the output port (right) of the **Size** operator to the argument port (top) of the `_arg>0` **Decision** operator.
14. Drag and drop a **Set Outputs** operator onto the Data Workflow canvas.
15. Configure the operator's **Info** window as follows:

| Info |
| --- |
| Category | Set Outputs |
| Component 1 | htmlComponentsOnWatch |
| Component 2 |  |
| Component 3 |  |
| Component 4 |  |
| Component 5 |  |
| Action | content |
| setValue | No components using On Watch trigger. |
16. Connect the bottom output port (right) of the `_arg>0` **Decision** operator to the input port (left) of the `htmlComponentsOnWatch` **Set Outputs** operator.
17. Drag and drop a **Col2Array** operator onto the Data Workflow canvas.
18. Configure the operator's **Info** window as follows:

| Info |
| --- |
| Category | Col2Array |
| Label | key |
| Preserve Argument Type | ☐ (**Unchecked**) |
| Path | key |
| Default Value |  |
19. Connect the top output port (right) of the `_arg>0` **Decision** operator to the input port (left) of the `key` **Col2Array** operator.
20. Drag and drop an **Outputs** operator onto the Data Workflow canvas.
21. Configure the operator's **Info** window as follows:

| Info |
| --- |
| Category | Set Outputs |
| Component | componentsOnWatch |
| Action | value |
22. Connect the bottom output port (right) of the `key` **Col2Array** operator to the input port (left) of the `componentsOnWatch` **Outputs** operator.
23. Drag and drop a **Convert To Value** operator onto the Data Workflow canvas.
24. Configure the operator's **Info** window as follows:

| Info |
| --- |
| Category | Convert to Value |
| Label | Convert to String |
| Preserve Argument Type | ☐ (**Unchecked**) |
| Cast to | String |
25. Connect the bottom output port (right) of the `key` **Col2Array** operator to the input port (left) of the `Convert to String` **Convert Value** operator.
26. Drag and drop a **Set Outputs** operator onto the Data Workflow canvas.
27. Configure the operator's **Info** window as follows:

| Info |
| --- |
| Category | Set Outputs |
| Component 1 | htmlComponentsOnWatch |
| Component 2 |  |
| Component 3 |  |
| Component 4 |  |
| Component 5 |  |
| Action | content |
| setValue |  |

Your completed Data Workflow component looks like the following: ![Workflow diagram illustrating data processing steps for components on watch trigger.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dwfGetOnWatchComponents(1).webp?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A10Z&se=2026-11-08T19%3A05%3A10Z&sr=c&sp=r&sig=VA93G%2BBS3FNIxk7Aa4NEp05Vmp5C%2BUkDity%2BZcAjjwA%3D)
28. Click **Save Component**.

### Configure the `initGetComponentsFlat` Initializer Component

Use an [Initializer](/v1/docs/initializer-component) component to emit the extension required to retrieve the current module’s component data, and store it in the `componentsIn` **Hidden** component.

> Learn more about extension events in our [Introduction to Extensions](/v1/docs/introduction-to-extensions) article.

1. Drag and drop an **Initializer** component onto the canvas, placing it above the `componentsIn` **Hidden** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `initGetComponentsFlat`.
3. In the **Outputs** table, enter the following:

| # | Source | Type | Value |
| --- | --- | --- | --- |
| 1 | componentsIn | vegaOperation | [{"name":"dataOut","type":"GET_PROPERTY","options":{"targetKey":["postEventTriggerKey"],"property":"value"}},{"type":"EMIT_EVENT","options":{"event":"EXTENSION_EVENT","payload":{"event":"EXTENSION_READY_FOR_COMPONENTS_FLAT","includeOperationContext":true}}}] |
| 2 | dwfGetOnWatchComponents | trigger | GO |
4. Click **Save Component**.

### Configure the `btnCloseExtension` Button Component

Configure the [Button](/v1/docs/button-component) componnent that closes the extension’s modal. This button mimics Unqork’s method used for closing modals.

1. Drop and drop a **Button** component onto the canvas, placing it inside the `fgExtensionActions` **Field Group** component.
2. In the **Property ID** field, enter `btnCloseExtension`.
3. In the **Label Text** field, enter `Close`.
4. Navigate to the **Actions** settings.
5. Set the **Action Type** to `Event`.
6. Next to **Events & Operations**, click **Edit**. The Events & Operations modal displays.
7. From the **Add Event** drop-down, enter or select `On Click`.
8. Click **+ Add Operation**.
9. From the Operation Type drop-down, enter or select **EMIT_EVENT**.
10. In the **Config** field, enter `{"targetKey":"","event":"EXTENSION_EVENT","payload":{"event":"EXTENSION_READY_TO_CLOSE"}}`.
11. Click **Save**.
12. Click **Close**.
13. Navigate to the **Advanced** settings.
14. In the **Custom CSS Styling** field, enter `dup-mod-cancel`.
15. Click **Save Component**.

### Configure the `btnGetComponentsOnWatch` Button Component

Finally, configure the button that triggers the `initGetComponentsFlat` **Initializer** component.

1. Drop and drop a **Button** component onto the canvas, placing it below the `btnCloseExtension` **Button** component.
2. In the **Property ID** field, enter `btnGetComponentsOnWatch`.
3. In the **Label Text** field, enter `Get Components on Watch`.
4. Navigate to the **Actions** settings.
5. From the **Action Type** drop-down, select **Event**.
6. In the **Triggers** field, enter or select `initGetComponentsFlat`.
7. Click **Save Component**.
8. **Save** your module.

Your module looks like the following:

![Interface displaying components for the 'On Watch' trigger in a software extension.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/onWatchCheckerExtensionModule.webp?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A10Z&se=2026-11-08T19%3A05%3A10Z&sr=c&sp=r&sig=VA93G%2BBS3FNIxk7Aa4NEp05Vmp5C%2BUkDity%2BZcAjjwA%3D)

## Test the Extension

Now that your extension module is tagged and configured, test it an an example module containing two logic components. One component is set to **On Watch**, and the other is set to **Manual**.

### Configure the Test Module

This section assumes you have created a new module for testing.

#### Configure the `initOnWatchTrigger` Initializer Component

Configure an initializer component to use the **On Watch** trigger. Because this component is only for testing, it will not perform any other actions.

1. In the Module Builder, drag and drop an **Initializer** component on the canvas.
2. In the **Property ID** and **Canvas Label Text** fields, enter `initOnWatchTrigger`.
3. From the **Trigger Type** drop-down, enter or select `Watch`.
4. Click **Save Component**.

#### Configure the `initmanualTrigger` Initializer Component

1. Drag and drop an **Initializer** component on the canvas.
2. In the **Property ID** and **Canvas Label Text** fields, enter `initmanualTrigger`.
3. Click **Save Component**.
4. **Save** your module.

Your test module canvas looks like the following:

![Components section showing initOnWatchTrigger and initmanualTrigger in a workspace interface.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/testExtensionModule.webp?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A10Z&se=2026-11-08T19%3A05%3A10Z&sr=c&sp=r&sig=VA93G%2BBS3FNIxk7Aa4NEp05Vmp5C%2BUkDity%2BZcAjjwA%3D)

### Open and Test the On Watch Extension

To test the extension:

1. In the Module Builder, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(33).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A10Z&se=2026-11-08T19%3A05%3A10Z&sr=c&sp=r&sig=VA93G%2BBS3FNIxk7Aa4NEp05Vmp5C%2BUkDity%2BZcAjjwA%3D) (**ellipsis**) button.
2. Click **Extensions**. The Extensions drawer displays.
3. From the **Extensions** list, navigate to the name of your extension. For example, **On Watch Checker Extension**.
4. Click **Run**. The extension modal displays.
5. Click **Get Components on Watch**.
6. Under **Components on watch:**, the `initOnWatchTrigger` **Initializer** component displays. [Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/onWatchExtensionExpressView.mp4?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A10Z&se=2026-11-08T19%3A05%3A10Z&sr=c&sp=r&sig=VA93G%2BBS3FNIxk7Aa4NEp05Vmp5C%2BUkDity%2BZcAjjwA%3D)

If the extension works as intended, then it’s ready to be used by Creators in the development of Unqork applications.

If the extension generates errors or is missing features:

1. Return to the extension module and review its contents.
2. If issues are found, update the module’s logic.
3. Save the module.
4. Repeat the [Open and Test the On Watch Extension](/v1/docs/how-to-build-an-on-watch-checker-extension#open-and-test-the-on-watch-extension) steps.

A modal is a window that appears on top of the content you are currently viewing.

The UI (user interface) is a device's end-user interaction and communication point. It can include display screens, keyboards, and mouse. It is also how a user interacts with your application.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

is a codeless and interoperable Unqork IDE (integrated development environment) with a new and improved user experience that allows for a seamless transition for all your applications. It features a modern user interface with new personalization, collaboration, and configuration experiences.

An array is a type of object that stores one or more data types. Data types supported in arrays include numbers, strings, and objects.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the .

The action performed by the button when selected.

Deteremines how the component triggers.

A UI (User Interface) Drawer is a layout panel that slides out from the side of the screen to display content. In UDesigner, components display their configuration panels in a drawer.

Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform.

## Related

- [Introduction to Extensions](/introduction-to-extensions.md)
- [Module Extensions Drawer](/module-extensions.md)