How to clean up sdk viewElement in freedom UI

Hello,

i made a module, in freedom-ui mode, to display custom content in Accounts_FormPage. The module init is triggered with crt.HandleViewModelInitRequest handler.



here is the useful module code :

/* AMD module declaration. */
// jshint esversion: 11
define("UsrAccountHistoriqueProduit", ["@creatio-devkit/common"], function(sdk) {
    //
    return {
        //**--------------------------------- Init module -------------------------------**/
        onInitialized: async function($context) {
            const idAccount = await $context.Id;
            const my = this;
            
            /* Declare the class. */
            class UsrAccountHistoriqueProduit extends HTMLElement  {
                constructor(args) {
                    super();
                    this.displaycontent();
                }
                async displaycontent() {
                    var shadowDom = this.attachShadow({mode: 'open'});
                    shadowDom.innerHTML = "";
                    
                    const html = await my.statsOrderProduct(idAccount);
                    shadowDom.innerHTML = html;        
                }
            }

            /* Register the component. */
            customElements.define('usr-historiqueproduit-view-element', UsrAccountHistoriqueProduit);

            /* Register the web component as a view element. */
            sdk.registerViewElement({
                type: 'usr.CustomViewElement',
                selector: 'usr-historiqueproduit-view-element'
            });

        },
...

It works fine at load of the page, then when viewing a second account, i have this error message : 

ERROR DOMException: Failed to execute 'define' on 'CustomElementRegistry':
the name "usr-historiqueproduit-view-element" has already been used with this registry



i think i can clean up the registered viewElement with the crt.HandleViewModelDestroyRequest handler, but i did not found cleaning method in the sdk objet.

 

How should it be done please ?

 

best regards,

Patrice

Like 0

Like

2 comments
Best reply

Hi Patrice,

 

This error message occurs since the element with "usr-historiqueproduit-view-element" selector was already registered upon first init:

sdk.registerViewElement({
                type: 'usr.CustomViewElement',
                selector: 'usr-historiqueproduit-view-element'
            });

In your onEnityInitialized you need to add additional check if the element was registered in DOM or not (for example as proposed here) and as a result of this check perform registration or not.

Hi Patrice,

 

This error message occurs since the element with "usr-historiqueproduit-view-element" selector was already registered upon first init:

sdk.registerViewElement({
                type: 'usr.CustomViewElement',
                selector: 'usr-historiqueproduit-view-element'
            });

In your onEnityInitialized you need to add additional check if the element was registered in DOM or not (for example as proposed here) and as a result of this check perform registration or not.

Thanks Oleg,

i was not aware of the CustomElementRegistry api, i thaught it was a Creatio thing.

Now i know where the documentation is ! (mozilla.org)

 

Best regards,

Patrice

Show all comments