Text Field

Introduction

The Text Field is a standard HTML input element used to collect users' information in a form.

How does it work?

To see how the Text Field works, follow these steps:

1. Open up a form in the Form Builder
2. Drag and drop a Text Field element onto the canvas.
3. Click the Text Field element to open the Configure Text Field properties.
4. Fill up the following fields:
   • Label: Name
   • ID: name
5. Click Apply Change and Save the changes on the Form Builder.
   
6. Click Preview and try entering values into the Text Field.
   

Configuration Settings

Configure text field

Configuring the Text Field involves setting the label, ID, and advanced options to customize its behavior.

Fill in the following fields:

• Label: The element label to be displayed to the end-user. It's a mandatory field, and you can add Font Awesome Icons to your menu labels
• ID: The element ID. By declaring it as name, a corresponding database table column c_name will be created. See Form Element for more information about defining the ID and a list of reserved IDs.
• Suggestion: The Form Builder suggests an ID for an element based on the Label you have entered. Clicking on Accept will overwrite the value in ID with the suggested value.

Advanced options

Advanced options for the Text Field element provide additional settings to customize its functionality and behavior further. These settings include data management, UI customization, workflow integration, and number formatting to ensure the Text Field meets specific requirements and enhances the user experience.

Data

Data settings for the Text Field element include defining default values, setting maximum character length, applying validation rules, and options for input sanitization and encryption.

Configure the following fields:

• Value: Default value when no existing value is found. A hash variable is accepted here. For example, you may key in #currentUser.firstName# #currentUser.lastName# to pre-populate the field with the currently logged-in user's name.
• Max Length: Maximum character length allowed.
• Validator: Validator: Attach a Form Validator plugin to validate the input value. Validation will occur whenever a form is submitted except when submitted as Save as Draft
• Encryption: Determines if the value should be encrypted upon saving into the database. See Protect Sensitive Data.
• Sanitize Input Value? Checking the box will sanitize the input value before storing it in the database. See Form Input Sanitization.

UI

UI settings for the Text Field element help customize its appearance and behavior, including setting placeholders, determining size, and configuring read-only display options.

Configure the following fields:

• Placeholder: The placeholder attribute specifies a short hint describing the input field's expected value (e.g., a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value.
• Size: Width of the element.
• Readonly: Determines if the element is editable.
• Display field as Label when readonly?: Displays the value of the element as plain text when an element is set to Readonly.

Workflow

Workflow settings integrate the Text Field with workflow processes, allowing values to be saved and used within workflow variables.

• Workflow Variable: If the form is part of a workflow process, upon saving the form by clicking Save as Draft or Complete, the value in this input field will be saved into the corresponding Workflow Variable named in this field.

Number Formatting

Number formatting settings for the Text Field element allow you to define the display format for numerical input, including the use of thousand separators, prefixes, postfixes, and decimal places. It also includes an option to store the value only as a numeric value.

Configure the following fields:

• Formatting Style: Choose between the options below.
  • US Style Formatting (1,000.00)
  • European Formatting (1.000,00)
• Store as Numeric Value?: When Formatting Style is applied, the value is stored as it is. You may check this option to strip off formatting and store it as a numerical value only.
• Disable Increment/Decrement feature? When Formatting Style is applied, you may check this option to remove stepper controls next to the textfield.
  

Common Issues & Troubleshooting

• Using a non-existent Workflow Variable name
  You will get a warning with the name printed out (e.g., status) in the server log if you attempt to map to a non-existent Workflow Variable.

context attribute status does not exist in process context - adding new attributes to the process context is not allowed

Related Links

• Protect Sensitive Data
• Form Input Sanitization
• Autocomplete Text Field
• Format Form Fields Side by Side