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

Serhii5 · ‎06-30-2022

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 · ‎01-30-2024

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);
 });

}

View solution in original post

Marc Mouries · ‎06-30-2022

One of the goals of the Next UI Framework is to make it easier for customers to upgrade to the next version of ServiceNow. Therefore we don't allow developers to modify the DOM.

Today changing components style is limited but something we hear often. I'd recommend submitting an enhancement request via the idea portal. If you do so, please post a link and I'll vote for it.

Oleg · ‎07-11-2022

I don't want to discuss, in which situation access to document should be good choice. In an ideal world, when all components which you use work perfectly and all components provide enough customizing properties, you will never need to access to document, window or globalThis. But... the real world is not so good like it could be...

So as a workaround you can use some APIs or method with callback functions of exiting components, which provides you document, window or globalThis as parameter. For example, helpers.timing.setTimeout can be used in the same way like well-known setTimeout function of JavaScript. My investigations have shown that helpers.timing.setTimeout calls the callback function with globalThis as this. So you can use the following clint-side script

function handler({api, event, helpers, imports}) {
    helpers.timing.setTimeout(function () {
        // this here is globalThis, which is equal to window
        console.log(this.document);
    });
}

to get access to document via this.document inside of helpers.timing.setTimeout and then find any component DOM element. To access internal DOM you can use shadowRoot and assignedNodes. So, in the way you will be able to modify CSS style of a DOM element on the page including DOM elements placed inside of components. See my old answer for an example.

Mihir · ‎03-30-2023

This workaround is really genius!!!

Alfred Brorsson · ‎09-28-2023

Hello. It seems your example post has been archived. Do you have a new example? Trying to make this work myself