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