Button¶
A button communicates the action that it is going to initiate. Users can tap a button to begin a process or workflow, or to trigger an action.
Button Properties¶
Property | Type | Required | Default |
---|---|---|---|
ButtonType | enum |
Optional | |
IsVisible | boolean |
Optional | true |
OnPress | ActionOrRule | Optional | |
Styles | object |
Optional | |
TextAlignment | enum |
Optional | "center" |
Title | string |
Optional | |
_Name | string |
Required | |
_Type | const |
Required |
ButtonType¶
- type:
enum
The value of this property must be equal to one of the known values below.
ButtonType Known Values¶
Value | Description |
---|---|
Button |
|
Normal |
IsVisible¶
Sets the visibility of the control.
- type:
boolean
- default:
true
OnPress¶
Action/Rule to be triggered when the button is pressed.
- type: ActionOrRule
- Formatter and Binding are not supported
Styles¶
Set styles for Background
and Value
.
- type:
object
with following properties.
Property | Type | Required | Default |
---|---|---|---|
Background | string |
Optional | |
Value | string |
Optional |
Background¶
The string value is a style class name for Background
.
Value¶
The string value is a style class name for Value
.
TextAlignment¶
Choose one of the options based on how you want the text alignment on your button to appear.
- type:
enum
- default:
"center"
The value of this property must be equal to one of the known values below.
TextAlignment Known Values¶
Value | Description |
---|---|
left |
|
right |
|
center |
Title¶
- type:
string
_Name¶
- type:
string
_Type¶
- type:
const
The value of this property must be equal to:
"Control.Type.FormCell.Button"
Examples¶
{
"_Type": "Page",
"_Name": "Formcell",
"Caption": "Button FormCell Example",
"Controls": [{
"_Type": "Control.Type.FormCellContainer",
"_Name": "FormCellContainer",
"Sections": [{
"Caption": "Button Form Cells",
"Controls": [{
"_Type": "Control.Type.FormCell.Button",
"_Name": "Button1",
"Title": "Left",
"OnPress": "/MDKApp/Actions/Messages/Message1.action",
"TextAlignment": "left",
"Styles": {
"Background": "ButtonFormCellBackground",
"Value": "ButtonFormCellValue"
}
},
{
"_Type": "Control.Type.FormCell.Button",
"_Name": "Button2",
"Title": "/MDKApp/Globals/Center.global",
"OnPress": "/MDKApp/Actions/Popover/Popover.action",
"TextAlignment": "/MDKApp/Globals/CenterLowercase.global",
"ButtonType": "Button",
"Styles": {
"Background": "FormCellBackgroundCritical",
"Value": "FormCellButtonStyle2"
}
},
{
"_Type": "Control.Type.FormCell.Button",
"_Name": "Button3",
"Title": "/MDKApp/Rules/FormCell/RightText.js",
"OnPress": "/MDKApp/Actions/Popover/Popover.action",
"TextAlignment": "/MDKApp/Rules/FormCell/RightTextLowercase.js",
"ButtonType": "Normal",
"Styles": {
"Background": "FormCellBackgroundCriticalTitle",
"Value": "FormCellButtonStyle3"
}
},
{
"_Type": "Control.Type.FormCell.Button",
"_Name": "Button4",
"Title": "Default Alignment",
"OnPress": "/MDKApp/Rules/FormCell/SwitchChanged.js",
"Styles": {
"Background": "FormCellBackgroundStandard",
"Value": "FormCellButtonStyleDefault"
}
}]
}]
}]
}
Style Classes Definition¶
/* Button Form Cell - Background */
.ButtonFormCellBackground {
background-color: yellow;
}
/* Button Form Cell - Value */
.ButtonFormCellValue {
background-color: #0000FF;
color: black;
font-style: UIFontTextStyleBody; /* iOS Only */
font-typeface: bold; /* Android Only */
font-size: 16px;
}