> For the complete documentation index, see [llms.txt](https://docs.eximee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/1-wprowadzanie-danych-inputs/numer-telefonu-phoneinput.md).

# 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="/files/dOU8EdKE1jKKbS4i6ZiW" 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](/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/1-wprowadzanie-danych-inputs/numer-telefonu-phoneinput.md).

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

<figure><img src="/files/68d5e216b1e5084ef082ae8f23d937e2c6c8cce6" alt=""><figcaption><p><em><strong>Ilustracja 1.</strong> Przykładowy wygląd komponentu na wniosku.</em></p></figcaption></figure>

<figure><img src="/files/yF5HJP4RjU6TR4zvUkiS" 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="/files/AeuYIPR7jYbzyCvX9HuR" alt=""><figcaption><p><em><strong>Ilustracja 3.</strong> Ustawienie wartości jako zmienna sesyjna</em></p></figcaption></figure>

<figure><img src="/files/0q6DIOxZQs5emPwIUbc8" alt=""><figcaption><p><em><strong>Ilustracja 4.</strong> Przekazanie zmiennej sesyjnej do komponentu</em></p></figcaption></figure>

<figure><img src="/files/kgR2kce7BU0I2YjVgeUm" 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="/files/0Fj5q3LeAhadkYnCZC9i" alt=""><figcaption><p><em><strong>Ilustracja 6.</strong> Mapowanie skryptu na komponent</em></p></figcaption></figure>

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/1-wprowadzanie-danych-inputs/numer-telefonu-phoneinput.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.