Note¶

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

Note Properties¶

Caption¶

Displays label on the control. In Android, if the caption is not specified or left empty, it will maintain the spacing between the caption and note.

• type: string

Enabled¶

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

• 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¶

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

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.

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

Caption¶

The string value is a style class name of Caption.

• Caption 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.Note"

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.Note",
        "_Name": "NoteFormCell",
        "PlaceHolder": "Description",
        "Caption": "Note",
        "FormatRule": "/AssetWorkManager/Rules/FormatRule.js",
        "IsEditable": true,
        "Enabled": true,
        "MaxNumberOfLines": 6,
        "MinNumberOfLines": 2,
        "HelperText": "This is helper text",
        "Validation": {
          "Message": "This is validation view message",
          "Visible": true,
          "SeparatorVisible": true,
          "Styles": {
            "Message": "ValidationMessage",
            "ValidationView": "ValidationView"
          }
        },
        "Styles": {
          "Background": "NoteFormCellBackground",
          "Caption": "NoteFormCellCaption",
          "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 - Caption */
.NoteFormCellCaption {
  background-color: #0000FF;
  color: black;
  font-style: body;  /* iOS Only */
  font-typeface: bold;  /* Android Only */
  font-size: 16px;
}

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

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

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