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 Optional "Center"
ButtonType enum Optional "Text"
Image Image Optional
ImagePosition enum Optional "Leading"
ImageSize ImageSize Optional
IsVisible boolean Optional true
OnPress ActionOrRule Optional
Semantic enum Optional "Tint"
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.

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


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 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.

Styles

Set styles for button.

  • type: object with following properties.
Property Type Required Default
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.

Value

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

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).

Button

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