Skip to content

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
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

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.


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


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.

Caption

The string value is a style class name for Caption.


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.


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,
        "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;
}