Is it possible to get DOM element via client script ui builder ?

[Serhii5]

Hi guys, Is it possible to get the DOM element via client script UI builder?  When i try to call the document - it's undefined in the client script scope , i would like to try change style for OOB component , but i think it's impossible 

[HunterSWolf · Accepted solution]

Accessing the shadowRoot is a bit of a pain, likely by design.  Really you have to find the element you want via the inspector and then walk your way down to it knowing in some cases you might have to look up elements in the shadow root and other times just normally. I am by no means an expert and someone else might be able to do this in less steps but here is an example of a script where I hide the additional request detail stuff on the VA Catalog item screen.

function handler({api, event, helpers, imports}) {
   //console.log('test');
 helpers.timing.setTimeout(function () {            
    var style = this.document.createElement('style');
	style.innerHTML = '.sc-additional-details {display: none}';
   this.window.document.querySelector('macroponent-aededa80c782201072b211d4d8c2604c').shadowRoot.querySelector('sn-canvas-appshell-main').shadowRoot.querySelector('macroponent-76a83a645b122010b913030a1d81c780').shadowRoot.querySelector('sn-canvas-main').shadowRoot.querySelector('sn-canvas-screen').shadowRoot.querySelector('macroponent-09c4d7405b22411038a16ada1d81c7d6').shadowRoot.querySelector('macroponent-afeef20635001010f877265d86f080df').shadowRoot.querySelector('now-collapse').querySelector('sn-catalog-additional-details').shadowRoot.appendChild(style);
 });

}

[Serhii5]

Thanks, it works!!!!

[Dimitar Vutov]

Hello everybody and thank you for the info. Just wanted to add that you can skip all of the chaining of elements by using "this.window.querySelectorShadowDom.querySelectorAllDeep" inside of the setTimeout. Hope that helps, cheers !

[fujan]

Thank you @Dimitar Vutov, this is great!

I did not find any documentation about this method, but it works like a charm. Here's how I used it in my client script:

helpers.timing.setTimeout(function () {
    try {
        this.window.querySelectorShadowDom.querySelectorAllDeep("#item-container")[0].scrollTo(0, 500);
    } catch (error) {
        console.error(error);
    }
}, 100);

 It returns an Array, so I had to use the unique ID in my selector and get the first element.

I also had to add the delay param to the setTimeout function to get it to run on my UI Builder page.