Web-component API

The Web Component API allows you to interact with a web component by calling its methods or receiving and modifying data using its properties, as well as events that the web component sends.

To work with the Web Component API, you need to obtain the appropriate HTML element using any method available in the Document Object Model (DOM). For example, you can use the getElementsByTagName method:

const editor = document.getElementsByTagName("au-template-editor")[0];

After obtaining the element, you can use the API as follows:

const imageResolutionsData = editor.getImagesResolution();

The API of the web component will only be available after it has been loaded and initialized.

Methods

init(configuration)

Description: Initializes the component after reading parameters from the workflow and opening a design.

Arguments:

• configuration: ITemplateEditorInitArgs

Returns: void

The configuration object includes integration settings, the design to open, and editor settings. For details, refer to the Initialization, Settings, and Resources topics.

Example:

editor.init({
    configVersion: 2,
    integration: {
        tenantId: <yourTenantId>,
        user: {
            id: <userId>,
            token: <userToken>
        },
        storefrontId: <yourStorefrontId>,
        cchubApiGatewayUrl: "https://api.customerscanvashub.com"
    },
    input: {
        designTemplateId: <templateId>
    },
    settings: {
        itemBuilder: {
            image: { borderWidth: 10, borderColor: "rgb(255, 0, 13)" }
        },
        listSettings: { bulletChar: "*" }
    }
});

update(configuration)

Description: Updates the editor configuration.

Arguments:

• configuration: ITemplateEditorInitArgs — Editor configuration with fields to be updated.

Returns: void

Example:

editor.update({
    "settings": {
        "designViewer": { "unit": "in" }
    }
});

getImagesResolution()

Description: Returns information about the resolution of images used in the design.

Arguments: None

Returns: IImageResolution[]

interface IImageResolution {
    item: Item;
    resolution: number;
    qualityState: "None" | "Good" | "Warning" | "Bad";
}

Example:

const imageResolutionsData = editor.getImagesResolution();
const haveBadImages = imageResolutionsData.map(data => data.qualityState).includes("Bad");

getSerializedDesignModel()

Description: Returns the serialized model of the current design.

Arguments: None

Returns: object

Example:

const model = editor.getSerializedDesignModel();
console.log(model);

save()

Description: Saves changes to the current design.

Arguments: None

Returns: Promise<void>

Example:

await editor.save();

Properties

injector

Description: An Angular injector that allows you to get the provider values.

Type: Injector

Example:

const store = editor.injector.get("STORE_TOKEN");
console.log(store);

viewer

Description: The viewer instance that renders the design. An instance of the Viewer class from the @aurigma/design-atoms library.

Type: Viewer

Example:

const viewer = editor.viewer;
console.log(viewer);

Events

onload

Description: This event is triggered after the editor is loaded and initialized.

Bubbles: Yes

Data: None

Example:

editor.addEventListener("onload", event => console.log(event));

change

Description: This event is triggered after a design change.

Bubbles: Yes

Data: None

Example:

editor.addEventListener("change", event => console.log(event));

savedesignsuccess

Description: This event is triggered after the design has been saved successfully.

Bubbles: Yes

Data: None

Example:

editor.addEventListener("savedesignsuccess", event => console.log(event));

savedesignerror

Description: This event is triggered when an error occurs while saving the design.

Bubbles: Yes

Data: None

Example:

editor.addEventListener("savedesignerror", event => console.log(event));