DurationPicker¶

Duration Picker allows the users to specify a duration by selecting a start time and an end time.

When assigning a rule to a property of DurationPicker, the rule will be passed an instance of the following proxy class as an argument:

DurationPickerFormCellProxy

DurationPicker Properties¶

Property	Type	Required	Default
Caption	`string`	Yes
FormatRule	Rule	No	`""`
HelperText	`string`	No
IsEditable	`boolean`	No	`true`
IsVisible	`boolean`	No	`true`
MinuteInterval	`integer`	No	`5`
OnValueChange	ActionOrRule	No
RequiredIndicator	BooleanOrString	No	`false`
Separator	`boolean`	No	`true`
Styles	`object`	No
Unit	`enum`	Yes
Validation	Validation	No
Value	`number`	No
_Name	`string`	Yes
_Type	`const`	Yes
validationProperties	ValidationProperties	No

Caption¶

Displays label on the control.

type: string

FormatRule¶

If specified, the given rule executes when control is initialized or value changes.

type: Rule
default: ""

HelperText¶

Helper text to be displayed if there is no validation view.

type: string

IsEditable¶

Disables or enables interaction.

type: boolean
default: true

IsVisible¶

Sets the visibility of the control.

type: boolean
default: true

MinuteInterval¶

Picker interval in minutes. The initial state of DurationPicker MinuteInterval is 1 min, 0 min and 00 min for iOS, Android and web respectively.

type: integer
default: 5
maximum value: 30

OnValueChange¶

Action or rule to perform after value changed.

type: ActionOrRule
Formatter and Binding are not supported

RequiredIndicator¶

Specifies whether a field is mandatory by displaying a visual indicator. This property accepts either a Boolean (true / false) or a single character (e.g., '!') as its value.

By default, the indicator is a red asterisk (*) displayed at the end of the field's caption. You can customize the indicator character by setting this property. Additionally, the appearance (e.g., color or size) can be styled through metadata as well.

Note:

This indicator is purely visual—it does not enforce that the user must fill out the field.
If more than one character is defined, the system will revert to using the default indicator.

type: BooleanOrString
default: false

Separator¶

Sets the visibility of the separator line below the control. This property will take precedence over ControlSeparator in section and is only supported for Form Cell control in Sectioned Table and not supported in Form Cell Container.

type: boolean
default: true

Styles¶

Set styles for Background, Caption and Value.

type: object with following properties.

Property	Type	Required
Background	string	No
Value	string	No
Caption	string	No
RequiredIndicator	string	No

Background¶

The string value is a style class name of Background.

Background style class

Value¶

The string value is a style class name of Value.

Value style class

Caption¶

The string value is a style class name of Caption.

Caption style class

RequiredIndicator¶

The string value is a style class name of RequiredIndicator.

RequiredIndicatorColor style class

Unit¶

Unit of duration. It can be hour or minute.

type: enum

The value of this property must be one of the known values listed below.

Value	Description
`M`	Minute
`Min`	Minute
`H`	Hour
`Hour`	Hour

Validation¶

The validation view properties.

type: Validation

Value¶

Duration value in hours or minutes depending on the unit.

type: number

_Name¶

type: string

_Type¶

type: const

The value of this property must be:

"Control.Type.FormCell.DurationPicker"

validationProperties¶

Deprecated. Please use Validation property. The validation view properties.

type: ValidationProperties

Examples¶

Literal¶

Duration control with unit in hour¶

{
  "_Type": "Page",
  "_Name": "FormCellsPage",
  "Caption": "FormCell Example",
  "Controls": [{
    "_Type": "Control.Type.FormCellContainer",
    "_Name": "FormCellContainer",
    "Sections": [{
      "Caption": "Section1",
      "Controls": [{
        "_Type": "Control.Type.FormCell.DurationPicker",
        "_Name": "DurationControl",
        "Caption": "Duration1",
        "Value": 3.3,
        "Unit": "H",
        "MinuteInterval": 1,
        "IsEditable": true,
        "HelperText": "This is helper text"
      }]
    }]
  }]
}

Duration control with unit in Minutes¶

{
  "_Type": "Page",
  "_Name": "FormCellsPage",
  "Caption": "FormCell Example",
  "Controls": [{
    "_Type": "Control.Type.FormCellContainer",
    "_Name": "FormCellContainer",
    "Sections": [{
      "Caption": "Section1",
      "Controls": [{
        "_Type": "Control.Type.FormCell.DurationPicker",
        "_Name": "DurationControl",
        "Caption": "Duration2",
        "Value": 70,
        "Unit": "M",
        "MinuteInterval": 1,
        "IsEditable": true
      }]
    }]
  }]
}

Binding¶

{
  "_Type": "Page",
  "_Name": "FormCellsPage",
  "Caption": "FormCell Example",
  "Controls": [{
    "_Type": "Control.Type.FormCellContainer",
    "_Name": "FormCellContainer",
    "Sections": [{
      "Caption": "Section1",
      "Controls": [{
        "_Type": "Control.Type.FormCell.DurationPicker",
        "_Name": "DurationControl",
        "Caption": "Duration1",
        "Value": "{Duration}",
        "Unit": "{DurationUOM}",
        "MinuteInterval": 1,
        "IsEditable": true
      }]
    }]
  }]
}

Validation¶

{
  "_Type": "Page",
  "_Name": "FormCellsPage",
  "Caption": "FormCell Example",
  "Controls": [{
    "_Type": "Control.Type.FormCellContainer",
    "_Name": "FormCellContainer",
    "Sections": [{
      "Caption": "Section1",
      "Controls": [{
        "_Type": "Control.Type.FormCell.DurationPicker",
        "_Name": "DurationControl",
        "Caption": "Duration1",
        "Value": 3.3,
        "Unit": "H",
        "MinuteInterval": 1,
        "IsEditable": true,
        "Validation": {
          "Message": "This is validation view message",
          "Visible": true,
          "SeparatorVisible": true,
          "Styles": {
            "Message": "ValidationMessage",
            "ValidationView": "ValidationView"
          }
        },
        "RequiredIndicator": true,
        "Styles": {
          "Background": "DurationPickerFormCellBackground",
          "Caption": "DurationPickerFormCellCaption",
          "Value": "DurationPickerFormCellValue",
          "RequiredIndicator": "RequiredIndicatorColor"
        }
      }]
    }]
  }]
}

Style Classes Definition¶

/* DurationPicker Form Cell - Background */
.DurationPickerFormCellBackground {
  background-color: yellow;
}

/* DurationPicker Form Cell - Caption */
.DurationPickerFormCellCaption {
  background-color: #0000FF;
  color: black;
  font-style: body;  /* iOS Only */
  font-typeface: bold;  /* Android Only */
  font-size: 16px;
}

/* DurationPicker Form Cell - Value */
.DurationPickerFormCellValue {
  background-color: #0000FF;
  color: black;
  font-style: body;  /* iOS Only */
  font-typeface: bold;  /* Android Only */
  font-size: 16px;
}

/* Validation view */
.ValidationView {
  background-color: #83AF9B;
  border-top-color: #ff00ee;
}

/* Validation message */
.ValidationMessage {
  font-size: 16;
  font-color: #0000ff;
}

/* Required indicator's color - font-color / color can be used */
.RequiredIndicatorColor {
  font-color: blue;
}