Segmented¶

A segmented control is a horizontal bar divided into two or more mutually-exclusive buttons. This control provides users easy access to specific categories of content.

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

SegmentedFormCellProxy

Segmented Properties¶

Property	Type	Required	Default
ApportionsSegmentWidthsByContent	`boolean`	No	`false`
Caption	`string`	No
CaptionPosition	`enum`	No	`"Adaptive"`
HelperText	`string`	No
IsEditable	`boolean`	No	`true`
IsVisible	`boolean`	No	`true`
OnValueChange	ActionOrRule	No
RequiredIndicator	BooleanOrString	No	`false`
Segments	complex	No
Separator	`boolean`	No	`true`
Styles	`object`	No
Validation	Validation	No
Value	`string`	No
_Name	`string`	Yes
_Type	`const`	Yes
validationProperties	ValidationProperties	No

ApportionsSegmentWidthsByContent¶

Indicates whether the control attempts to adjust segment widths based on their content widths. This property will only take effect when the caption and the segments fits in single row. Only iOS and Web support this property.

type: boolean
default: false

Caption¶

Displays label on the control.

type: string

CaptionPosition¶

Position of the caption to be displayed along with the items in segments. Only iOS supports this property.

type: enum
default: "Adaptive"

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

CaptionPosition Known Values¶

Value	Description
`Adaptive`
`Top`

HelperText¶

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

type: string

IsEditable¶

Indicates whether the user can change the selection or not.

type: boolean
default: true

IsVisible¶

Sets the visibility of the control.

type: boolean
default: true

OnValueChange¶

Action or rule to be performed after value is 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

Segments¶

An array of string, each representing a segment in the Segmented FormCell.

The maximum number of segments is 5 for iOS.

type: complex

Segments Value¶

Any following options needs to be fulfilled.

Option 1¶

Array type:

All items must be of the type: string

Option 2¶

FixedCollection

Separator¶

Sets the visibility of the separator line below the control. This property will take precedence over the ControlSeparator in section, 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 RequiredIndicator.

type: object with following properties.

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

Background¶

The string value is a style class name of Background.

Background 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

Validation¶

The validation view properties.

type: Validation

Value¶

The value of the cell. When not specified or not found in the Segments no selection is made on iOS, Android and on Web the first segment is selected.

type: string

_Name¶

type: string

_Type¶

type: const

The value of this property must be:

"Control.Type.FormCell.SegmentedControl"

validationProperties¶

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

type: ValidationProperties

Examples¶

Segments - Literal¶

{
  "_Type": "Page",
  "_Name": "FormCellsPage",
  "Caption": "FormCell Example",
  "Controls": [{
    "_Type": "Control.Type.FormCellContainer",
    "_Name": "FormCellContainer",
    "Sections": [{
      "Caption": "Section1",
      "Controls": [{
        "_Type": "Control.Type.FormCell.SegmentedControl",
        "_Name": "SegmentedFormCell",
        "Caption": "Key",
        "CaptionPosition": "Top",
        "Segments": ["Low", "Medium", "High"],
        "Value": "Medium",
        "IsEditable": true,
        "HelperText": "This is helper text",
        "ApportionsSegmentWidthsByContent": true
      }]
    }]
  }]
}

Segments - Binding¶

{
  "_Type": "Page",
  "_Name": "FormCellsPage",
  "Caption": "FormCell Example",
  "Controls": [{
    "_Type": "Control.Type.FormCellContainer",
    "_Name": "FormCellContainer",
    "Sections": [{
      "Caption": "Section1",
      "Controls": [{
        "_Type": "Control.Type.FormCell.SegmentedControl",
        "_Name": "SegmentedFormCell",
        "Caption": "Key",
        "Segments": {
          "ReturnValue": "{OrderId}",
          "Target": {
            "EntitySet": "WOHeaders",
            "Service": "/MDKApp/Services/Amw.service"
          },
          "IsEditable": true,
          "ApportionsSegmentWidthsByContent": false
        },
        "Value": "{SomeProperty}"
      }]
    }]
  }]
}

Segments - Global¶

{
  "_Type": "Page",
  "_Name": "FormCellsPage",
  "Caption": "FormCell Example",
  "Controls": [{
    "_Type": "Control.Type.FormCellContainer",
    "_Name": "FormCellContainer",
    "Sections": [{
      "Caption": "Section1",
      "Controls": [{
        "_Type": "Control.Type.FormCell.SegmentedControl",
        "_Name": "SegmentedFormCell",
        "Caption": "Key",
        "Segments": "/MDKApp/Globals/LowMediumHigh.global",
        "Value": "/MDKApp/Globals/Medium.global",
        "IsEditable": true,
        "ApportionsSegmentWidthsByContent": true
      }]
    }]
  }]
}

Segments - Rule¶

{
  "_Type": "Page",
  "_Name": "FormCellsPage",
  "Caption": "FormCell Example",
  "Controls": [{
    "_Type": "Control.Type.FormCellContainer",
    "_Name": "FormCellContainer",
    "Sections": [{
      "Caption": "Section1",
      "Controls": [{
        "_Type": "Control.Type.FormCell.SegmentedControl",
        "_Name": "SegmentedFormCell",
        "Caption": "Key",
        "Segments": "/MDKApp/Rules/LowMediumHigh.js",
        "Value": "/MDKApp/Rules/Medium.js",
        "IsEditable": true
      }]
    }]
  }]
}

Validation Example¶

{
  "_Type": "Page",
  "_Name": "FormCellsPage",
  "Caption": "FormCell Example",
  "Controls": [{
    "_Name": "FormCellContainer",
    "_Type": "Control.Type.FormCellContainer",
    "Sections": [{
      "Caption": "Section1",
      "Controls": [{
        "_Type": "Control.Type.FormCell.SegmentedControl",
        "_Name": "SegmentedFormCell",
        "Caption": "Key",
        "Segments": [
          "Low",
          "Medium",
          "High"
        ],
        "Value": "Medium",
        "IsEditable": true,
        "Validation": {
          "Message": "This is validation view message",
          "Visible": true,
          "SeparatorVisible": true,
          "Styles": {
            "Message": "ValidationMessage",
            "ValidationView": "ValidationView"
          }
        },
        "RequiredIndicator": true,
        "Styles": {
          "Background": "SegmentedFormCellBackground",
          "Caption": "SegmentedFormCellCaption",
          "RequiredIndicator": "RequiredIndicatorColor"
        }
      }]
    }]
  }]
}

Style Classes Definition¶

/* Segmented Form Cell - Background */
.SegmentedFormCellBackground {
  background-color: yellow;
}

/* Segmented Form Cell - Caption */
.SegmentedFormCellCaption {
  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;
}