Overview

The Phone Input component is used to collect phone numbers from users while ensuring they enter valid and properly formatted phone numbers. This component supports default country code functionality, simplifying the user experience by automatically pre-selecting the appropriate country code for the user.

​

Key Features of Phone Input

1. Default Country Code:
   You can define the default country code that will automatically appear when the user interacts with the guided path via the "Default Country Code" field.

2. Include Country Codes:
   The Include Country Code field lets you define the available country codes for selection, customizing the options that will appear in the country code dropdown.

​

Fields of the Phone Input Component

• API Name

  The API Name is a unique identifier for a specific object, field, or component, typically used programmatically or in backend integrations. It often follows a convention with underscores separating words (example, Customer_Status__c).

• Label: The Label is the user-friendly name for a component, field, or object displayed in the user interface (UI), designed for easy readability by end-users (e.g., "Customer Status").

• Help Text: This is additional information displayed to the user to provide clarity on the purpose of the field or label.

• Mark Field as Mandatory: You can mark the field as mandatory, meaning the user cannot proceed to the next step without filling out the field.

• Default Value: This is a preset value applied when the user leaves the field empty.

• Regex Pattern: You can define the regex validation for phone number input.

​

​

• Enable Country Code: You can enable this feature to require users to enter the correct country code. If selected, users will have to choose or enter a country code.

• Default Country Code: In this field, you can select the country code dynamically from the resource picker. You can configure the country code dynamically in Guided Workflows using the following methods:

  • Using the Update Property Node: If the country code is coming from an API, use the Update Property node to extract the country code from the API response and store it in a variable. This variable can then be mapped to the country code field using the Resource Selector.

  • Using the Resource Picker

    : If you already know the country code, you can directly enter a static value (e.g.,

    for Great Britain,

    for the United States) within the Resource Picker.

• Include Country Code: When this option is left unselected, the field will automatically display country codes for all available countries. If a few country codes are selected, then the user can choose from the available options.

• 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 or content guidelines dynamically within your workflow.

• Configure Error Message: This feature allows you to create a warning message for users in the following conditions:

  • If the value is required

  • If the value entered does not match the supported regex.

  • If text entered has restricted keywords

• Width: You can enter the width of the field in percentage. The maximum width possible is 100%.

• Alignment Options:

  • Start Alignment:
    The content is aligned to the left side. This is commonly used in structured designs where logical flow is important, such as pairing text with images on the right.
    Example: A title and subtitle on the left with an open space for visuals on the right.

  • Center Alignment:
    Content is aligned to the center. Best used for symmetrical designs or when content needs to be emphasized from all sides.
    Example: A sales announcement with the title and subtitle centered for maximum focus.

  • End Alignment:
    Content is aligned to the right side, providing a modern or unconventional look. This is typically used with visuals or empty space on the left.
    Example: Title and subtitle on the right with decorative imagery or emphasis on the left.

• Visibility Conditions: Visibility conditions are rules that determine whether a particular field, component, or element is visible to users, based on specific factors such as user roles, field values, or contextual data. This ensures that users only see relevant information, enhancing 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 is displayed only for high-priority tickets.