Theme with custom JavaScript

SEC Servizi

(971●2●38●60) retagged

Oct 06 '17, 3:43 p.m.

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.

0 votes

4 answers

4,337 views

0 votes

4 answers

Permanent link

Ralph Schoon

FORUM ADMINISTRATOR / FORUM MODERATOR / JAZZ DEVELOPER (63.9k●3●36●48) 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!

1 vote

Permanent link

Lukas Steiger

(313●16●28) 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

0 votes

Comments

SEC Servizi

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

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) 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.

0 votes

Comments

Lukas Steiger

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

FORUM ADMINISTRATOR / FORUM MODERATOR / JAZZ DEVELOPER Oct 04 '17, 5:52 a.m.

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

SEC Servizi

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

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) 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.

0 votes

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.

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here.

By RSS:

Answers

Answers and Comments

Question details

rational-team-concert

× 42,896

extending

× 10,935

doc-link

× 1,381

javascript

× 152

web-ui

× 8

theming

× 3

Question asked: Oct 03 '17, 10:06 a.m.

Question was seen: 4,337 times

Last updated: Oct 06 '17, 3:43 p.m.

Theme with custom JavaScript

4 answers

4,337 views

0 votes

4 answers

Comments

Comments

Your answer

Follow this question

Question details

Related questions