Text Field component

🌐 This document is available in both English and Ukrainian. Use the language toggle in the top right corner to switch between versions.

1. Component description

The Textfield component is an interface element that can be used to enter short and general text. There are options for defining input and validation masks, allowing users to shape information into desired formats.

Use the Textfield from the list of Latest components.

2. Main functions

The Textfield component supports a large number of options for use when interacting with the process form, which are divided into tabs.

  • Display

  • Data

  • Validation

  • API

  • Conditions

  • Table

  • Label: The name of the component that appears next to it.

  • Label Position: determines the position of the name relative to the component (top, right, left, or bottom).

    • For options Left (Left-aligned), Left (Right-aligned), Right (Left-aligned), Right (Right-aligned).

      • Label Width: sets the width occupied by the Label as a percentage relative to the input.

      • Label Margin: sets the offset between Label and input in percentage.

  • Placeholder: is the text that is displayed in the field when it is empty (unfilled).

  • Description: a description of the component that can help users.

  • Tooltip: The text displayed when hovering the cursor over the component.

  • Prefix: the text that shows before the input field data.

  • Suffix: the text that shows after the input field data.

  • Input Mask: helps the user enter data by providing a predefined format. See the documentation for more information jquery.inputmask.

  • Tab Index: An HTML attribute that allows you to control keyboard navigation through the input fields. For details, refer to HTML documentation — for example, here: tabindex.

  • Autocomplete: allows you to configure the possibility of the input field being automatically filled with values saved in the browser. The main values are on and off, you can learn more about the properties of this field at here.

  • Hidden: An attribute for fields that are hidden from the users but are still part of the form and are submitted along with the form. Don’t forget to clear the Clear when hidden option; otherwise, any value of this component will be empty.

  • Hide Input: disguises input into the field by replacing characters with circles, which are often found in password fields. Use this setting when working with sensitive data.

  • Disabled: A setting that disables editing.

  • Default Value: values by default.

  • Text Case: after entering data, you can change the case of the text.

    • Mixed: mixed case.

    • Uppercase: upper case.

    • Lowercase: lower case.

  • Clear value when hidden: allows to configure the clearing of the component value when the component becomes hidden on the page.

  • Custom default value: allows to set your own, custom default value for the component. This function uses JS insert. More about JS insets.

    • JavaScript: set your own value by using javascript

    • JSONLogic: set your own value by using JSONLogic.

  • Calculated value: allows to calculate the value of a component based on other data or conditions. Unlike Custom default value, the value of the field will be calculated every time any changes occur on the form - the user enters data, it is completed by http requests. This function uses JS insert. More about JS inserts.

    • JavaScript: adjust your own value with javascript help.

    • JSONLogic: adjust your own value with help of JSONLogic.

  • Allow manual override of calculated value: allows users to manually override the calculated value of the component.

  • Validate On: specifies when this component should activate validation on the client (Change or Blur options).

  • Required: the field is required to be filled in before sending the form.

  • Trim Spaces: видаляє пробіли на початку та в кінці.

  • Minimum Length: set a minimum length requirement for this field.

  • Maximum Length: set the maximum length requirement for this field.

  • Minimum Word Length: set the minimum number of words that can be added to this field.

  • Maximum Word Length: set the maximum number of words that can be added to this field.

  • Regular Expression Pattern: set the regular expression pattern check that the field value must pass before the form is submitted.

  • Custom error message: a special error message displayed when data fails validation.

  • Custom validation: custom validation, which allows you to create validation checks specific to your needs. This function uses JS insert. More about JS insert.

  • Property Name: the name of the field in the data structure that will be sent when the form data is submitted. It is also the name of the field in the data structure with which the form is prefilled. The current value of this field can be checked in the data structure displayed on the Query tab in the form design interface.

  • Advanced Conditions: Here, you can configure advanced conditions for the component. For example, these conditions determine when a component becomes visible based on other components or their values.

    This function uses JS plugins. For details, see Variables in JavaScript insertions.

  • Simple: Performs the same tasks as Advanced Conditions but allows you to specify conditions in a simpler format.

  • Table View: determines whether to display the element in the table and in the EditGrid.

  • Table column width: allows to customize the column width in the table that is displayed when using the component in EditGrid.

  • Sort As Number: determines whether to sort the value as a string or as a number when using the EditGrid component.

3. Data format

Submission
String
// Example: 'Test'

4. Use cases

4.1. Set mask for phone number

In the Input Mask field, enter: +38(999) 999-9999

4.2. Removal of spaces at the beginning and at the end (Trim Spaces)

To configure the functionality, follow these steps:

  1. Enter the form modeling interface.

  2. Find Constructor.

  3. In the left panel, open the Updated components.

  4. Select the Textfield component and drag it to the modeling panel.

    text field trim spaces 1

  5. In the new window, open the Validation tab.

  6. Activate the function Trim Spaces and click Save to save the changes.

    text field trim spaces 2

  7. Open the View tab to check the result of the function.

    The `Trim Spaces' function works in such a way that when the user enters values in the text field on the form that contain spaces at the beginning (before the text) or at the end (after the text), such spaces are removed when the request is sent from the form.

    text field trim spaces 3

  8. Enter some spaces, a text value, and some spaces again.

  9. Go to the Query tab and see the result in the code.

    text field trim spaces 4

    The JSON code contains values without spaces before and after the text.

    If the text value contains 2 or more words, the spaces between the words are not removed, which can be seen in the code.

    text field trim spaces 5

    text field trim spaces 6