Theme with custom JavaScript

SEC Servizi (971●2●38●60) | asked Oct 03 '17, 10:06 a.m.
retagged Oct 06 '17, 3:43 p.m. by Ken Tessier (841●1●7)

We created a theme with custom CSS, HTML, and JavaScript code for the login page following wiki guidance. Our custom CSS and HTML code are working as expected but JavaScript code is not... According to https://jazz.net/help-dev/clm/topic/com.ibm.jazz.repository.web.admin.doc/topics/c_configuring_themes.html

Note: If customizing the login page by using JavaScript does not work, use HTML instead.

we could use <script> tag inside our HTML code to get JavaScript working, but code is still not executed even there is inside the web page (we inspected the page).

Any advice?

Also, can be HTML and JavaScript code used for the same themable node (e.g., jazz.theme.LoginFooter) or they are intended to be exclusive used (e.g., HTML + CSS vs. JavaScript + CSS)?

Thanks in advance.

Cheers.

4 answers

Most liked answers ↑|Newest answers|Oldest answers

permanent link

Ralph Schoon (63.5k●3●36●46) | answered Oct 03 '17, 1:05 p.m.
FORUM ADMINISTRATOR / FORUM MODERATOR / JAZZ DEVELOPER
edited Oct 03 '17, 1:09 p.m.

Please note that we have a big customer that managed to make RTC Web UI pretty much unusable for thier users introducing JavaScript in a theme. They created a huge message and memory load on their system impacting the server and the clients. Their browsers crashed with memory usage and timeouts waiting for messages.

Be careful what you are doing!

permanent link

Lukas Steiger (313●16●28) | answered Oct 03 '17, 12:00 p.m.

Have a look at the following sample and see if this resolves your issues. Sorry for the horribly formatted code, its almost impossible to use this editor on a smartphone :-)

Create a JavaScript file named LoginWidget.js

dojo.provide("jazz.theme.LoginFooterWidget");

dojo.require("dijit._Widget"); dojo.require("dijit._Templated");

dojo.require("dojo/Deferred"); dojo.require("jazz.util.theming");

(function() {

dojo.declare("jazz.theme.LoginFooterWidget"

, [dijit._Widget,

dijit._Templated], {

templatePath: jazz.util.theming.themeFileUrl("templates/Login.html"),

constructor: function(args) {},

postCreate: function() {

this.inherited(arguments); / additional code goes here /

}

});

})();

Create an HTML file named Login.html inside of a folder named templates

<p>Request access: <a href="https://...">here</a></p>

</div>

Give it a style

.com-siemens-bt-jazz-loginFooter {

text-align: center;

font-size: 14px;

margin-bottom: 30px;

}

Deployment

• Single ZIP with all files

• Upload to every application

• Preview / Apply new Theme

• External content (e.g. blog post) must be on the whitelist

Comments

SEC Servizi commented Oct 04 '17, 5:46 a.m.

Create a JavaScript file named LoginWidget.js

dojo.provide("jazz.theme.LoginFooterWidget");

You are providing "jazz.theme.LoginFooterWidget" instead of "jazz.theme.LoginFooter" as reported in https://jazz.net/wiki/bin/view/Main/WebUITheming#Custom_JavaScript. Is this correct and the wiki wrong?

Thank you in advance.

SEC Servizi commented Oct 04 '17, 6:04 a.m. | edited Oct 04 '17, 6:05 a.m.

According to your script files from https://jazz.net/jazz02/web/projects/Rational%20Quality%20Manager#action=com.ibm.team.workitem.viewWorkItem&id=142241&tab=com.ibm.team.workitem.tab.links, jazz.theme.LoginFooterWidget should to be the right themable node.

permanent link

SEC Servizi (971●2●38●60) | answered Oct 04 '17, 5:38 a.m.
edited Oct 04 '17, 5:40 a.m.

Please note that we have a big customer that managed to make RTC Web UI pretty much unusable for thier users introducing JavaScript in a theme.

Be careful what you are doing!

Thank you Ralph for pointing that out, we appreciated.

By the way, we are trying to just implement our own Enhancement since jazz.theme.LoginFooter extension point seemed to be good enough for that and JavaScript code is just another if-then statement added to the login page.

Cheers.

Comments

Lukas Steiger commented Oct 04 '17, 5:46 a.m.

Keep in mind that the Login Footer Theme isnot shown on all Login Screens (see Defect)

Ralph Schoon commented Oct 04 '17, 5:52 a.m.

FORUM ADMINISTRATOR / FORUM MODERATOR / JAZZ DEVELOPER

That should not be a problem then, I just thought I would use the opportunity highlight that JavaScript can be dangerous.

SEC Servizi commented Oct 04 '17, 5:52 a.m. | edited Oct 04 '17, 5:54 a.m.

Thank you Lukas for reporting the Defect. Luckily jazz.theme.LoginFooter seems to work for CCM application (with custom HTML code at least).

Cheers.

Lukas Steiger commented Oct 04 '17, 7:43 a.m.

It depends on which extension point you use for theming. The login theme will only appear on the standard login screen and nowhere else.The header theme altough appears on every page and could then cause sirious issues like the one pointed out by Ralph. Be reminded that your login theme will not work on the overlay login screen (when your session expires) as long as the above linked defect doesnt get fixed.

permanent link

SEC Servizi (971●2●38●60) | answered Oct 04 '17, 8:51 a.m.

Little steps ahead, thanks to Lukas's example code:

"jazz.theme.LoginFooterWidget" is the right themable node, not "jazz.theme.LoginFooter" as reported in https://jazz.net/wiki/bin/view/Main/WebUITheming#Custom_JavaScript. Please update the wiki!
custom JavaScript code for themable node "jazz.theme.LoginFooterWidget" is executed only once you click the "Log in" button and not when the login page is loaded.

So, it seems not to be possible to implement our own Enhancement since no custom JavaScript code (HTML page w/ <script> or LoginFooterWidget.js) can be executed when the login page is loaded.

Cheers.

Your answer

Register or log in to post your answer.

Dashboards and work items are no longer publicly available, so some links may be invalid. We now provide similar information through other means. Learn more here.

It's all about the answers!

Related questions

Theme with custom JavaScript

4 answers

Your answer