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 |
|---|---|---|---|
| Alignment | enum |
No | "Center" |
| ButtonType | enum |
No | "Text" |
| Enabled | boolean |
No | true |
| Image | Image | No | |
| ImagePosition | enum |
No | "Leading" |
| ImageSize | ImageSize | No | |
| IsVisible | boolean |
No | true |
| OnPress | ActionOrRule | No | |
| Semantic | enum |
No | "Tint" |
| Separator | boolean |
No | true |
| Styles | object |
No | |
| TextAlignment | enum |
No | "Center" |
| Title | string |
No | |
| _Name | string |
Yes | |
| _Type | const |
Yes |
Alignment¶
Choose one of the options based on how you want the content alignment on your button to appear.
- type:
enum - default:
"Center"
The value of this property must be one of the known values listed below.
Alignment Known Values¶
| Value | Description |
|---|---|
Left |
|
Right |
|
Center |
ButtonType¶
The important types of the button.
- type:
enum - default:
Text
The value of this property must be one of the known values listed below.
| Value | Description |
|---|---|
Primary |
Emphasize the most important actions. |
Secondary |
Less emphasis but still require users's attention. |
Text |
Less important actions users can take. |
Enabled¶
Sets the button as enabled or disabled.
- type:
boolean - default:
true
Image¶
The image to be displayed along with the title.
- type: Image
ImagePosition¶
Position of the image to be displayed along with the title
- type:
enum - default:
"Leading"
The value of this property must be one of the known values listed below.
ImagePosition Known Values¶
| Value | Description |
|---|---|
Leading |
|
Trailing |
ImageSize¶
Size of the image to be displayed along with the title
- type: ImageSize
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
Semantic¶
Use the semantic buttons for positive and negative actions.
- type:
enum - default:
Tint
The value of this property must be one of the known values listed below.
| Value | Description |
|---|---|
Normal |
Use it for neutral actions, e.g. Back / Cancel. |
Tint |
Use it for positive actions, e.g. Update / Add / Approve. |
Negative |
Use it for negative actions, e.g. Delete / Reset / Reject. |
Separator¶
Sets the visibility of the separator line below the control. This property will take precedence over ControlSeparator
in section and is only supported for Form Cell control in Sectioned Table and not supported in Form Cell Container.
- type:
boolean - default:
true
Styles¶
Set styles for button.
- type:
objectwith following properties.
| Property | Type | Required | Default |
|---|---|---|---|
| Background | string | No | |
| Value | string | No | |
| Image | string | No | |
| Button | string | No |
Background¶
[Deprecated. Use Button instead.] The string value is a style class name of Background.
- Background style class
Value¶
[Deprecated. Use Button instead.] The string value is a style class name of Value.
- Button style class
Image¶
The string value is a style class name of Image. The CSS property background-color is supported for all image types (iOS only), while font-size and color are additionally supported for SAP icon and font icon types.
- Image style class
Button¶
The string value is a style class name of Button.
- ButtonNew style class
TextAlignment¶
[Deprecated. Use Alignment instead.] 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 one of the known values listed 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:
"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"
}
},
{
"_Type": "Control.Type.FormCell.Button",
"_Name": "Button4",
"Title": "Default Alignment",
"OnPress": "/MDKApp/Rules/FormCell/SwitchChanged.js",
"Styles": {
"Background": "FormCellBackgroundStandard",
"Value": "FormCellButtonStyleDefault"
},
"Enabled": false
}]
}]
}]
}
Style Classes Definition¶
/* Button Form Cell - Background */
.ButtonFormCellBackground {
background-color: yellow;
}
/* Button Form Cell - Value */
.ButtonFormCellValue {
background-color: #0000FF;
color: black;
font-style: body; /* iOS Only */
font-typeface: bold; /* Android Only */
font-size: 16px;
}