Phone number - PhoneInput

Availability of functionality depends on the license and may not be available in all deployments.

The phone number is a text component that allows entering a phone number and country prefix. After filling in the prefix, in some implementations information about the country to which a given number is assigned is displayed. The number of characters allowed in the phone number field is validated depending on the selected prefix.

✅ When to use:

• The number should include the country prefix.

❌ When not to use:

• The phone number is not to include the prefix, or greater flexibility in entering the number is needed. Use: TextField.

Component properties

Eximee Designer property	Attribute name in the Source	Description
Inactive field displayed as a label (section Basic properties)	labelIfDisabled	Specifies whether the inactive field should be displayed as a label (default value "false").
Default prefix (section Data quality)	defaultPrefix	Default prefix value for the field.
Mask matching error message (section Data quality)	maskValidationError	Error label displayed when a value inconsistent with the defined mask is entered.
Mask (section Data quality)	mask	Regular expression (REGEX) mask validating the correctness of the data in the field.
Invalid prefix (section Data quality)	invalidPrefixValidatorError	Error label displayed when the value is inconsistent with prefix validation.
Prefix label (section Data quality)	prefixLabel	Allows defining a description (label) for the prefix.
Prefix editability condition (Source)	prefixEnabledCondition	It enables or blocks changing the prefix. To block changes, add the attribute prefixEnabledCondition="js:false" in the source.

More information about component properties: Common component properties

Figure 1. Example appearance of the component in the request.

Figure 2. Example appearance of the component without country information

Retrieving a value from the component

The component value is json:

{"prefix":"48","phone":"614151000","phoneTouched":true,"prefixTouched":true,"phoneConfirmationState":"NONE"}

Example script returning a phone number (without prefix):

// example GesPhoneInput value: {"prefix":"48","phone":"614151000","phoneTouched":true,"prefixTouched":true,"phoneConfirmationState":"NONE"}

function callService(context) {
    const rawPhoneData = context.getFirstParameter('GesPhoneInput');
    
    if (!rawPhoneData) {
        return [{ 'phoneNumber': null }];
    }

    try {
        const phoneState = JSON.parse(rawPhoneData); //parsing GesPhoneInput (JSON)
        const phoneNumber = phoneState.phone || null;
        
        return [{ 'phoneNumber': phoneNumber }];
    } catch (error) {
        return [{ 'phoneNumber': null }];
    }
}

Individual values can be retrieved on demand using specific attributes available in the component with: ${componentId$attribute}

Available attributes:

• GesPhoneInput1$phone - phone number
• GesPhoneInput1$prefix - prefix without plus sign
• GesPhoneInput1$prefixWithPlus - prefix with plus sign
• GesPhoneInput1$fullPhone - full number with plus sign

In the script, these attributes can be retrieved using getData, e.g. getData("GesPhoneInput1","fullPhone")

Passing a value to the component

Passing as a data source from another field

Example JSON(String) object passed to the component:

{"prefix":"48","phone":"614151000","phoneTouched":true,"prefixTouched":true,"phoneConfirmationState":"NONE"}

The object can be passed, for example, via a session variable and set in the attribute Data source from another field:

Figure 3. Setting the value as a session variable

Figure 4. Passing the session variable to the component

Figure 5. Component with an example phone number and prefix value set

Feeding from an external data source (EDS)

The component can also be fed via an External Data Source. Example EchoService script:

function callService(context) {

    const phoneNumber = "614151000";
    const phonePrefix = "36";

    return [{ 
        "phoneNumber": phoneNumber,
        "phonePrefix": phonePrefix
    }];
}

Figure 6. Mapping the script to the component

Demo request: demoPhoneInput