# Numer telefonu - PhoneInput

{% hint style="info" %}
Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.
{% endhint %}

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.

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-7e1884b5fdc8bcbddb141179ac626833d3d16c3b%2FphoneInput1.png?alt=media" alt=""><figcaption></figcaption></figure>

✅ **Kiedy stosować:**

* Numer powinien uwzględniać prefiks kraju.

:x: **Kiedy nie stosować:**

* Numer telefonu nie ma zawierać prefiksu lub potrzebna jest większa elastyczność wpisywanego numeru. **Stosuj**: [TextField](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/1-wprowadzanie-danych-inputs/numer-telefonu-phoneinput).

## 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](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow)

<figure><img src="https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/7GNqwhGfijEfS8o7C21E/13k_files/image2025-5-16_15-1-5.png" alt=""><figcaption><p><em><strong>Ilustracja 1.</strong> Przykładowy wygląd komponentu na wniosku.</em></p></figcaption></figure>

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fc8zVdPnzdR0AExFWAab0%2Fobraz.png?alt=media&#x26;token=fd1f6a68-ff44-4077-99bd-2d68f6c10e29" alt=""><figcaption><p><em><strong>Ilustracja 2.</strong> Przykładowy wygląd komponentu bez informacji o kraju</em></p></figcaption></figure>

## Pobranie wartości z komponentu

Wartość komponentu to json:

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

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

```js
// 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:

```json
{"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**:

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-ef4bcb4626e720e4bba7eddd76e769524f087a4f%2FphoneInput2.png?alt=media" alt=""><figcaption><p><em><strong>Ilustracja 3.</strong> Ustawienie wartości jako zmienna sesyjna</em></p></figcaption></figure>

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-760e5d3596aa51abdc7fd274ad241cc6ea836b3d%2FphoneInput4.png?alt=media" alt=""><figcaption><p><em><strong>Ilustracja 4.</strong> Przekazanie zmiennej sesyjnej do komponentu</em></p></figcaption></figure>

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-134d2968b785e90f0742a4281f82fcadf94bca17%2FphoneInput3.png?alt=media" alt=""><figcaption><p><em><strong>Ilustracja 5.</strong> Komponent z ustawioną przykładową wartością numeru i prefixu</em></p></figcaption></figure>

### 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:

```js
function callService(context) {

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

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

<br>

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-5dc76eeb75d0c990eabfa9d92fcf640eb425bfe5%2FphoneInput5.png?alt=media" alt=""><figcaption><p><em><strong>Ilustracja 6.</strong> Mapowanie skryptu na komponent</em></p></figcaption></figure>

{% hint style="info" %}
Wniosek demo: demoPhoneInput
{% endhint %}