Interval Input

Tips & examples

A comprehensive row layout containing six individual numerical text input boxes representing structural time blocks, accompanied by custom visual prefix or suffix icon adornments.

When to use

Allowing users to explicitly input precise time durations or chronological spans broken down by individual units (years, months, days, hours, minutes, seconds).
Capturing structured interval properties within a form grid context to update backend database columns.

What you need

Disabled by default until a default_form container exists on the page. Requires a valid Data Source pairing (Element ID and Field Path) to map selection variables back to form states.

Data Source configurations remain entirely locked until a default_form component is actively added to the viewport workspace.

Examples

A configuration screen gathering structured service contract warranty parameters (e.g., specifying an exact duration of 2 years, 6 months, and 0 days).
An operations dashboard logging automated script batch execution run-time allocations down to individual seconds inputs.

Avoid

Using for single point-in-time timestamp selections, use the date_time_input selector component instead.
Allocating less than 9 grid layout columns, which immediately compresses the visual row tracking and cuts off input field text boxes.
Attempting to map schema properties or declare data sources before a parent default_form wrapper is dropped onto the canvas workspace layers.

Pairs well with

Form — Acts as the parent container tracking field values updates, passing validation data, and executing submission loops.

Properties

Editor properties

Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

Data Source

Binds the interval value to an interval-typed field on the parent form's data source.

Data SourceoptionalSettings group: Where this element loads its data (view, query, connector, or element).
Default: none

Input

Disabled/nullable toggles (expression-capable) plus the default duration, entered as separate numeric fields per time unit.

DisabledoptionalYes / no or Custom expression (yes/no): When true, the control cannot be edited.
Example false
Default: none
NullableoptionalYes / no or Custom expression (yes/no): Whether the field may be left empty.
Default: none
Default ValueoptionalNot set (null): Default duration broken into years, months, days, hours, minutes, and seconds (each unit defaults to 0).
Default: none

Styling

Per-unit start/end adornments (icon or text), selected via a unit picker, shown alongside each duration field.

Years Start AdornmentoptionalText: Configuration for years Start Adornment.
Default: none
Years End AdornmentoptionalText: Configuration for years End Adornment.
Default: none
Months Start AdornmentoptionalText: Configuration for months Start Adornment.
Default: none
Months End AdornmentoptionalText: Configuration for months End Adornment.
Default: none
Days Start AdornmentoptionalText: Configuration for days Start Adornment.
Default: none
Days End AdornmentoptionalText: Configuration for days End Adornment.
Default: none
Hours Start AdornmentoptionalText: Configuration for hours Start Adornment.
Default: none
Hours End AdornmentoptionalText: Configuration for hours End Adornment.
Default: none
Minutes Start AdornmentoptionalText: Configuration for minutes Start Adornment.
Default: none
Minutes End AdornmentoptionalText: Configuration for minutes End Adornment.
Default: none
Seconds Start AdornmentoptionalText: Configuration for seconds Start Adornment.
Default: none
Seconds End AdornmentoptionalText: Configuration for seconds End Adornment.
Default: none

Inside dataSource: (dataSource)

Element IDrequiredNumber or Text: Another element on the page whose data backs this field.
Default: none
Field PathrequiredList of Text or Number: Path into the source element’s data (property segments).
Default: none

Sizing

No size of its own: dropped at the platform default of 1 × 1 grid cells and resized on the page.

Accessibility

Each numeric box exposes individual aria-label parameters reflecting target chronological metrics. Up and Down arrow key inputs manipulate integers cleanly inside active focused states.

Expressions

Values you can read in expressions

Other parts of your app can read live values from this element in custom expressions:

elements.myIntervalInput.<property>

value string Current input value of this control. elements.myIntervalInput.value

When The duration as a Postgres interval string built from the unit fields. Pass it straight to a query parameter; do not try to do arithmetic on it in an expression.

disabled boolean True while the control is locked and cannot be edited. elements.myIntervalInput.disabled

touched boolean Map of fields the user has interacted with. elements.myIntervalInput.touched

To use one of these, open the property you want to drive on the other element, switch it to expression mode in the Expression Editor, and enter:

1
elements.myIntervalInput.value

Replace myIntervalInput with this element’s unique id. Select the element in Application Designer and copy the id chip at the top of the right-hand property panel.

Composition

Where you can place it

Drag this element into one of these containers:

Sample configuration

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
  "config": {
    "dataSource": {
      "elementId": "myElement",
      "fieldPath": [
        "fieldPath"
      ]
    },
    "defaultValue": "defaultValue",
    "disabled": false,
    "nullable": false,
    "yearsStartAdornment": "yearsStartAdornment",
    "yearsEndAdornment": "yearsEndAdornment",
    "monthsStartAdornment": "monthsStartAdornment",
    "monthsEndAdornment": "monthsEndAdornment",
    "daysStartAdornment": "daysStartAdornment",
    "daysEndAdornment": "daysEndAdornment",
    "hoursStartAdornment": "hoursStartAdornment",
    "hoursEndAdornment": "hoursEndAdornment",
    "minutesStartAdornment": "minutesStartAdornment",
    "minutesEndAdornment": "minutesEndAdornment",
    "secondsStartAdornment": "secondsStartAdornment",
    "secondsEndAdornment": "secondsEndAdornment"
  }
}

Ready-made setups

Adorned Uptime Tracking Matrix ↕

Configuring a wide interval input interface tracking hours, minutes, and seconds, with customized visual icons serving as suffixes inside the numeric field boundaries.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "config": {
    "dataSource": {
      "elementId": "slaFormWrapper",
      "fieldPath": [
        "targetResolutionWindow"
      ]
    },
    "input": {
      "defaultHours": 24,
      "defaultMinutes": 0,
      "defaultSeconds": 0,
      "disabled": "@@expression: false"
    },
    "styling": {
      "selectedUnitStyling": "hours",
      "endAdornmentText": "schedule",
      "endAdornmentType": "apply to icon"
    }
  }
}