# External WebComponent
{% hint style="info" %}
Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.
{% endhint %}
ExternalWebComponent jest wyspecjalizowanym komponentem, umożliwiającym tworzenie kontrolek spoza zestawu dostępnego na palecie. Wystarczy napisać własny WebComponent korzystając z języka HTML i JavaScript oraz zwrócić namiary na plik z taką zawartością za pomocą usługi (ScriptService lub ServiceProxy).
## Parametry wejściowe komponentu
Parametr
Opis
componentUrl
pełen link do źródła WebComponentu
tag
znacznik, jakim ma się identyfikować
inputs
lista parametrów wejściowych dla Componentu jako JSON
## Lista parametrów modelu wejściowego do WebComponentu
| Parametr wejściowy | Możliwa wartość | Opis |
| ------------------ | -------------------- | --------------------------------------------- |
| name | \* | Nazwa parametru |
| value | \* | Stała wartość lub nazwa komponentu na wniosku |
| type | CONSTANT / FIELD | Typ przekazywanej wartości |
| deliveryType | ATTRIBUTE / PROPERTY | Sposób dostarczenia wartości do WebComponentu |
## Komunikacja
* Wszelkie parametry do komponentu (zdefiniowane w Eximee Designer) są przekazywane do komponentu za pomocą atrybutów. Jeżeli z serwera otrzymamy nową wartość, wartość atrybutu zostanie zmieniona.
* W przypadku pustych wartości atrybuty nie będą tworzone.
* Jeżeli update wartości wyczyści wartość danego atrybutu, to platforma usunie ten atrybut z elementu.
* Komponent może korzystać z dowolnych metod wystawionych przez API Eximee w obiekcie Window
```javascript
export interface ExWebformsWindow extends Window {
getComponentValue: (componentId: string) => unknown;
setComponentValue: (sourceComponentId: string, componentId: string, newValue: string) => unknown;
updateExternalSectionValue: (externalSectionId: string, newValue: string) => unknown;
finishApplication: () => void;
applicationSetTitle: () => void;
goForward: () => void;
goBackward: () => void;
returnToOriginalForm: () => boolean;
}
```
* Komponent może zmienić własną wartość emitując event **change** z polem **details** zawierającym obiekt spełniający interfejs `{ value: string }`. Można to uzyskać na przykład tworząc obiekt typu `CustomEvent` (np: `new CustomEvent('change', {detail: {value: event.target.value}})`). Dodatkowo komponent może wyemitować eventy **focus** oraz **blur** - nie będą one miały wpływu na logikę wniosku, ale zostaną odnotowane w statystykach. UWAGA! Kod powinien respektować fakt usunięcia komponentu z DOM - wszelkie eventy wysyłane po usunięciu komponentu mogą uniemożliwić złożenie wniosku.
* Poza zdefiniowanymi atrybutami platforma ustawi na komponencie następujące atrybuty:
* **id** - identyfikator elementu w strukturze DOM. Platforma zapewnia jego unikalność i zgodność ze specyfikacją HTML
* **component-id** - identyfikator komponentu - tego identyfikatora należy używać podczas komunikacji z platformą
* **value** - aktualna wartość komponentu
* **translations** - JSON z tłumaczeniami (klucz-wartość) dla literałów w WebComponencie
* Atrybut może być ustawiony przez platformę po connectedCallback - trzeba wpiąć się w attributeChangedCallback
## Konfiguracja
Stała konfiguracja może wyglądać następująco:
```xml
```
{% hint style="warning" %}
W przypadku podania wartości @GesTextField1 oraz typu FIELD, platforma odpowiednio rozwiąże zagnieżdżone komponenty.
{% endhint %}
Można również podpiąć ServiceProxy (ScriptService), który zwróci powyższe dane.
```xml
```
{% hint style="warning" %}
Podpięcie EDS (źródła danych zewnętrznych) do ExternalWebComponentu spowoduje nadpisanie wszystkich pierwotnych wartości.
Oznacza to, że trzeba dostarczyć wszystkie parametry wejściowe (url, tag, inputs).
{% endhint %}
## Przykładowy WebComponent
{% code expandable="true" %}
```javascript
const imgTemplate = document.createElement('template');
imgTemplate.innerHTML = `
