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
![]()
Ralph Schoon (63.3k●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.
|
![]()
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
Comments
Create a JavaScript file named LoginWidget.js
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. |
![]() 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 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. 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. |
![]() Little steps ahead, thanks to Lukas's example code:
Cheers.
|
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.