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 |
No | false |
| Caption | string |
No | |
| HelperText | string |
No | |
| IsEditable | boolean |
No | true |
| IsVisible | boolean |
No | true |
| OnValueChange | ActionOrRule | No | |
| Segments | complex | No | |
| Separator | boolean |
No | true |
| Styles | object |
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. Only iOS and Web support this property.
- 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¶
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 and Caption.
- type:
objectwith following properties.
| Property | Type | Required | Default |
|---|---|---|---|
| Background | string | No | |
| Caption | 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
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:
"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: body; /* iOS Only */
font-typeface: bold; /* Android Only */
font-size: 16px;
}