---
title: "Timer Component"
slug: "timer-component"
updated: 2025-12-04T19:36:13Z
published: 2025-12-04T19:36:13Z
canonical: "docs.unqork.io/timer-component"
---

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

# Timer Component

UDesignerClassic Designer

The **Timer component** lets you add time-based rules and logic to your application. For example, a [module](/v1/docs/what-is-a-module) could include a 10-minute timer for an end-user to confirm an order. If the end-user fails to confirm the order in 10 minutes, the order process resets. In this situation, the time limit might give the end-user a sense of urgency. Also, restarting an idle process could free up resources for other end-users.

Some other uses of the Timer component include:

- Ensuring an end-user spends enough time on a page.
- Limiting the amount of time an end-user can stay on a page.
- Automatically reloading a page when the timer expires.
- Detecting if an end-user becomes inactive.

Use the Timer component to trigger one or many [components](/v1/docs/module-builder-component-library) when it expires. For example, the Trigger setting fires a single component after the timer expires. You could also trigger other components using use a [Decisions](/v1/docs/decisions-component) component with a Micro Decision of -0, which triggers when the timer reaches 0.

> [!WARNING]
> Timer components placed inside a Panel component that acts as a pop-up in Express View triggers the Timer component twice, once when the modal opens and once when it closes.

> [!NOTE]
> [Server-side executed modules](/v1/docs/server-side-module-execution) do not support the Timer component. For example, if you create a workflow with Task modules, any reference from one module to another in that workflow where a Timer component exists will result in an error.

You'll find the Timer component in the [Data & Event Processing](/v1/docs/data-event-processing-components) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

## Display Settings

### Field Text

| Setting | Description |
| --- | --- |
| **Label Text** | Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. |

### Contextual Help

| Setting | Description |
| --- | --- |
| **Tooltip** | A short hint that displays when an end-user positions their cursor over the ![Questionmark Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Tooltip(17).jpg?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) (**Tooltip**) icon. Tooltips can display across more than one line. |
| **Helper Text** | A quick tip describing the expected value of an input field. Unlike a Tooltip, Helper Text stays visible under the input field and displays on a single line. |

### Default State Options

| Setting | Description |
| --- | --- |
| **Set Timer Duration** | Sets how long the timer runs in seconds. |
| **Timer Direction** | Determines if the timer **Counts Up** to the Timer Duration or **Counts Down** from the Timer Duration. |
| **Set Timer Format** | The [Moment.js](/v1/docs/manipulating-dates-with-momentjs) format for displaying the time remaining. To include words, surround them with square brackets. For example, [Time Remaining] mm:ss. |
| **Reset When User Activity is Detected** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) **(ON)**, the component keeps track of end-user's interaction with the screen. If activity is detected, the timer resets. As defined by this setting, activity includes mouse clicks and key presses on the currently focused browser page. Simply moving the mouse is not considered activity. When set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) **(OFF)**, the timer continues for its entire duration regardless of activity on the page. By default, setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) **(OFF)**. |

### Formatting

| Setting | Description |
| --- | --- |
| **Hide Label** | Setting Hide Label to **(ON)** hides Label Text from displaying in Express View. Your Label Text still displays in the Module Builder. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) **(OFF)**. |
| **Hide Timer** | Shows or hides the component from view. Setting the Hide Timer toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) **(ON)** hides the component in Express View. Setting the toggle to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) **(OFF)** unhides the component. The component will always remain visible in the Module Builder. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) **(OFF)**. |

[![A static image dispaying the Timer component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/displaySettings_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/displaySettings.jpg?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)

## Data Settings

### Data Storage

| Setting | Description |
| --- | --- |
| **Store Data in Database** | The Store Data in Database setting affects how data persists through your application. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) **(ON)**, Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios: - Navigating between Panels in a Navigation component. On navigation between pages (Panels), the component’s value saves to the database. - Triggering a module save event using a Button component with an Action Type of Save. - Navigating between screens of a workflow. On navigation between screens, the component’s value saves to the database. > [!NOTE] > By default, workflows persist data from all fields in the client-side submission when navigating between screens. However, only values from fields with Store Data in Database enabled store in the server-side submission. Set the toggle to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) **(OFF)** when you don’t want to store the values from this field in the database. > [!NOTE] > When using a Plug-In to remote execute a module, ensure data moving between modules is persistent. You can optionally enable Store Data in Database for components in the source module. But any components in the API module whose values are included in an API response must have Store Data in Database enabled. When a component’s data is not persistent, the data isn't included in an API call's response. So, Plug-Ins or external services requesting data from the API module can't receive non-persistent data in the response. > [!TIP] > Store Data in Database also affects what data is tracked using Unqork’s built-in tracker. When the **Enable Tracker** and **Track Value** toggles are set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) **(ON)** in Module Settings, only values from fields with Store Data in Database enabled are tracked. By default, this toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) **(OFF)****.** |

[![A static image dispaying the Timer component's Data settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dataSettings_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dataSettings.jpg?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)

## Actions Settings

### Triggers

| Setting | Description |
| --- | --- |
| **Trigger** | To set up a trigger, enter the Property ID of your chosen logic component into this field. When the timer completes its duration, the specified component fires. |

## [![A static image dispaying the Timer component's Actions settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/actionsSettings_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/actionsSettings.jpg?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) Advanced Settings

### Additional Styling

| Setting | Description |
| --- | --- |
| **Custom CSS Class** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |

## [![A static image dispaying the Timer component's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advancedSettings_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advancedSettings.jpg?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) Adding a Timer Component

You can add a Timer component to any page in your Unqork application. For most Timer component configurations, you'll hide the component. Only keep the component visible if the end-user must see the timer.

For this example, the end-user must complete personal information and ensure they sufficient time to complete the Text Area component. The Timer component counts down from 60 seconds. After 60 seconds, a button displays letting your end-user submit their information.

### Configure the Text Field Component

1. In the Module Builder, drag and drop a **T****ext Field** component onto your canvas.
2. In the Property ID field, enter **name**.
3. In the Label Text field, enter `Your Name`.
4. Click **Save Component**.

### Configure the Text Area Component

1. Drag and drop a **![Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_area_teal_component(5).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) Text Area** component onto your canvas, placing it below your **name** **T****ext Field** component.
2. In the Property ID field, enter **experience**.
3. In the Label Text field, enter `Your Experience`.
4. Click **Save Component**.

### Configure the Timer Component

1. Drag and drop a **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/timer_teal_component(2).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) Timer** component onto your canvas, placing it below your **experience** **![Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_area_teal_component(5).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) Text Area** component.
2. In the Property ID field, enter **timerExperience**.
3. In the Label Text field, enter `timerExperience`.
4. Set the **Hide Label** toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) **(ON)**.
5. In the **Set Timer Duration** field, enter `60`.
6. In the **Set Timer Format** field, enter `mm:ss`.

[![A static image displaying the Timer component's configuration settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/example_timerConfig_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/example%20timerConfig.jpg?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)
7. Click **Save Component**.

### Configure the Button Component

This Button component displays after the Timer component expires.

1. Drag and drop a **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(15).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) Button** component onto your canvas, placing it below your **timerExperience** **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/timer_teal_component(2).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) Timer** component.
2. In the Property ID field, enter **btnSubmit**.
3. Set the **Hide Field** toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) **(ON)****.**
4. Click **Save Component**.

### Configure the Decisions Component

This Decisions component is where you set the rule to only show the **Submit** button when the timer reaches zero.

1. Drag and drop a **D****ecisions** component onto your canvas, placing it between your **timerExperience** **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/timer_teal_component(2).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) Timer** and **btnSubmit** **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(15).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) Button** components.
2. In the Property ID and **Canvas Label Text** fields, enter `ruleSixty`.
3. Set **Trigger Type** to `Watch`.
4. Complete the **Inputs** table as follows:

|  | **Source** | **Alias** | **Type** |
| --- | --- | --- | --- |
| 1 | timerExperience |  | exact |
5. Complete the **Outputs** as follows:

|  | **Source** | **Type** |
| --- | --- | --- |
| 1 | btnSubmit | visible |
6. Complete the **Conditionals** table as follows:

|  | **timerExperience** | **btnSubmit_visible** |
| --- | --- | --- |
| 1 | -0 | yes |

> [!NOTE]
> -0 is the Timer's value only after the time expires. So, this Decisions component only fires when the timer reaches zero.

[![A static image displaying the Decision Component's configuration settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/example_decisionsConfig_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/example%20decisionsConfig.jpg?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)
7. Click **Save Component**.
8. **Save** your module.

**Preview** your module in Express View to see the button displaying after the Timer component expires:

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Timer_Express.mp4?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)

## Structure of a Timer Component's Data

Using the example above, execute the [Vega Console](/v1/docs/vega-console) command UNQENG.tools.getComponentState('**timerExperience**') in the DevTools Console to display the component's data structure:

[![A static image displaying the Data Structure of the Timer component in the Dev Tools Console.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dataStructure_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dataStructure(1).jpg?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)

The Timer component stores as a key/value pair and displays the current time value in seconds (ss). When viewing a Timer component's value in the Devtools Console, the value displayed is the exact moment the executes. For example, if a 60-second timer is set to countdown to 0, executing the Angular command at 30 seconds displays a value of 30 in the Console.

The **Timer component** lets you add time-based rules and logic to your application. Say you want to set a 10-minute timer for an end-user to confirm an order. If the end-user fails to confirm the order in the allotted 10 minutes, the order process resets. In this situation, the time limit might give the end-user a sense of urgency. Plus, restarting an idle process could free up resources for other end-users.

Some other uses of the Timer component include:

- Ensuring an end-user spends enough time on a page.
- Limiting the amount of time an end-user can stay on a page.
- Automatically reloading a page when the timer expires.
- Detecting if an end-user becomes inactive.

Use the Timer component to trigger one or many [components](/v1/docs/module-builder-component-library) when it expires. For example, the Trigger setting fires a single component after the timer expires. You could also use a [Decisions](/v1/docs/decisions-component) component to trigger a number of actions after the timer expires. Once the timer expires, its value is -0. So, you can set up micro decisions to fire based on the timer's value of -0.

> [!WARNING]
> Timer components placed inside a Panel component that acts as a pop-up modal in Express View triggers the Timer component twice, once when the modal opens and once when it closes.

> [!NOTE]
> Server-side executed modules do not support the Timer component. For example, if you create a workflow with Task modules, any reference from one module to another in that workflow where a Timer component exists will result in an error.

You'll find the Timer component in the [Data & Event Processing](/v1/docs/data-event-processing-components) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Timer_Gif.mp4?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)

## Display Panel

[![A static image dispaying the Timer component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Timer_02_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Timer%2002.png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)

### Field Text

| Setting | Description |
| --- | --- |
| **Label Text** | Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. |
| **Placeholder Text** | A short prompt telling end-users the expected value of an input field. For example, `Enter your Social Security Number`. Placeholder Text displays inside the input field until the end-user begins an entry. |

### Contextual Help

| Setting | Description |
| --- | --- |
| **Tooltip** | A short hint that displays when an end-user positions their cursor over the ![Questionmark Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Tooltip(17).jpg?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) (**Tooltip**) icon. Tooltips can display across more than one line. |
| **Helper Text** | A quick tip describing the expected value of an input field. Unlike a Tooltip, Helper Text stays visible under the input field and displays on a single line. |

### Default State Options

| Setting | Description |
| --- | --- |
| **Set Timer Duration** | Sets how long the timer runs in seconds. |
| **Timer Direction** | Determines if the timer **Counts Up** to the Timer Duration or **Counts Down** from the Timer Duration. |
| **Set Timer Format** | The [Moment.js](/v1/docs/manipulating-dates-with-moment-js) format for displaying the time remaining. To include words, surround them with square brackets. For example, [Time Remaining] mm:ss. |
| **Reset When User Activity is Detected** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) **(ON)**, the component keeps track of end-user's interaction with the screen. If activity is detected, the timer resets. As defined by this setting, activity includes mouse clicks and key presses on the currently focused browser page. Simply moving the mouse is not considered activity. When set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) **(OFF)**, the timer continues for its entire duration regardless of activity on the page. By default, setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) **(OFF)**. |

### Formatting

| Setting | Description |
| --- | --- |
| **Hide Label** | Setting Hide Label to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) **(ON)** hides Label Text from displaying in Express View. Your Label Text still displays in the Module Builder. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) **(OFF)**. |
| **Hide Timer** | Shows or hides the component from view. Setting the Hide Timer toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) **(ON)** hides the component in Express View. Setting the toggle to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) **(OFF)** unhides the component. The component will always remain visible in the Module Builder. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) **(OFF)**. |

## Data Panel

[![A static image dispaying the Timer component's Data settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Timer_03_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Timer%2003.png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)

### Data Storage

| Setting | Description |
| --- | --- |
| **Store Data in Database** | The Store Data in Database setting affects how data persists through your application. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) **(ON)**, Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios: - Navigating between Panels in a Navigation component. On navigation between pages (Panels), the component’s value saves to the database. - Triggering a module save event using a Button component with an Action Type of Save. - Navigating between screens of a workflow. On navigation between screens, the component’s value saves to the database. > [!NOTE] > By default, workflows persist data from all fields in the client-side submission when navigating between screens. However, only values from fields with Store Data in Database enabled store in the server-side submission. Set the toggle to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) **(OFF)** when you don’t want to store the values from this field in the database. > [!NOTE] > When using a Plug-In to remote execute a module, ensure data moving between modules is persistent. You can optionally enable Store Data in Database for components in the source module. But any components in the API module whose values are included in an API response must have Store Data in Database enabled. When a component’s data is not persistent, the data isn't included in an API call's response. So, Plug-Ins or external services requesting data from the API module can't receive non-persistent data in the response. > [!TIP] > Store Data in Database also affects what data is tracked using Unqork’s built-in tracker. When the **Enable Tracker** and **Track Value** toggles are set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) **(ON)** in Module Settings, only values from fields with Store Data in Database enabled are tracked. By default, this toggle is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) **(OFF)**. |

## Actions Panel

[![A static image dispaying the Timer component's Actions settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Timer_04_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Timer%2004.png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)

### Triggers

| Setting | Description |
| --- | --- |
| **Trigger** | To set up a trigger, enter the Property ID of your chosen logic component into this field. When the timer completes its duration, the specified component fires. |

## Advanced Panel

[![A static image dispaying the Timer component's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Timer_05_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Timer%2005.png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)

### Additional Styling

| Setting | Description |
| --- | --- |
| **Custom CSS Class** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |

## Adding a Timer Component

You can add a Timer component to any page in your Unqork application. For most Timer component configurations, you'll hide the component. Only keep the component visible if the end-user must see the timer.

For this example, the end-user must complete personal information and ensure they sufficient time to complete the Text Area component. The Timer component counts down from 60 seconds. After 60 seconds, a button displays letting your end-user submit their information.

### Configure the Text Field Component

1. In the Module Builder, drag and drop a **T****ext Field** component onto your canvas.
2. In the Property ID field, enter **name**.
3. In the Label Text field, enter `Your Name`.
4. Click **Save & Close**.

### Configure the Text Area Component

1. Drag and drop a **![Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_area_teal_component(5).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) Text Area** component onto your canvas, placing it below your **name** **T****ext Field** component.
2. In the Property ID field, enter **experience**.
3. In the Label Text field, enter `Your Experience`.
4. Click **Save & Close**.

### Configure the Timer Component

1. Drag and drop a **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/timer_teal_component(2).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) Timer** component onto your canvas, placing it below your **experience** **![Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_area_teal_component(5).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) Text Area** component.
2. In the Property ID field, enter **timerExperience**.
3. In the Label Text field, enter `timerExperience`.
4. In the **Set Timer Duration** field, enter `60`.
5. In the **Set Timer Format** field, enter `mm:ss`.
6. Set the **Hide Label** toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) **(ON)**.

[![An animated image displaying the Timer component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Timer_06_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Timer%2006.png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)
7. Click **Save & Close**.

### Configure the Button Component

This Button component displays after the Timer component expires.

1. Drag and drop a **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(15).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) Button** component onto your canvas, placing it below your **timerExperience** **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/timer_teal_component(2).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) Timer** component.
2. In the Property ID field, enter **btnSubmit**.
3. In the Label Text field, enter `Submit`.
4. Set the **Hide Field** toggle to (ON).
5. Click **Save & Close**.

### Configure the Decisions Component

This Decisions component is where you set the rule to only show the **Submit** button when the timer reaches zero.

1. In the Module Builder, drag and drop a **D****ecisions** component onto your canvas, placing it between your **timerExperience** **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/timer_teal_component(2).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) Timer** and **btnSubmit** **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(15).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) Button** components.
2. In the Property ID and **Canvas Label Text** fields, enter `ruleSixty`.
3. Click **![Actions Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/actions_icon(17).png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D) Actions**.
4. Set **Trigger Type** to **Watch**.
5. Complete the **Inputs** table as follows:

|  | **Property ID** | **Alias** | **Type** |
| --- | --- | --- | --- |
| 1 | timerExperience |  | exact |
6. Complete the **Outputs** as follows:

|  | **Property ID** | **Type** |
| --- | --- | --- |
| 1 | btnSubmit | visible |
7. Complete the **Micro Decisions** table as follows:

|  | **Input Values** | **Output Values** |
| --- | --- | --- |
|  | **timerExperience** | **btnSubmit_visible** |
| 1 | -0 | yes |

> [!NOTE]
> -0 is the Timer's value only after the time expires. So, this Decisions component only fires when the timer reaches zero.

[![An animated image displaying the Decision component's Inputs and Outputs settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Timer_07_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Timer%2007.png?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)
8. Click **Save & Close**.
9. **Save** your module.

**Preview** your module in Express View to see the button displaying after the Timer component expires:

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Timer_Express.mp4?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)

## Structure of a Timer Component's Data

The Timer component stores as a key/value pair and displays the current time value in seconds (ss). When viewing a Timer component's value in the Devtools Console, the value displayed is the exact moment the Angular command executes. For example, if a 60-second timer is set to countdown to 0, executing the Angular command at 30 seconds displays a value of 30 in the Console.

[![A static image displaying the Data Structure of a Timer component in Runtime 1.0.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Timer_DataStructure_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Timer%20DataStructure.jpg?sv=2026-02-06&spr=https&st=2026-10-26T16%3A40%3A59Z&se=2026-10-26T17%3A40%3A59Z&sr=c&sp=r&sig=xLQXSUcnCZssOVKwt1kODYoO80no1sE94yp3DnHeU8M%3D)

## Resources

- [Modify the Timer component using the toolbar settings](/v1/docs/component-toolbar-settings).
- [Learn about Data & Events Processing components](/v1/docs/introduction-to-data-events-processing).
- [Learn about using the Timer node in a Workflow.](/v1/docs/timer-node)
- [Use the Inactivity Timer snippet in an application](/v1/docs/inactivity-timer-snippet)

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.

Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.

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.

The DevTools Console helps you securely store, build, test, and deploy your software.

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

The Angular command, or data command, is a tool that displays submission data in a browser's developer console. In Express View, enter the following command in the devtool console: angular.element('.unqorkio-form').scope().submission