> 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/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/komponenty-rozszerzone/external-webcomponent.md).
# External WebComponent
{% hint style="info" %}
Availability of functionality depends on the license and may not be available in all deployments.
{% endhint %}
ExternalWebComponent is a specialized component that enables the creation of controls outside the set available on the palette. It is enough to write your own WebComponent using HTML and JavaScript, and then return the path to a file with such content via a service (ScriptService or ServiceProxy).
## Component input parameters
Parameter
Description
componentUrl
full link to the WebComponent source
tag
the tag by which it is to be identified
inputs
list of input parameters for the Component as JSON
## List of input model parameters for the WebComponent
| Input parameter | Possible value | Description |
| --------------- | -------------------- | -------------------------------------------------- |
| name | \* | Parameter name |
| value | \* | Constant value or component name on the form |
| type | CONSTANT / FIELD | Type of the passed value |
| deliveryType | ATTRIBUTE / PROPERTY | Method of delivering the value to the WebComponent |
## Communication
* Any parameters for the component (defined in Eximee Designer) are passed to the component via attributes. If we receive a new value from the server, the attribute value will be changed.
* In the case of empty values, attributes will not be created.
* If an update to the value clears the value of a given attribute, the platform will remove that attribute from the element.
* The component can use any methods exposed by the Eximee API in the Window object
```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;
}
```
* The component can change its own value by emitting an event **change** with the field **details** containing an object satisfying the interface `{ value: string }`. This can be achieved, for example, by creating an object of type `CustomEvent` (e.g.: `new CustomEvent('change', {detail: {value: event.target.value}})`). Additionally, the component can emit events **focus** and **blur** - they will not affect the application logic, but will be recorded in statistics. NOTE! The code should respect the fact that the component was removed from the DOM - any events sent after removing the component may prevent the application from being submitted.
* Apart from the defined attributes, the platform will set the following attributes on the component:
* **id** - the element identifier in the DOM structure. The platform ensures its uniqueness and compliance with the HTML specification
* **component-id** - component identifier - this identifier should be used when communicating with the platform
* **value** - current value of the component
* **translations** - JSON with translations (key-value) for literals in the WebComponent
* The attribute may be set by the platform after connectedCallback - you need to hook into attributeChangedCallback
## Configuration
Static configuration may look as follows:
```xml
```
{% hint style="warning" %}
In the case of providing the value @GesTextField1 and type FIELD, the platform will appropriately resolve nested components.
{% endhint %}
You can also attach a ServiceProxy (ScriptService) that will return the above data.
```xml
```
{% hint style="warning" %}
Attaching an EDS (external data source) to the ExternalWebComponent will overwrite all original values.
This means that all input parameters (url, tag, inputs) need to be provided.
{% endhint %}
## Example WebComponent
{% code expandable="true" %}
```javascript
const imgTemplate = document.createElement('template');
imgTemplate.innerHTML = `
`;
class ImgOnly extends HTMLElement {
constructor() {
super();
this.shadow = this.attachShadow({
mode: 'open'
});
}
getAtributesAndProperties() {
let atrGroup = null
let propsGroup = null
let element = document.getElementById('GesComplexComponent1_GesExternalWebComponent2-element')
if (!!element) {
atrGroup = element.getAttribute("atrgroup")
propsGroup = element['propsGroup']
}
if ((atrGroup == null || atrGroup == undefined) && (propsGroup == null || propsGroup == undefined)) {
this.shadow.getElementById("noAttributeAndProperty").style.display = "inline-block";
return;
} else {
element.shadowRoot.getElementById("noAttributeAndProperty").style.display = "none";
}
if (atrGroup === "true") {
element.shadowRoot.getElementById("trueAtribute").style.display = "inline-block";
element.shadowRoot.getElementById("falseAtribute").style.display = "none";
}
if (atrGroup === "false") {
element.shadowRoot.getElementById("falseAtribute").style.display = "inline-block";
element.shadowRoot.getElementById("trueAtribute").style.display = "none";
}
if (propsGroup === "true") {
element.shadowRoot.getElementById("trueProperty").style.display = "inline-block";
element.shadowRoot.getElementById("falseProperty").style.display = "none";
}
if (propsGroup === "false") {
element.shadowRoot.getElementById("falseProperty").style.display = "inline-block";
element.shadowRoot.getElementById("trueProperty").style.display = "none";
}
}
connectedCallback() {
this.shadow.appendChild(imgTemplate.content.cloneNode(true));
setInterval(this.getAtributesAndProperties, 500);
}
attributeChangedCallback(name, oldValue, newValue) {
switch (name) {
case 'atrgroup':
this.getAtributesAndProperties();
break;
}
}
static get observedAttributes() {
return ['atrgroup'];
}
}
window.customElements.define('img-only', ImgOnly);
```
{% endcode %}
---
# 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, and the optional `goal` query parameter:
```
GET https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/komponenty-rozszerzone/external-webcomponent.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.
