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


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