Create customize selector using UI Script

[xingrui]

I am having trouble creating a customized selector using UI script. When I try to run my script, I am getting the error "TypeError: Cannot read properties of null (reading 'shadowRoot')."

I want to create a selector beside the global search to filter options for users. However, my script is not working as intended and throwing this error. Does anyone have any suggestions on how I could resolve this issue? I would appreciate any help or advice you could provide!

Here is my code↓

$j(document).ready(function() {
            try {
                var n = document.querySelector("body > macroponent-f51912f4c700201072b211d4d8c26010").shadowRoot.querySelector("div > sn-canvas-appshell-root > sn-canvas-appshell-layout > sn-polaris-layout").shadowRoot.querySelector("div.sn-polaris-layout.polaris-enabled > div.layout-main > div.header-bar > sn-polaris-header").shadowRoot.querySelector("#customize-selector")
                if (!n) {
                    console.log("not find customize");
                    var menuItem = "<div id='customize-selector' style='width: 100px;height: 34px;position: relative;right: 1rem;' class='polaris-search polaris-enabled'>" + "<span>" + "<select id='customize-language-selector' style='width: 100%;height: 100%;font-size: 1rem;text-align: center;border-radius: 0.25rem;background: RGB(var(--now-unified-nav_menu-scrollbar--color,var(--now-color_chrome--divider-3,92,109,110)));color: white'>" + "<option value='ja' selected=''>" + "日本語" + "</option>" + "<option value='en'>" + "English" + "</option>" + "</select>" + "<p id='customize-error-message' style='color: red;' ng-show='false'>" + "</p>" + "</span>" + "</div>";
                    var e = document.querySelector("body > macroponent-f51912f4c700201072b211d4d8c26010").shadowRoot.querySelector("div > sn-canvas-appshell-root > sn-canvas-appshell-layout > sn-polaris-layout").shadowRoot.querySelector("div.sn-polaris-layout.polaris-enabled > div.layout-main > div.header-bar > sn-polaris-header").shadowRoot.querySelector("nav > div > div.ending-header-zone > div.polaris-header-controls > div.polaris-search.polaris-enabled");
                    $j(e).before(menuItem);
                }
            } catch (e) {
                //Uncomment for debugging
                alert(e);
                console.log("999 " + e);
            }

[Maik Skoddow · Accepted solution]

Hi @xingrui 

it's absolutely not recommended playing around with that kind of UI Script. In the worst case, you are not able anymore to log in to your instance due to a broken UI Script (trust me, I already had that situation!).

But if you want to have an idea about the basic approach, you can take a look into my article https://www.servicenow.com/community/now-platform-articles/inject-a-custom-icon-into-the-header-bar-... 

Maik

[xingrui]

Hi @Maik Skoddow 

Thanks for this.I'll give it a try.

[Albert]

Make sure the element you are targeting exist first or check if DOM manipulation is supported

[xingrui]

I tried to use the same DOM manipulation in the console and it worked. But when I use the same code in the script, I get the error.