Jazz Forum Welcome to the Jazz Community Forum Connect and collaborate with IBM Engineering experts and users

Theme with custom JavaScript

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

Permanent link
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
<div class="com-siemens-bt-jazz-loginFooter">
<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

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.

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

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

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

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

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

Cheers.

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

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

  1.  "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!
  2. 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

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.

Search context
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
× 10,930
× 1,381
× 152
× 8
× 3

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

Question was seen: 4,305 times

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

Confirmation Cancel Confirm