Skip to content

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.


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


IsVisible

Sets the visibility of the control.

  • type: boolean
  • default: true

OnPress

Action/Rule to be triggered when the button is pressed.


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: object with 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.

Value

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

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.

Button

The string value is a style class name of Button.


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