Text edit

The UI component Text Edit allows you to receive text input from the end-user. You can bind the input to a Custom App Variable or to a Property of a Data Source. This binding is two-way: The content of the variable or property will be displayed in the Text Edit, and all edits done by the end-user will be written back to the property.

You can see an example setup of the Text Edit component in the left menu of the UI Components App in our Showroom! You can try the Text Edit, as well as access the setup in Appfarm Create. If you do not have access, you can register here.

Settings

Here are some of the properties in Appfarm Create which are custom for Text Edit:

Value

The data source property or variable that the user input is bound to. This can be an App Variable, a Runtime Only Object Class property, or a Database Connected Object Class property.

If validation of the input is important, it is recommended to use a Runtime Only property or variable here, so that input validation can be performed before persisting input to the database.

Error

Define an event where the component will enter an error state. This can be through binding to a Data Source Property, setting up a Condition, or a JavaScript function. This can be used to alert the user of a required field when filling in a form or to alert the user that some of their input data is not correct.

Update on Keypress

If this box is checked, the property defined in Value will be updated every time the user presses a key on their keyboard. If changes to the property persist straight to the database, or has a lot of dependent logic, this setting may have a negative performance impact.

Label

A built-in label that tells the user what the Text Edit will be used for. This could be First Name, Email Address, or Postal Address, for instance. Labels are always visible to the user.

Placeholder Text

This is a piece of text that appears whenever the Text Input is blank. It can be used to describe the preferred input format or guide the user to start typing, for instance. This text disappears when the user begins to type.

Helper Text

This serves a similar function to Placeholder Text, but it is always visible regardless of the user's input. This can be used if input format is important, for example in a phone number, to give the end user further guidance. Helper text appears below the input text.

Input Data Type

Behaviour may differ between browsers, please refer to this link for full browser support and documentation.

This specifies the data type of the input. This allows Appfarm Create to automatically perform input formatting or input validation for you.

• Text: The default input data type. Treats the input as plain text.

• Number: This will only allow numerical input using the characters 0-9.

• Password: This will treat the input as a password, and automatically censor the characters entered.

• Email: This will treat the input as an email address.

• Phone Number: This will treat the input as a phone number.

• Date: This will treat the input as a date. The user can input a date using the default format dd.mm.yyyy

• Time: This will treat the input as a time. The user can input a time using the default format hh:mm

• Date & Time: This will treat the input as a datetime. The user can input both a date and a time, using the default formats dd.mm.yyyy and hh:mm

• Search: This will treat the input as a search term. This can be used to find items matching a search term in a database, for instance.

Input Mode

Behaviour may differ between browsers, please refer to this link for full browser support and documentation.

This tells Appfarm Create which input mechanism to use for this Text Edit. On mobile devices, this may change the keyboard provided to the user. It is important to consider that inputs that require an input type should make use of the Input Data Type property instead.

• None

• Text: Standard input keyboard

• Decimal: Allows the user to enter float numerical values, for instance 1.08 or 3,14. The decimal separator will be determined by the user's locale.

• Numeric: Shows a numeric input keyboard.

• Phone Number: Allows for the digits 0-9, the * character and the # character.

• Search: A virtual keyboard optimised for search input. For instance, the return key can be labelled "Search" instead.

• Email: A virtual keyboard optimised for entering email addresses. Optimisations can include easier access to the @ key

• URL: A virtual keyboard optimised for entering a URL. This can make the / key more accessible, for instance.

Autocomplete

Provides guidance for automated assistance in filling out field values. Autocomplete is turned on by default, but without further guidance on which data type is expected. Autocomplete can be turned off by typing off in this field. Please refer to this link for a list of accepted values and expected behaviour.

Min Date

Only available for the Date and Date & Time input data types. Specifies the earliest date that the input will allow.

Max Date

Only available for the Date and Date & Time input data types. Specifies the latest date that the input will allow.

Max Length

Not available for the Number, Date, Time or Date & Time input data types. Specifies the maximum number of characters that the input will allow.

Multiline

Only available for the Text input data type. Enabling this property will provide the user with a multi-line text area to input plaintext. This property can be useful for situations where longer text inputs are expected, such as a Description field. Having the Multiline enabled reveals two new options: Rows and Max Rows. Rows is the default (and minimum) number of lines that are displayed, and hence also serve as the default height of the Text Input. Max Rows may be used to define the maximum number of rows to be displayed. The user may enter longer text, resulting in a scroll inside the Text Edit.

Auto Focus

When selected, this Text Edit will be focused automatically when the screen is rendered. Useful if you want to guide the user directly to the place to start typing.

Select Text on Focus

When selected, all text contained within the Text Edit component will be highlighted when the Text Edit gains focus.

Tab Index

Users can use the Tab key to navigate between inputs and components on a screen. This property tells Appfarm Create which index to bind to the current Text Edit. This value should only be given when you want to override the default tab index. Using a tab index of -1 will remove the Text Edit from the tab index.

Appearance

Variant

Appfarm Create provides three different 'variants' of the Text Edit component. These are all available to view in the Appfarm Showroom.

• Standard

• Outlined

• Filled

Disable Underline

When selected, the Text Edit component will not have a line underneath.

Margin

Three choices are available for this property. These define the margin style between Text Edit components.

• Normal

• Dense

• None

Adornment

Adds an adornment to the Text Edit component. This can be in the form of an Icon Button, Icon, or Text. Adornments can be positioned at the start or the end of the Text Edit component. For instance, if a Text Edit component is used as a search field, an Icon Button adornment could be used with the magnifying glass icon.

Icon Button adornments can be linked to an Event Handler, described below.

Event Handlers

Event Handlers can detect a specific event occurring in Appfarm Create and can link these events to actions. The following Event Handlers are available for the Text Edit component:

• On Focus: This Event Handler will run an action when the Text Edit component gains focus.

• On Lost Focus: This Event Handler will run an action when the Text Edit component loses focus.

• On Enter: This Event Handler will run an action when the user presses the <Return> key. Note: not available when Multiline is enabled.

• On Value Change: This Event Handler will run an action when a change is detected in the data source bound to the Text Edit component. If the Update on Keypress value is selected, the On Value Change Event Handler will run each time a key is pressed.

• On Adornment Click: This Event Handler is only available when an adornment is added to the Text Edit component, and when this adornment is an Icon Button variant. This Event Handler will run an action when the adornment icon button is clicked.