It's all about the answers!

Ask a question
QuestionsTagsUsersBadges
Guidelines | FAQ
Follow this question
Question details

×42,882
×10,962
×6,035
×3,952
×16

question asked: Jun 23 '14, 1:20 a.m.
question was seen: 6,099 times
last updated: Apr 10 '17, 9:45 a.m.

Related questions

Cannot get images to work in custom UI theme

0
Davyd Norris (202●2●10●14) | asked Jun 23 '14, 1:20 a.m.
edited Jun 23 '14, 1:22 a.m.
Hi all,

One of my clients want to add their logo to the top of their CLM applications via Custom HTML and I have been trying to help them, but for the life of me I can't get it to work.

I have followed the directions in the wiki at https://jazz.net/wiki/bin/view/Main/WebUITheming#Image_References and have created a very simple theme to test it out, but it seems like there's something weird going on and the directions aren't quite correct.

My theme zip file is very simple and looks like this:
mytheme.zip
    \html
          aboveBanner.html
    \img
          logo.jpg
    \js
          myScript.js

The code in aboveBanner is just a simple HTML snippet that defines an image but with its src property empty, like so:
-----
<img id="imageNodeId" alt="my logo goes here" height="170" width="470" align="left">< / img>
-----
and my JavaScript file is exactly as detailed in the wiki entry:
-----
dojo.require("jazz.util.theming"); // This should already be included in the page, but it's safe to add it. dojo.ready(function() {
    dojo.attr("imageNodeId","src",jazz.util.theming.themeFileUrl("img/logo.jpg"));
});
-----

I load the zip up and apply the theme, and I see the empty box where the logo should be, and the alternate text, but no image.

Upon playing around a lot more and throwing alert() functions into various places, what I have found is that the actual image is being located properly and can be loaded, but that the dojo.ready() callback function is being triggered BEFORE the custom HTML gets loaded, and so the image ID (and therefore its src property) is never found.

I have checked this by putting in one of the existing ID values close to where the custom theme is normally loaded and that ID is picked up just fine. I can also see that the image clearly hasn't loaded when my alert functions are hit.

I have also tried to put the JavaScript directly into the HTML, both before and after the image declaration, and I have tried a pure JavaScript getElementById, as well as just pulling the image location and trying to insert that into the image but I must be doing something wrong there too because the script doesn't even execute :-(

Has anyone managed to get this working for them, using custom HTML? I can see the pure dojo and dijit approach would work but my client wants to use the HTML approach as it's simpler... hah!! :-) .
Comments
Donald Nong commented Jun 23 '14, 3:03 a.m. | edited Jun 23 '14, 3:04 a.m.

 Hi Davyd,


Since you're using Dojo, have a look at the "Custom JavaScript + CSS Example" in the document. The sample adds a button, and I think you should have no problems with adding an image.

Oops, just saw that the client wanted HTML. But you already used Dojo, did you?

Davyd Norris commented Jun 23 '14, 4:05 a.m.

Hi Donald,

Yes that's the issue - the client wants to use Custom HTML and not dojo. The only reason the dojo calls are being used is as per the wiki advice - to find the absolute URL for the image inside the theme.

I have suggested they look at the dojo example, but they want something that can be done with minimal scripting skills, so custom HTML is far preferred.

Even putting this aside, we may need to correct the wiki as the code snippet shown there does not seem to work correctly with the HTML approach.

One answer

Most liked answers ↑|Newest answers|Oldest answers

0
permanent link
Dinesh Kumar B (4.1k●4●13) | answered Jun 23 '14, 2:21 a.m.
JAZZ DEVELOPER
Could you try referring to the image using the path : "/ccm/_theming/resource/img/logo.jpg")

for one my themes, the images references started showing up after I used that relative path

hope this helps
Comments
Davyd Norris commented Jun 23 '14, 2:31 a.m.

Thanks Dinesh,

I'm assuming by that you mean to hard code the src URL to that value?

The problem with that is that the wiki states that there's no guarantee that URL will work consistently, and that to access any file in your zip you should always use the jazz.util.theming.themeFileUrl() function to get the absolute path at runtime.

Dinesh Kumar B commented Jun 23 '14, 3:57 a.m.
JAZZ DEVELOPER

ok, i understand...

from the sample where i have it working.. though I understand path is hard coded, its still a relative one.. relative to the application theming resource path

so
if your theme zip has the image under "img" directory, with the name "logo.jpg"
and
the application theming resource path being "/ccm/_theming/resource"

the path that works for me is  "/ccm/_theming/resource/img/logo.jpg"

SEC Servizi commented Apr 10 '17, 9:45 a.m.
We still got issue referring images on custom themes. Please see https://jazz.net/forum/questions/238073/how-to-refer-images-on-custom-themes. Cheers.

Your answer

Register or 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.