nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Accepted answers

Stephane Oberlechner

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

All comments

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.

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.

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.

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?

Vishali

Marcus,

Have you found a solution yet?

Thanks,

Rajani

Stephane Oberlechner

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.

vlada2

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,

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.).

Ed Sattar

Did any one find solution for David question?

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.