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.
4 answers
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!
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
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
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.
Cheers.