Text Field

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 using the built-in App Expenses Claims:

1. Start the Joget Server and open the App Center.
2. Log in as admin and click the pencil icon on the Expenses Claim to open the App Composer.
   
3. Click Expense Claim New to be directed to the Form Builder.
   
4. Click the Title field (Example: China Travel, July Claims, etc.) to open the Text Field properties.
   
5. Click Preview and try entering values into the Text Field.
   

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.
• ID: The 'ID' in the property editor is a unique identifier.
  Joget core uses this ID as a column name within the table associated with the form (e.g. c_title in the figure above).
  When a user enters a value in the field during a workflow process, the value is stored in that column.
  If the ID has never been used in previous forms associated to the same table, a new column will be created.
  If the ID, on the other hand, has been used before, that column will be used. 
  It is important to note that when someone enters a value when completing a form during a workflow process, that value will overwrite the existing one.
• ID Suggestion: The Form Builder suggests an ID for an element based on the Label you have entered.
  
  
  
  Reserved IDs
  Do not use the following reserved IDs on the form element's ID attribute:
  
  

  • id (can be used but with caution)
  • appId
  • appVersion
  • version
  • userviewId
  • menuId
  • key
  • embed
  • primaryKey
  Auto Generated IDs
  Note the following IDs, as these are automatically generated upon creating a new form. Upon submission of the form in runtime, these fields will be updated automatically:
  

  • dateCreated
  • dateModified
  • createdBy
  • createdByName
  • modifiedBy
  • modifiedByName

  Recommended Naming Convention
  You recommend using snake_case (i.e., first_name) as this is the standard database naming convention. The ID declared will be part of the database table column name.

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: Attach a Validator plugin to validate the input value. See Form Validator for more information.
  
  When will validation takes place?
  Validation will occur whenever a form is submitted, except when submitted as Save as Draft.
  Available options include:
  • Basic
  • BeanShell
  • Date and Time Duplicate Validator
  • Directory
  • Duplicate Value
  • Equal Value
  • Multi Form Validator
  • Password
  • Plugin Template - Validator
• Sanitize Input Value? Checking the box will sanitize the input value before storing it in the database. See Form Input Sanitization.
• Encryption: Determines if the value should be encrypted upon saving into the database. See Protect Sensitive Data.

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.

Fill in the following field:

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

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

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 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.

Related tutorial 

• Form Input Sanitization