Load JavaScript on Jira Service Desk Login Page

JSM Development JSM Server
, ,
1

Hello,

I hope someone can help me. I need to customize the Jira login page text ([JSDSERVER-330] Provide a customizable login screen for Service Desk - Create and track feature requests for Atlassian products.). I’ve created the request 6 years ago and since Jira Service Desk 1.0 I was able to modify it in different ways up to Jira Service Desk 3.16.

I have a simple plugin with a web resource to load a js file with context customerportal:

atlassian-plugin.xml

<web-resource key="jsd-customer-portal-login-page-web-resources" name="JSD Customer Portal Login Page Web resources">
    <dependency>com.atlassian.auiplugin:ajs</dependency>
    <resource name="jsd-customer-portal-login-page.js" type="download" location="/js/jsd-customer-portal-login-page.js"/>
    <context>customerportal</context>
</web-resource>

Simpliyfied JavaScript that works up to Jira Service Desk 3.16
It simply replaces the heading above the user name field.

AJS.toInit(function ($) {
    if (window.location.href.indexOf("/user/login") > -1) {
    	AJS.$(document.getElementById("cv-content").getElementsByClassName("aui-page-header-inner")[0].getElementsByClassName("aui-item cv-title")[0].getElementsByTagName('h1')[0].innerHTML = 'Custom Title');
    }
});

I prepare an upgrade for Jira Service Desk 4.5 and want to check all the customizations if they are working or needs to be upgraded. The 3.16 approach won’t work for 4.5. I have no idea how to solve it. I have tried a lot of different variants but non of them give me the same result. “document.getElementByID(…) is null”. Or in other terms, it’s not loaded… If I execute it directly in the browser console after everything is loaded it gets replaced correctly.

Different attempts

document.onreadystatechange = function () {
    if (document.readyState === "complete") {
        AJS.$(document.getElementById("cv-content").getElementsByClassName("aui-page-header-inner")[0].getElementsByClassName("aui-item cv-title")[0].getElementsByTagName('h1')[0].innerHTML = 'Custom Title');
    }
}

document.addEventListener("DOMContentLoaded", function () {
    AJS.$(document.getElementById("cv-content").getElementsByClassName("aui-page-header-inner")[0].getElementsByClassName("aui-item cv-title")[0].getElementsByTagName('h1')[0].innerHTML = 'Custom Title');
});

AJS.$(document).ready(function() {
    AJS.$(document.getElementById("cv-content").getElementsByClassName("aui-page-header-inner")[0].getElementsByClassName("aui-item cv-title")[0].getElementsByTagName('h1')[0].innerHTML = 'Custom Title');
});

My feeling is, that the problem is related to how the Jira Service Desk front-end is now loaded compared to 3.16.

2020-09-10_22-05-47
2020-09-10_22-05-472862×532 185 KB

And from the console it looks like, that the front-end webpack stuff is always loaded / executed after my JavaScript file.

So what is the correct way here, to wait / listen that the page is “ready to use” and is also ready to be replaced by my JavaScript? :slight_smile:

Thanks for your help!

Tim

1 Like
2

After a lot of try an error, I’ve found a way that works for me:

AJS.toInit(function(){
    if (window.location.href.indexOf("/user/login") > -1) {
        document.addEventListener("DOMNodeInserted", function(event) {
            const element = event.target;

            /**
             * console.log("Event fired");
             * console.log(event.target);
             */
            
            if (element.className === 'sd-adgs-feature-flag-m1') {
                AJS.$(document).find("section.aui-page-panel-content > header.aui-page-header-inner > div.aui-item.cv-title > div > h1")[0].innerHTML = "Custom Title";
            }
        });
    }
});

Listening for every DOMNodeInserted event and check for the className that I expect works, but I’m not sure if thats a good solution.

1 Like