Numer telefonu - PhoneInput

Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.

Numer telefonu to komponent tekstowy umożliwiający wpisanie numeru telefonu oraz prefiksu kraju. Po uzupełnieniu prefiksu w niektórych wdrożeniach prezentowana jest informacja o kraju, do którego przypisany jest dany numer. Liczba znaków dopuszczalnych w polu numeru telefonu jest walidowana w zależności od wybranego prefiksu.

✅ Kiedy stosować:

• Numer powinien uwzględniać prefiks kraju.

❌ Kiedy nie stosować:

• Numer telefonu nie ma zawierać prefiksu lub potrzebna jest większa elastyczność wpisywanego numeru. Stosuj: TextField.

Właściwości komponentu

Właściwość Eximee Designer	Nazwa atrybutu w Źródle	Opis
Nieaktywne pole prezentowane jako etykieta (sekcja Podstawowe właściwości)	labelIfDisabled	Określa, czy nieaktywne pole ma być prezentowane jako etykieta (wartość domyślna "false").
Domyślny prefiks (sekcja Jakość danych)	defaultPrefix	Wartość domyślna prefiksu dla pola.
Komunikat błędu dopasowania do maski (sekcja Jakość danych)	maskValidationError	Etykieta błędu wyświetlana w przypadku wprowadzenia wartości niezgodnej ze zdefiniowaną maską.
Maska (sekcja Jakość danych)	mask	Maska wyrażenia regularnego (REGEX) walidująca poprawność danych w polu.
Niepoprawny prefiks (sekcja Jakość danych)	invalidPrefixValidatorError	Etykieta błędu wyświetlana w przypadku wartości niezgodnej z walidacją prefiksu.
Etykieta prefiksu (sekcja Jakość danych)	prefixLabel	Umożliwia zdefiniowanie opisu (etykiety) dla prefiksu.
Warunek edytowalności prefiksu (Źródło)	prefixEnabledCondition	Umożliwia lub blokuje zmianę prefiksu. Aby zablokować zmianę, należy dodać atrybut prefixEnabledCondition="js:false" w źródle.

Więcej informacji o właściwościach komponentu: Wspólne właściwości komponentów

Ilustracja 1. Przykładowy wygląd komponentu na wniosku.

Ilustracja 2. Przykładowy wygląd komponentu bez informacji o kraju

Pobranie wartości z komponentu

Wartość komponentu to json:

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

Przykładowy skrypt zwracający numer telefonu (bez prefixu):

// przykładowa wartość GesPhoneInput: {"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); //parsowanie GesPhoneInput (JSON)
        const phoneNumber = phoneState.phone || null;
        
        return [{ 'phoneNumber': phoneNumber }];
    } catch (error) {
        return [{ 'phoneNumber': null }];
    }
}

Poszczególne wartości można pobrać na wniosek za pomocą konkretnych atrybutów dostępnych w komponencie za pomocą: ${idkomponentu$atrybut}

Dostępne atrybuty:

• GesPhoneInput1$phone - numer telefonu
• GesPhoneInput1$prefix - prefix bez plusa
• GesPhoneInput1$prefixWithPlus - prefix z plusem
• GesPhoneInput1$fullPhone - pełny numer z plusem

W skrypcie te atrybuty można pobrać za pomocą getData np. getData("GesPhoneInput1","fullPhone")

Przekazanie wartości do komponentu

Przekazanie jako Źródło danych z innego pola

Przykładowy obiekt JSON(String) przekazywany do komponentu:

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

Obiekt można przekazać np. poprzez zmienną sesyjną i ustawić ją w atrybucie Źródło danych z innego pola:

Ilustracja 3. Ustawienie wartości jako zmienna sesyjna

Ilustracja 4. Przekazanie zmiennej sesyjnej do komponentu

Ilustracja 5. Komponent z ustawioną przykładową wartością numeru i prefixu

Zasilanie przez zewnętrzne źródło danych (EDS)

Komponent można również zasilić poprzez Zewnętrzne Źródło Danych. Przykładowy skrypt EchoService:

function callService(context) {

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

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

Ilustracja 6. Mapowanie skryptu na komponent

Wniosek demo: demoPhoneInput