It's all about the answers!

Ask a question
QuestionsTagsUsersBadges
Follow this question
Question details

×42,787

question asked: Jul 21 '09, 10:05 a.m.
question was seen: 10,063 times
last updated: Jun 10 '22, 3:44 a.m.

Related questions

FAQ - How this Forum works

How to add an image into a dashboard viewlet

0
Claudia Callegari (444●3●97●71) | asked Jul 21 '09, 10:05 a.m.
I want to add an image within a dashboard viewlet. I know this can be done as I've seen it, but do not know how to do it. I have not found any good document about this either.
Any guidance? Thanks in advance.

Claudia Callegari

Accepted answer

2
permanent link
Ian Barnard (1.9k●6●13) | answered Aug 28 '15, 10:52 a.m.
FORUM ADMINISTRATOR / FORUM MODERATOR / JAZZ DEVELOPER
edited Jan 09 '17, 11:00 p.m. by Rosa Naranjo (2.9k●1●16●23)

I know this is a very old question, andI am sure the asnwer above is correct, but it didn't help me if the picture isn't accessible by a url. I want to embed a jpeg picture of our practice workflow into the dashboard, and the picture is created from a powerpoint flowchart, so it doesn't have a URL. As I haven't seen any other answer here is a solution I just discovered - works in firefox, at least - using an embedded base64 image. Don't worry if you don't know what that means, just follow the instructions :-)

  1. Get your image saved to e.g. a png file on your computer
  2. Go HERE, upload your image, and select/copy all the generated base64 content - it should start with <img
  3. On your Jazz dashboard, add an html widget
  4. Switch to view html source (top left toolbar button)
  5. Delete the existing text and paste in all the text you copied from abluestar
  6. Click OK
You can edit the title of the widget too (this is on the widget drop-down menu, not in the Content) in the Appearance values, so it doesn't just say 'HTML'.

UPDATE: now let's say you want to have hyperlinks from your picture, what you need is an html image map. What I did was:
  1. Start up a text editor and paste all the <img...> from abluestar into it. 
  2. Go to http://imagemap-generator.dariodomi.de/ and upload your jpg, and create some hotspots, then copy the html generated - there are two elements, an <img...> and a <map...>. Copy just the <map..> to the end.
  3. Paste it into your text editor AFTER the abluestar text
  4. Delete the [...] from the map
  5. Now in the base64 encoded image text from abluestar before the closing /> insert: usemap="#Map"
  6. In the <map...> for each hotspot there is a href='#'. You will have to replace each # with the hyperlink target. (tip: If you're not sure which hotspot is which in the map, put something unique in each '#' in the HTML and you'll see that link when you save the widget and hover the mouse over the picture)
  7. In your dashboard, create or edit contents of the html widget and switch to HTML view, paste all this text in, and click OK.
  8. Ta da!

Rosa Naranjo selected this answer as the correct answer

4 other answers

Most liked answers ↑|Newest answers|Oldest answers

1
permanent link
Ian Barnard (1.9k●6●13) | answered May 26 '16, 4:20 a.m.
FORUM ADMINISTRATOR / FORUM MODERATOR / JAZZ DEVELOPER
Another way to do this is to attach your image file to a work item - you can get a URL for the attachment and put that into the viewlet.
0
permanent link
Mike Pawlowski (686●1) | answered Jul 21 '09, 12:14 p.m.
JAZZ DEVELOPER
Hi Claudia,

Any form of content can be added to the viewlet content area statically or dynamically using Dojo templates (HTML), Javascript or CSS.

Please take a look at the following viewlet primer:
https://jazz.net/wiki/bin/view/Main/DashboardHelloWorldViewlet

Thanks
0
permanent link
Ian Barnard (1.9k●6●13) | answered Mar 14 '18, 8:01 a.m.
FORUM ADMINISTRATOR / FORUM MODERATOR / JAZZ DEVELOPER

 Another way is to server your image using the same application server that is hosting Jazz. For Liberty, you will have to enable dropins, and add a dummy 'app' - see the instructions for how to do this in Liberty for hosting DNG extensions here (you don't need to actually put a DNG extension in the folder, it can server other files). Then put the jpg in the extensions folder and it can be accessed by URL, so you can use the URL in a widget.
0
permanent link
Vaibhav S (106●3●48) | answered Jun 10 '22, 3:44 a.m.

 Hello,


Create an HTML Widget.
Edit it, and remove any Text.
Copy the image from your machine (Snipping tool or Print Screen) and paste it in HTML widget.

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.