Title¶

This is a single-line text entry control. On Android, when IsEditable is set to true, the full text is displayed on multiple lines.

When assigning a rule to a property of Title, the rule will be passed an instance of the following proxy class as an argument:

TitleFormCellProxy

Title Properties¶

Property	Type	Required	Default
Enabled	`boolean`	No	`true`
FormatRule	Rule	No
HelperText	`string`	No
IsEditable	`boolean`	No	`true`
IsVisible	`boolean`	No	`true`
OnValueChange	ActionOrRule	No
PlaceHolder	`string`	No
Separator	`boolean`	No	`true`
Styles	`object`	No
Validation	Validation	No
Value	`string`	Yes
_Name	`string`	Yes
_Type	`const`	Yes
validationProperties	ValidationProperties	No

Enabled¶

Android Only. Disables or enables interaction.

type: boolean
default: true

FormatRule¶

Apply rule on Formcell.

type: Rule

HelperText¶

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

type: string

IsEditable¶

Indicates if the cell’s value may be modified. On Android, when this property is set to true, the full text is displayed on multiple lines.

type: boolean
default: true

IsVisible¶

Sets the visibility of the control.

type: boolean
default: true

OnValueChange¶

Action or rule to perform after value changed.

type: ActionOrRule
Formatter and Binding are not supported

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

type: object with following properties.

Property	Type	Required	Default
Background	string	No
Value	string	No

Background¶

The string value is a style class name of Background.

Background style class

Value¶

The string value is a style class name of Value.

ValueInput style class

Validation¶

The validation view properties.

type: Validation

Value¶

Text to display

type: string

_Name¶

type: string

_Type¶

type: const

The value of this property must be:

"Control.Type.FormCell.Title"

validationProperties¶

Deprecated. Please use Validation property. The validation view properties.

type: ValidationProperties

Examples¶

{
  "_Type": "Page",
  "_Name": "FormCellsPage",
  "Caption": "FormCell Example",
  "Controls": [{
    "_Type": "Control.Type.FormCellContainer",
    "_Name": "FormCellContainer",
    "Sections": [{
      "Caption": "Section1",
      "Controls": [{
        "_Type": "Control.Type.FormCell.Title",
        "_Name": "TitleFormCell",
        "PlaceHolder": "Title",
        "Value": "Work Request",
        "FormatRule": "/AssetWorkManager/Rules/FormatRule.js",
        "IsEditable": true,
        "Enabled": true,
        "HelperText": "This is helper text",
        "Validation": {
          "Message": "This is validation view message",
          "Visible": true,
          "SeparatorVisible": true,
          "Styles": {
            "Message": "ValidationMessage",
            "ValidationView": "ValidationView"
          }
        },
        "Styles": {
          "Background": "TitleFormCellBackground",
          "Value": "TitleFormCellValue"
        }
      }]
    }]
  }]
}

TitleFormCell with OnValueChange supporting PLT formatter¶

{
    "PlaceHolder": "Title",
    "Value": "This should be uppercase",
    "_Name": "TitleFormCell",
    "_Type": "Control.Type.FormCell.Title",
    "OnValueChange": "$(PLT,'/MDKDevApp/Actions/Messages/OnValueChangeIOS.action', '/MDKDevApp/Actions/Messages/OnValueChangeAndroid.action')",
    "IsEditable": true
}

Style Classes Definition¶

/* Title Form Cell - Background */
.TitleFormCellBackground {
  background-color: yellow;
}

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

/* Validation view */
.ValidationView {
  background-color: #83AF9B;
  border-top-color: #ff00ee;
}

/* Validation message */
.ValidationMessage {
  font-size: 16;
  font-color: #0000ff;
}