Timer Component

Overview

The Timer component lets you add time-based rules and logic to your application. For example, a module could include a 10-minute timer for an end-user 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. 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 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 component with a Micro Decision of -0, which triggers when the timer reaches 0.

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 group to the left of the Module Builder.

To learn more about the Timer component's settings, click on the tabs below:

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  Text Field component onto your canvas.

2.

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

3.

In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Your Name.

4.

Click Save Component.

Configure the Text Area Component

1.

Drag and drop a  Text Area component onto your canvas, placing it below your name  Text Field component.

2.

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

3.

In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Your Experience.

4.

Click Save Component.

Configure the Timer Component

1.

Drag and drop a  Timer component onto your canvas, placing it below your experience  Text Area component.

2.

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

3.

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

4.

Set the Hide Label toggle to  (ON).

5.

In the Set Timer Duration field, enter 60.

6.

In the Set Timer Format field, enter mm:ss.

7.

Click Save Component.

Configure the Button Component

This Button component displays after the Timer component expires.

1.

Drag and drop a Button component onto your canvas, placing it below your timerExperience  Timer component.

2.

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

3.

Set the Hide Field toggle to  (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  Decisions component onto your canvas, placing it between your timerExperience  Timer and btnSubmit  Button components.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text fields, enter ruleSixty.

3.

Set Trigger Type to Watch.

4.

Complete the Inputs table as follows:

5.

Complete the Outputs as follows:

6.

Complete the Conditionals table as follows:

7.

Click Save Component.

8.

Save your module.

Preview your module in Express View 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. to see the button displaying after the Timer component expires:

Structure of a Timer Component's Data

Using the example above, execute the Vega Console command UNQENG.tools.getComponentState('timerExperience') in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software. to display the component's data structure:

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

Overview

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 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. 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 when it expires. For example, the Trigger setting fires a single component after the timer expires. You could also use a Decisions 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.

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 group to the left of the Module Builder.

To learn more about the Timer component's settings, click on the tabs below:

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  Text Field component onto your canvas.

2.

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

3.

In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Your Name.

4.

Click Save & Close.

Configure the Text Area Component

1.

Drag and drop a  Text Area component onto your canvas, placing it below your name  Text Field component.

2.

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

3.

In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Your Experience.

4.

Click Save & Close.

Configure the Timer Component

1.

Drag and drop a  Timer component onto your canvas, placing it below your experience  Text Area component.

2.

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

3.

In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. 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  (ON).

7.

Click Save & Close.

Configure the Button Component

This Button component displays after the Timer component expires.

1.

Drag and drop a Button component onto your canvas, placing it below your timerExperience  Timer component.

2.

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

3.

In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. 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  Decisions component onto your canvas, placing it between your timerExperience  Timer and btnSubmit  Button components.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text fields, enter ruleSixty.

3.

Click Actions.

4.

Set Trigger Type to Watch.

5.

Complete the Inputs table as follows:

6.

Complete the Outputs as follows:

7.

Complete the Micro Decisions table as follows:

8.

Click Save & Close.

9.

Save your module.

Preview your module in Express View 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. to see the button displaying after the Timer component expires:

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