Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

External WebComponent

Availability of functionality depends on the license and may not be available in all deployments.

ExternalWebComponent is a specialized component that makes it possible to create 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 it should identify itself with

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 transmitted 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 case of empty values, attributes will not be created.

  • If a value update 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

    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 that conforms to 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 they will be recorded in statistics. NOTE! The code should respect the fact that the component has been removed from the DOM - any events sent after the component has been removed may prevent the application from being submitted.

  • Apart from the defined attributes, the platform will set the following attributes on the component:

    • id - 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

A fixed configuration may look as follows:

If the value @GesTextField1 and type FIELD are provided, the platform will resolve nested components accordingly.

A ServiceProxy (ScriptService) can also be attached, which will return the above data.

Attaching an EDS (external data source) to the ExternalWebComponent will overwrite all original values.

This means that all input parameters (url, tag, inputs) must be provided.

Sample WebComponent

PreviousCustom component editorNextFrontendComponent

Last updated

Was this helpful?