Skip to content

SimpleProperty

The Simple Property control is a simple label that users can use to convey any information.

SimpleProperty Properties

Property Type Required Default
AlternateInput enum No
Caption string No
Enabled boolean No true
FormatRule Rule No ""
HelperText string No
IsEditable boolean No true
IsVisible boolean No true
KeyboardType enum No
OnValueChange ActionOrRule No
PlaceHolder string No
Separator boolean No true
Styles object No
Value string No
_Name string Yes
_Type const Yes
validationProperties ValidationProperties No

AlternateInput

Show the alternate input besides keyboard typing.

For Android, the accepted values are None and Barcode. For iOS, this control is displayed as a generic action button.

These are the list of barcode formats have been tested correctly in MDK on both iOS and Android. There may be additional formats supported beyond this list.

  • type: enum

The value of this property must be one of the known values listed below.

Value Description
None No secondary action.
Barcode To allow the use of camera to scan barcode and QR Code.

Caption

The key name of the property.

  • type: string

Enabled

Disables or enables interaction. The control will have a reduced opacity if this property is false.

  • type: boolean
  • default: true

FormatRule

If specified, the given rule executes when a control is initialized or when a value changes.

  • type: Rule
  • default: ""

HelperText

Helper text to be displayed if there is no validation view.

  • type: string

IsEditable

Sets the editability of the control. The text field will have a gray background if this property is false. Only applicable if the Enabled property is true, otherwise this property will be treated as false regardless of the value set.

  • type: boolean
  • default: true

IsVisible

Sets the visibility of the control.

  • type: boolean
  • default: true

KeyboardType

Show the appropriate keyboard type. To streamline data entry, the keyboard displayed when editing a SimplePropertyFormCell should be appropriate for the type of content in the field. If your app asks for an email address, for example, it should display the email address keyboard.

Because Number keyboard type in Samsung Android device cannot enter comma character, but comma is used as decimal seperator in some region (Italian / German,...), so the full keyboard will be used in this scenario.

  • type: enum

The value of this property must be one of the known values listed below.

Value Description
DateTime A keyboard type used to request an IME that is capable of inputting dates and times.
Default The system default keybord.
Email A keyboard type used to request an IME that is capable of inputting email addresses.
Number A keyboard type used to request an IME that is capable of inputting digits. For iOS, it comes with a toolbar with a Done button to dismiss the keyboard, and a negative sign button to insert a negative sign character.
Phone A keyboard type used to request an IME that is capable of inputting phone numbers. For iOS, it comes with a toolbar with a Done button to dismiss the keyboard.
Url A keyboard type used to request an IME that is capable of inputting URIs.
Password A keyboard type used to request an IME that is capable of inputting password.
NumberPassword A keyboard type used to request an IME that is capable of inputting number password. For iOS, it comes with a toolbar with a Done button to dismiss the keyboard.

OnValueChange

Action or rule to perform after value changed.


PlaceHolder

Placeholder text to display if Value is empty.

  • type: string

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 Background, Caption and Value.

  • type: object with following properties.
Property Type Required Default
Background string No
Value string No
Caption string No

Background

The string value is a style class name of Background.

Value

The string value is a style class name of Value.

Caption

The string value is a style class name of Caption.


Value

Text to display.

  • type: string

_Name

  • type: string

_Type

  • type: const

The value of this property must be:

"Control.Type.FormCell.SimpleProperty"

validationProperties

The validation view properties.


Examples

{
  "_Type": "Page",
  "_Name": "FormCellsPage",
  "Caption": "FormCell Example",
  "Controls": [{
    "_Type": "Control.Type.FormCellContainer",
    "_Name": "FormCellContainer",
    "Sections": [{
      "Caption": "Section1",
      "Controls": [{
        "_Type": "Control.Type.FormCell.SimpleProperty",
        "_Name": "SimplePropertyFormCell",
        "Caption": "Location",
        "PlaceHolder": "Address",
        "Value": "127 Higgins Drive, Palo Alto",
        "AlternateInput": "Barcode",
        "IsEditable": true,
        "Enabled": true,
        "HelperText": "This is helper text",
        "validationProperties": {
          "ValidationMessage": "Validation Message",
          "ValidationMessageColor": "ff0000",
          "SeparatorBackgroundColor": "000000",
          "SeparatorIsHidden": false,
          "ValidationViewBackgroundColor": "fffa00",
          "ValidationViewIsHidden": false
        },
        "Styles": {
          "Background": "SimplePropertyFormCellBackground",
          "Caption": "SimplePropertyFormCellCaption",
          "Value": "SimplePropertyFormCellValue"
        }
      }]
    }]
  }]
}

Style Classes Definition

/* SimpleProperty Form Cell - Background */
.SimplePropertyFormCellBackground {
  background-color: yellow;
}

/* SimpleProperty Form Cell - Caption */
.SimplePropertyFormCellCaption {
  background-color: #0000FF;
  color: black;
  font-style: body;  /* iOS Only */
  font-typeface: bold;  /* Android Only */
  font-size: 16px;
}

/* SimpleProperty Form Cell - Value */
.SimplePropertyFormCellValue {
  background-color: #0000FF; /* iOS Only */
  color: black;
  font-style: body;  /* iOS Only */
  font-typeface: bold;  /* Android Only */
  font-size: 16px;
}