Timer form control

A form control that lets a form user measure time by counting up or down.


Timer form control

Configure the Timer form control

To configure the Timer Timer icon control, do the procedure in this topic.

Video: Common Configuration Settings in eForm Controls

How to Start

  1. Open eForm Builder.

    For information about how to open this screen, refer to eForm Builder screen.


    Eform Builder screen
  2. On the eForm Builder screen, in the Toolbox, open the Advanced Controls tab.

    Advanced Controls tab
  3. On the Advanced Controls tab, drag a Timer Timer icon form control onto your eForm.

    Timer Form Control

Procedure

  1. Complete the settings on the configuration screens.

    You can use the Data screen screen to specify a variable.

General

Specifies the basic configuration for the Timer form control.

Figure: General tab

General tab

Fields

Field NameDefinition

Label
Description:
Specifies the text label that shows on your form for the control.
Allowed Values:
One line of text (a string).

Accepted:

  • Letters
  • Numbers
  • Spaces
Default Value:
Different for different controls.
Example:
This is a common configuration field that is used in many examples. Refer to:
  • Examples - Step-by-step use case examples, information about what types of examples are provided in the AgilePoint NX Product Documentation, and other resources where you can find more examples.

Internal Name
Description:
Specifies a unique, technical name for your control.
Allowed Values:
One line of text (a string).

Not Accepted:

  • Spaces
Default Value:
Different for different controls.
Example:
This is a common configuration field that is used in many examples. Refer to:
  • Examples - Step-by-step use case examples, information about what types of examples are provided in the AgilePoint NX Product Documentation, and other resources where you can find more examples.

Help Text
Description:
Specifies the text to shows when a runtime app user hovers their cursor over the form control.
Allowed Values:
More than one line of text.
Default Value:
None
Example:
Refer to:

Help Text Display
Description:
Specifies if the field shows the text in the Help Text field when the runtime app user hovers over the label or field.
Allowed Values:
  • None - Does not show the help text.
  • Hover On Label - Shows the help text when you put your mouse on the label.
  • Hover On Field - Shows the help text when you put your mouse on the field.
  • Hover On Both - Shows the help text when you put your mouse on the label and Field.
Default Value:
None
Example:
Refer to:

Configure

Configures advanced settings for your form control.

Figure: Configure tab

Configure tab

Fields

Field NameDefinition

Type
Description:
Specifies the type of timer to show on your eForm.
Allowed Values:
  • StopWatch - Shows timer to count up from zero (0).
  • CountDown - Shows timer to count down from a specified time.
Default Value:
CountDown

Start On Form Load
Description:
Specifies whether the count starts when the eForm opens in a web browser at runtime.
Allowed Values:
  • Selected - The count starts when the eForm opens in a web browser.
  • Deselected - The count starts when a form user clicks the timer start button.
Default Value:
Selected

Show Timer
Description:
Specifies if the form control shows the counter in the Hour:Minute:Second format.
Allowed Values:
  • Selected - Shows the counter on the form control.
  • Deselected - Shows the Timer form control with no counter.
Default Value:
Selected

Show Start Button
Description:
Specifies if the form control shows a button to start the timer.
Allowed Values:
  • Selected - Shows the start button on the form control.
  • Deselected - Shows the Timer form control with no start button for the timer.
Default Value:
Selected

Show Stop Button
Description:
Specifies if the form control shows a button to stop the timer.
Allowed Values:
  • Selected - Shows the stop button on the Timer form control.
  • Deselected - Shows the Timer form control with no stop button.
Default Value:
Selected

Tick Unit
Description:
Specifies the units for the timer shows.
Allowed Values:
  • Seconds - The timer shows seconds.
  • Minutes - The timer shows minutes.
  • Hours - The timer shows hours.
Default Value:
Seconds

Tick Interval (Of Selected Units)
Description:
Specifies the number of tick units that pass before the counter value changes.
Allowed Values:
An integer.

Range

  • Greater than 0
Default Value:
1
Example:
Under these conditions:
  • Tick Unit = Seconds
  • Tick Interval = 5
  • CountDown Timer Starts At = 60

These values show on the counter:

  • 00:00:60
  • 00:00:55
  • 00:00:50

Countdown Timer Starts At Number (Of Selected Units)
Description:
Specifies the numeric timer value from which the countdown starts.
To Open this Field:
  1. In the Type field, select CountDown.
Allowed Values:
An integer.

Range

  • Greater than 0
Default Value:
60

Auto Stop At
Description:
Specifies the timer value where the timer stops counting up.
To Open this Field:
  1. In the Type field, select StopWatch.
Allowed Values:
An integer.

Range

  • Greater than 0
Default Value:
None

Appearance

Specifies the look and feel for your form control.

Figure: Appearance tab

Appearance tab

Fields

Field NameDefinition

Font Family
Description:
Specifies the font family of the input text and label.
Allowed Values:
A font name from the list.
Default Value:
  • Modern theme - Roboto
  • Classic theme - Arial
Example:
Refer to:

Font Size (px)
Description:
Specifies the size of the input text and label for your form control.
Allowed Values:
An integer.

Range

  • Greater than 0
Default Value:
  • Classic theme - 12
  • Modern theme - 14
Example:
Refer to:

Font Style
Description:
Specifies the style of the font for the input text and label.
Allowed Values:
  • Bold - Shows the input text and label in bold.
  • Underline - Shows the label underlined.
  • Italic - Shows the label in italic.
Default Value:
None
Example:
Refer to:

Background Color
Description:
Specifies the background color for your control.
Allowed Values:
A color value using a hex code, RGB code, or RGBA code.

You can enter a color code, or select a color from the palette.

Default Value:
#ff0000
Example:
Refer to:

Border Color
Description:
Specifies the border color for your control.
Allowed Values:
A color value using a hex code, RGB code, or RGBA code.

You can enter a color code, or select a color from the palette.

Default Value:
#ff0000
Example:
Refer to:

Foreground Color
Description:
Specifies the foreground color for your control.
Allowed Values:
A color value using a hex code, RGB code, or RGBA code.

You can enter a color code, or select a color from the palette.

Default Value:
#ff0000
Example:
Refer to:

Apply Font Properties To Control
Description:
Specifies if the control gets the font properties from the properties set in the form settings.
Allowed Values:
  • Selected - The control gets the font properties from the properties set in the form settings.
  • Deselected - The control does not get the font properties from the properties set in the form settings.
Default Value:
Deselected
Example:
Refer to:

Label CSS Class
Description:
Specifies a CSS class for the label of your control.
Allowed Values:
A valid CSS class.
Default Value:
None

If you specify your CSS CSS icon on the top menu, the CSS is populated.

Example:
Refer to:

Field CSS Class
Description:
Specifies a CSS class for the field in your control.
Allowed Values:
A valid CSS class.
Default Value:
None

If you specify your CSS CSS icon on the top menu, the CSS is populated.

Example:
Refer to:

Container CSS Class
Description:
Specifies a CSS class for the container of your control.
Allowed Values:
A valid CSS class.
Default Value:
None

If you specify your CSS CSS icon on the top menu, the CSS is populated.

Example:
Refer to:

Behavior

Specifies how the control shows on your form.

Figure: Behavior tab

Behavior tab

Fields

Field NameDefinition

Right To Left
Description:
Specifies if the text for this control, including user input, shows from right to left.
Allowed Values:
  • Deselected - The text shows from left to right.
  • Selected - The text shows from right to left.
Default Value:
Deselected
Example:
Refer to:

Visible
Description:
Specifies if the runtime app user sees the field.
Allowed Values:
  • Selected - The runtime app user sees the field.
  • Deselected - The runtime app user does not see the field.
Default Value:
Selected
Example:
Refer to:

Label Position
Description:
Specifies the position of the text label that shows on your form for the control.
Allowed Values:
  • Inherit - The position of the label is as specified in the form settings.
  • Left - Specifies that the position of the label is to the left of the container.
  • Top - Specifies that the position of the label is to the top of the container.
Default Value:
Inherit
Example:
Refer to:

Text Align
Description:
Specifies the horizontal alignment of user input for this control.
Allowed Values:
  • Left - Aligns the text to the left.
  • Center - Centers the text.
  • Right - Aligns the text to the right.
Default Value:
Left
Example:
Refer to:

Advanced

Specifies advanced settings for your form control.

Figure: Advanced tab

Advanced tab

Fields

Field NameDefinition

Field ID
Description:
Shows an ID of the control.
Allowed Values:
Read only.
Default Value:
Different for different controls.
Example:
Refer to:

Data Security Settings
Description:
Specifies whether to store information from the field in the process schema, so the app can use it again, or to simply pass on the information after the form is submitted without storing the information. This option helps to protect sensitive user information.
Allowed Values:
  • Persist - Stores the data from the field in the process schema, so the app can use it again.
  • Do Not Persist - Does not store the data from the field in the process schema. This option provides greater security for sensitive user information.
Default Value:
Persist
Example:
Refer to:

JavaScript Function On Timer Starts
Description:
Specifies the name of a JavaScript function to run when the timer starts.
Allowed Values:
The name of a Javascript function that exists in your app.

For more information, refer to (Example) Use Custom JavaScript in an eForm.

Default Value:
None
Example:

TimeStarts where one of these is your function:

function TimeStarts()
  {
    alert('Your time starts now!');
    return true;
  }

JavaScript Function On Timer Stops
Description:
Specifies the name of a JavaScript function to run when the timer stops.
Allowed Values:
The name of a Javascript function that exists in your app.

For more information, refer to (Example) Use Custom JavaScript in an eForm.

Default Value:
None
Example:

TimeStops where one of these is your function:

function TimeStops()
  {
    alert('Your time is up!');
    return true;
  }

JavaScript Function On Each Tick
Description:
Specifies the name of a JavaScript function to run when the timer display value changes.
Allowed Values:
The name of a Javascript function that exists in your app.

For more information, refer to (Example) Use Custom JavaScript in an eForm.

Default Value:
None

Show On Tablet Devices
Description:
Specifies if the form field shows on a tablet.
Allowed Values:
  • Selected - The form field shows on a tablet.
  • Deselected - The form field does not show on a tablet.
Default Value:
Selected
Example:
Refer to:

Show On Mobile Phone Devices
Description:
Specifies if the form field shows on a mobile device.
Allowed Values:
  • Selected - The form field shows on a mobile device.
  • Deselected - The form field does not show on a mobile device.
Default Value:
Selected
Example:
Refer to: