About MultiLineTextField
The MultiLineTextField component is used to receive multi-line string input from the user. It is similar to the TextArea component, but reflects Material Design elements and supports the usecharcount property, which allows you to display the length of the value being entered and validate the input.
The MultiLineTextField component is designed to allow the user to enter multi-line strings, so it does not restrict the form of the input value. If you want to allow only specific strings to be entered, use the TextField component.
Usage examples
If your service requires a certain length of value to be entered, the number of characters that can be entered and the number of characters currently entered at the bottom of the input window may be displayed.
Using MultiLineTextField
To use the MultiLineTextField component, you need to add the TextField component in TypeDefinition.
1
In Project Explorer, double-click [TypeDefinition > Objects].
2
In Modules, expand MobileComp.json.
3
Click the [+] icon next to nexacro.MultiLineTextField and add the MultiLineTextField component to the Objects list.
Displaying charcounttext Based on Text Length
Displays charcounttext by changing the value of the usecharcount property based on the length of the text entered.
Example
Displays charcounttext when the maxlength property value is over 70%.
sample_edit_01_01
sample_multilinetextfield_01.xfdl
Core features used in the example
- usecharcount
If the maxlength property value has been set, charcounttext will be displayed in the form of "Currently entered text length / maxlength property value."
- maxlength
Set the maximum length of text that can be entered.
How to implement an example
1
Place a MultiLineTextField component on the page.
2
Set the maxlength property value of the component to "100" and change the usecharcount property value to false.
3
Add the oninput event handler function as shown below.
this.MultiLineTextField00_oninput = function(obj:nexacro.MultiLineTextField,e:nexacro.InputEventInfo)
{
var currentLength = this.MultiLineTextField00.getLength();
var maxAllowedLength = this.MultiLineTextField00.maxlength * 0.7;
if(currentLength > maxAllowedLength)
{
this.MultiLineTextField00.usecharcount = true;
} else {
this.MultiLineTextField00.usecharcount = false;
}
};4
Run QuickView (Ctrl + F6) to verify that the charcounttext is displayed when more than 70 characters are entered into the MultiLineTextField component.