Note¶

The Note FormCell is a multi-line text entry control.

Note Properties¶

Property	Type	Required	Default
Enabled	`boolean`	Optional	`true`
FormatRule	Rule	Optional
HelperText	`string`	Optional
IsEditable	`boolean`	Optional	`true`
IsVisible	`boolean`	Optional	`true`
MaxNumberOfLines	`integer`	Optional	`2`
MinNumberOfLines	`integer`	Optional	`1`
OnValueChange	ActionOrRule	Optional
PlaceHolder	`string`	Optional
Separator	`boolean`	Optional	`true`
Styles	`object`	Optional
Value	`string`	Optional
_Name	`string`	Required
_Type	`const`	Required
validationProperties	ValidationProperties	Optional

Enabled¶

Disables or enables interaction.

type: boolean
default: true

FormatRule¶

Rule to perform on value.

type: Rule

HelperText¶

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

type: string

IsEditable¶

readonly or editable interaction.

type: boolean
default: true

IsVisible¶

Sets the visibility of the control.

type: boolean
default: true

MaxNumberOfLines¶

The maximum number of lines in which the text is displayed. The height of the cell grows to display the text within the specified number of lines. The default value is 2. Any value less than or equal to zero is considered as no limit.

type: integer
default: 2

MinNumberOfLines¶

The minimum number of lines in which the text is displayed. The height of the cell is restricted to the specified limit and the text is displayed within the line limit. The default value is 1 on the mobile platform and 4 on the web platform. Any value less than or equal to zero is not considered or is ignored.

type: integer
default: 1

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 the ControlSeparator in section, 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	Optional
Value	string	Optional

Background¶

The string value is a style class name for Background.

Background style class

Value¶

The string value is a style class name for Value.

ValueInput style class

Value¶

Text to display

type: string

_Name¶

type: string

_Type¶

type: const

The value of this property must be equal to:

"Control.Type.FormCell.Note"

validationProperties¶

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.Note",
        "_Name": "NoteFormCell",
        "PlaceHolder": "Description",
        "FormatRule": "/AssetWorkManager/Rules/FormatRule.js",
        "IsEditable": true,
        "Enabled": true,
        "MaxNumberOfLines": 6,
        "MinNumberOfLines": 2,
        "HelperText": "This is helper text",
        "validationProperties": {
          "ValidationMessage": "Validation Message",
          "ValidationMessageColor": "ff0000",
          "SeparatorBackgroundColor": "000000",
          "SeparatorIsHidden": false,
          "ValidationViewBackgroundColor": "fffa00",
          "ValidationViewIsHidden": false,
          "MaxNumberOfLines": 2
        },
        "Styles": {
          "Background": "NoteFormCellBackground",
          "Value": "NoteFormCellValue"
        }
      }]
    }]
  }]
}

NoteFormCell with FormatRule supporting PLT formatter¶

{
    "PlaceHolder": "Description",
    "_Name": "NoteFormCell",
    "_Type": "Control.Type.FormCell.Note",
    "FormatRule": "$(PLT,'/MDKDevApp/Rules/Uppercase.js','/MDKDevApp/Rules/Lowercase.js')",
    "Value": "...Add note here...",
    "IsEditable": true
}

Style Classes Definition¶

/* Note Form Cell - Background */
.NoteFormCellBackground {
  background-color: yellow;
}

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