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`	Optional	`"Center"`
ButtonType	`enum`	Optional	`"Text"`
Enabled	`boolean`	Optional	`true`
Image	Image	Optional
ImagePosition	`enum`	Optional	`"Leading"`
ImageSize	ImageSize	Optional
IsVisible	`boolean`	Optional	`true`
OnPress	ActionOrRule	Optional
Semantic	`enum`	Optional	`"Tint"`
Separator	`boolean`	Optional	`true`
Styles	`object`	Optional
TextAlignment	`enum`	Optional	`"Center"`
Title	`string`	Optional
_Name	`string`	Required
_Type	`const`	Required

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 equal to one of the known values 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 equal to one of the known values 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 equal to one of the known values 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 equal to one of the known values 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: object with following properties.

Property	Type	Required
Background	`string`	Optional
Value	`string`	Optional
Image	`string`	Optional
Button	`string`	Optional

Background¶

[Deprecated. Use Button instead.] The string value is a style class name for Background.

Background style class

Value¶

[Deprecated. Use Button instead.] The string value is a style class name for Value.

Button style class

Image¶

The string value is a style class name for Image. It is applicable only to SAP icon or font icon types (Supported CSS properties are font-size and color).

Image style class

Button¶

The string value is a style class name for 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 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"
        }
      },
      {
        "_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;
}