search

External WebComponent

circle-info

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

ExternalWebComponent is a specialized component that allows creating controls outside the set available on the palette. You only need to write your own WebComponent using HTML and JavaScript and return a reference to the file with such content via a service (ScriptService or ServiceProxy).

hashtag
Component input parameters

Parameter
Description

componentUrl

full link to the WebComponent source

tag

the tag by which it should identify itself

inputs

list of input parameters for the Component as JSON

hashtag
List of input model parameters for the WebComponent

Input parameter
Possible value
Description

name

*

Parameter name

value

*

Constant value or the name of a component on the application

type

CONSTANT / FIELD

Type of the passed value

deliveryType

ATTRIBUTE / PROPERTY

Method of delivering the value to the WebComponent

hashtag
Communication

  • All parameters to the component (defined in Eximee Designer) are passed to the component using 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 an update of the value clears a given attribute's value, the platform will remove that attribute from the element.

  • The component can use any methods exposed by the Eximee API on 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 satisfies 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. WARNING! The code should respect the fact that the component may be removed from the DOM - any events sent after the component is removed may prevent the application from being submitted.

  • Besides the defined attributes the platform will set the following attributes on the component:

    • id - the element's identifier in the DOM structure. The platform ensures its uniqueness and compliance with the HTML specification

    • component-id - the component identifier - this identifier should be used when communicating with the platform

    • value - the current value of the component

    • translations - JSON with translations (key-value) for literals in the WebComponent

  • An attribute may be set by the platform after connectedCallback - you need to hook into attributeChangedCallback

hashtag
Configuration

A static configuration may look like the following:

circle-exclamation

In case of providing value @GesTextField1 and type FIELD, the platform will correctly resolve nested components.

You can also attach a ServiceProxy (ScriptService) that will return the above data.

circle-exclamation

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

This means you must provide all input parameters (url, tag, inputs).

hashtag
Example WebComponent

PreviousCustom components editorNextFrontendComponent

Last updated

Was this helpful?