Using icons in a custom field

[Marcus Bell]

I'm trying to display icons for a custom field with JIRA 5.0. Unfortunately, the descrion given here doesn't for me.

I created a custom list field with 4 options and pasted this into the "Description" field of the "Edit Custom Field Details" dialogue:

<script type="text/javascript">
customField = document.getElementById("customfield_10600");
for(var i=0;i<customField.options.length;i++) {
customField.options[i].className="imagebacked";
}
customField.options[0].style.backgroundImage="url(/jira/images/icons/priority_blocker.gif)";
customField.options[1].style.backgroundImage="url(/jira/images/icons/priority_blocker.gif)";
customField.options[2].style.backgroundImage="url(/jira/images/icons/priority_blocker.gif)";
customField.options[3].style.backgroundImage="url(/jira/images/icons/priority_blocker.gif)";
</script>

The field ID is indeed "10600", I got this from the URL of this dialogue.

In the screen I see when "Edit"ing the issue, I see the custom list field with the 4 options and with FireFox, the text seems to be indented a bit, but there is no icon visible, neither in the edit issue screen nor when viewing the issue nor in the issues list after adding the custom field to the list of visible columns. I had a look at the pages' HTML source and didn't find any line of the JavaScript given above.

Can anybody point out what I am missing?

Lotus Notes.lnk

[Stephane Oberlechner · Accepted solution]

Hi Marcus,

I use Icons on one of my customfield and it works fine. Note that :

1) on the create and edit mode, I don't see Icons (only text "Succes"/"echec" ...) . Only on view mode.

2) icons are on my jira server, on the "images" JIRA directory

My 3 values on the specific custom field:

<img src='../images/icons/emoticons/check.gif' alt='Passed' /> Succès

<img src='../images/icons/emoticons/warning.gif' alt='Not Completed' /> Non terminé

<img src='../images/icons/emoticons/error.gif' alt='Failed' /> Echec

[Vishali]

Stephane,

I have not seen icons on the view mode at all. Please post if you happen to get the solution.

[vlada]

nice, working for me

[Vishali]

vlada,

In which browser and which version of Jira? It hasn't worked for me in 5.0.4.

Thanks,

[vlada]

JIRA version 5.2.2

I don't think that version of browser could affect this. But anyway:

Opera 12, FF14, IE8, Chrome: 24.0.1312.57

Just make sure that:

- path to image is correct (check Marcus post)

- Icon is only visible in view mode (attachment included - field severity), in edit mode there is no icon visible just text ...

[Tim Eddelbüttel]

Nice, works for me to for "full" JIRA. Doesn't work in JIRA Service Desk. JSD shows the full value.

[Samuel]

I don't think that its a clean solution. When you try to filter the same "custom field", it will also gives you the long HTML code.

[Dieter]

Unfortunately this solution won't work anymore with JIRA 7, just see https://jira.atlassian.com/browse/JRA-38866 Please support me there in voting against this decision to drop any possibility to design rich options

[Jordan McCombs]

Commenting on an old thread here, but if anyone else finds this, give this new free plugin from Atlassian a shot -

https://marketplace.atlassian.com/apps/1214988/icons-for-jira?hosting=server&tab=overview&_ga=2.131694988.2005294153.1598274020-1610267602.1595853430

[Eli Shalnev]

it seems to be available only for self-hosted servers

[l]

HI There,

Any solution here.

My requirement is to make icons for Priority custom filed

Please help

Regards,

Anila

[Gaurav Mishra]

Does anyone know of any changes to get the images in Edit Mode in JIRA 6?

[David Jellison]

I ended up creating a web panel (right column) displaying the field value and setting the background of a text block to the color that reflects the value.

[Ed Sattar]

Did any one find solution for David question?

[Natalie Hobson]

Why not just HTML and provide a hyperlink in the field option? I added little flag icons to language selections for an "Affected Languages" field for my users (so the option for "French" had a small France flag next to it, etc.).

[Vishali]

Marcus,

Have you found a solution yet?

Thanks,

Rajani

[MattS]

The CustomWare Traffic Lights plugin (https://marketplace.atlassian.com/36434) lets you add colors to existing fields.

[David Jellison]

Thanks Matt for offering the "CustomWare Traffic Lights" plugin as a solution. I am hoping to find a java example of how to add icons to values in a custom field (like the Priority field), so I can include this in my utilities plugin. Can you offer a java example of adding icons in custom fields or point me to somewhere I can learn about this?

[David Jellison]

Is there a way to do this in Jira 5.x? I would like to create a "needs code review" field with a small icon to make an issue very noticible in the Greenhopper rapid board.

[Marcus Bell]

Thanks for your advice! Unfortunately, that didn't help.

I checked the field configuration and in the description field, I found the JS code I defined for my custom field. Tried to remove the JS code from the field description, only using the field's configuration description but that didn't change anything.

Checking the URL of the View Field Configuration > Edit dialogue, I noticed that the ID changed. Editing the custom field's description from the field configuration page directed me to

/secure/admin/EditFieldLayoutItem!default.jspa?atl_token=[...]|lin&id=10303&position=24

while the dialogue directs me to

/secure/admin/EditCustomField!default.jspa?atl_token=[...]|lin&id=10600

So I tried both IDs in my JS code, 10600 and 10303 but didn't see any icon.

Any other suggestions? To be specific, I wanted to replicate the combination of icons+text for a custom field, just as seen with the standard fields Priority, Type and Status.

[Dieter]

You can't expect to find the js code in the view screen or issue navigator since the description of your custom field is not rendered to these views. Just in the Edit screen your are supposed to find it. if it's missing anyway this might be because you have a field configuration defined on your project which overrides what you defined in the custom field details. just check what is defined in your custom field's description within the field configuration.