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.

Segmented Properties¶

Property	Type	Required	Default
ApportionsSegmentWidthsByContent	`boolean`	Optional	`false`
Caption	`string`	Optional
HelperText	`string`	Optional
IsEditable	`boolean`	Optional	`true`
IsVisible	`boolean`	Optional	`true`
OnValueChange	ActionOrRule	Optional
Segments	complex	Optional
Styles	`object`	Optional
Value	`string`	Optional
_Name	`string`	Required
_Type	`const`	Required
validationProperties	ValidationProperties	Optional

ApportionsSegmentWidthsByContent¶

Indicates whether the control attempts to adjust segment widths based on their content widths.

type: boolean
default: false

Caption¶

Displays label on the control.

type: string

HelperText¶

iOS and Web only. 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

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

Styles¶

Set styles for Background and Caption.

type: object with following properties.

Property	Type	Required	Default
Background	`string`	Optional
Caption	`string`	Optional

Background¶

The string value is a style class name for Background.

Background style class

Caption¶

The string value is a style class name for Caption.

Caption style class

Value¶

The value of the cell. When not specified or not found in the Segments no selection is made.

type: string

_Name¶

type: string

_Type¶

type: const

The value of this property must be equal to:

"Control.Type.FormCell.SegmentedControl"

validationProperties¶

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",
        "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,
        "validationProperties": {
          "ValidationMessage": "Validation Message",
          "ValidationMessageColor": "ff0000",
          "SeparatorBackgroundColor": "000000",
          "SeparatorIsHidden": false,
          "ValidationViewBackgroundColor": "fffa00",
          "ValidationViewIsHidden": false
        },
        "Styles": {
          "Background": "SegmentedFormCellBackground",
          "Caption": "SegmentedFormCellCaption"
        }
      }]
    }]
  }]
}

Style Classes Definition¶

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

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