Guided Workflow Screen Components - Text Input
Updated
Overview
A text input is a fundamental user interface element that enables users to enter a single line of text. Commonly found in forms and applications, it serves as a versatile tool for collecting textual data from users. Text input fields can be configured with specific validation patterns, such as requiring an email address to follow a format like "@gmail.com" or ".com", ensuring that the input meets certain criteria. Additionally, developers can customize the appearance of the text input by adjusting properties like width, text alignment, and enabling or disabling the field based on specific conditions, which can prevent users from entering data when necessary. This simplicity and flexibility make text inputs essential components in user interface design.
Key Characteristics
Single-Line Input: It is designed for short text entries like names, email addresses, or search queries. Unlike a text area, it does not support multi-line input.
Placeholder Text: It provides guidance or examples of what users should enter in the field (e.g., "Enter your name").
Input Attributes: It can be customized to accept specific types of input, such as numbers, email addresses, passwords, or regular text. In this attributes like maxlength (maximum character limit) and required (mandatory field) are often used.
Dynamic Validation: It can include built-in or custom validation to ensure data correctness (e.g., email format, password strength).
Styling: It can be styled to match the application's design, including changes in size, border, and color.
Various Fields in Text Input Component
API Name: The API Name is a unique identifier used to reference a particular object, field, or component in an application programmatically. It is typically used in backend code, integrations, or API calls. API Names are often system-generated and follow a specific naming convention, such as using underscores instead of spaces (e.g., Customer_Status__c).
Label: The Label is the user-friendly name for an object, field, or component that is displayed in the user interface (UI). It is designed to be easily understood by end-users and often includes spaces or capitalization for readability (e.g., "Customer Status").
Help Text is the text that will be displayed to the end user to help them understand the label’s meaning.
Mark Field as Mandatory: To mark the field mandatory, if the field is not filled, it will not allow the user to move to the next step.
Default value: It is the preset value used when the end user fills in nothing.
Width: Define the area of the input field by default; it is set to 100%
Input Mask Pattern: Define the structure of user input using pattern characters. "9" allows digits, "a" allows letters, and "*" allows letters, digits, and special characters.
Display Mask Character: Replaces each visible character in the input pattern with the specified mask character. Used for masking input while retaining validation logic. For pattern 99/aa and mask #, input appears as ##/## but still enforces 2 digits and 2 letters.
Regex Pattern: Provide a regular expression to validate the user's input.
Alignment
Start Alignment: The content (text, images, or elements) is aligned to the left side
Center Alignment: The content is aligned to the center (horizontally and/or vertically).
End Alignment: The content is aligned to the right side.
Restricted Keyword Lists: It is a multi-select configuration field. It enables you to assign one or more predefined keyword lists. If your input contains any terms from the selected restricted keyword lists, an error message will be triggered. This message is configurable once you enable the Configure Error Messages toggle. This feature helps you maintain better input quality control and enforce compliance with or content guidelines dynamically within your workflow.
Enable Reporting: This toggle allows you to specify whether the auto-drafted values in the screen component should be included in reporting. When enabled, this ensures that auto-saved data is captured and made available for analytics, addressing gaps in reporting accuracy caused by un-submitted workflows.
Configure Error Message: This field allows you to create a warning message for users in the following conditions:
If the value is not entered.
If the value entered does not match the supported regex.
If the text entered has restricted keywords.
Visibility Conditions: A rule or set of rules that determine whether a specific element, field, or component is visible to users in an application or interface. These conditions are typically based on factors such as field values or contextual data. Visibility conditions ensure that users only see relevant information, improving usability and security.
Example
Condition: Display a "Priority Escalation" section if the "Ticket Priority" is set to "High."
Implementation: Visibility Condition: Ticket_Priority == 'High'
Result: The "Priority Escalation" section appears only for high-priority tickets.
Disability Condition: A rule or set of criteria that determines whether a specific element, such as a field, button, or component, should be disabled (i.e., grayed out and non-interactive) in a user interface. It restricts user interaction based on certain conditions, ensuring that actions are contextually valid or preventing errors.
Example:
Based on Field Value:
Condition: Disable the "Submit" button if the "Terms and Conditions" checkbox is unchecked.
Result: The user cannot submit the form until they accept the terms.
Based on User Role:
Condition: Disable the "Delete Record" button for users without "Admin" permissions.
Result: Only admins can delete records, while other users see the button but cannot interact with it.
Based on Data Completeness:
Condition: Disable the "Next" button until all required fields are filled.
Result: Users are prevented from moving forward until they complete the required steps.