How to display custom field based on value of Component.

[Irene Irene]

Ref: http://confluence.atlassian.com/display/JIRACOM/Using+JavaScript+to+Set+Custom+Field+Values

I have created a custom field called 'Category'. This field will be 'hidden' unless if the 'component' value=Portal.

Can I ask someone to check my javascript for correctness?

<script type="text/javascript">
var componentID = document.getElementByID('component');
var target = document.getElementById('customfield_10040');
// Hide the target field by default
target.style.display = 'none';

if ( componentID.value == "Portal" ) {
target.style.display = '';
} else {
target.style.display='none';
}
};
</script>

The 2nd question, do I place this javascript in the 'description' of the 'custom field' (Category) or in the description of the JIRA standard 'Component'?

Thanks in advance.

[Emily Watford · Accepted solution]

You would put the javascript in the description of the custom field (Category). We did something similar - display a custom field based on another field's selection. Here's ours if it helps:

<script type="text/javascript">

// Returns the first ancestor of the child element that has the given className
function getAncestorByClassName(child, className) {
var ancestor = child.parentNode;
var pattern = new RegExp("(^|\\s)" + className + "(\\s|$)");

// using while loop probably more efficient since we can reuse the pattern
/*
if (ancestor) {
return pattern.test(ancestor.className) ? ancestor : getAncestorByClassName(ancestor, className);
}
*/

while (ancestor)
{
if (pattern.test(ancestor.className)) {
return ancestor
}
else {
ancestor = ancestor.parentNode;
}
}

return ancestor;
}


var field = document.getElementById("customfield_10162");


if (field)
{
var target = getAncestorByClassName(document.getElementById("customfield_10163"), "field-group");
target.style.display='none';

// Hide the target field if field isn't "New Hire", "Promotion", "Transfer"
if (field.value != 'New Hire' && field.value != 'Promotion' && field.value != 'Transfer'){
target.style.display='none';
document.getElementById("customfield_10163").value = '';
}
else
target.style.display = '';

field.onchange=function()
{
if (this.value == 'New Hire' || this.value == 'Promotion' || this.value == 'Transfer')
{
target.style.display = '';
}
else
{
target.style.display = 'none';
document.getElementById("customfield_10163").value = '';
}
}

}

</script>

[Raju Adluru]

Sure, Thank you Irene, have a great one.

[Irene Irene]

I'm sorry, I don't have access to the JIRA system because I no longer work for NOAO. However, here is what I have in my notes. It may be of help to you.

I first just wanted to test embedding javascript into the custom field's description as described here:

http://confluence.atlassian.com/display/JIRACOM/Using+JavaScript+to+Set+Custom+Field+Values

Scoll down to example "Hidden extra fields". However, I don't do JavaScript and the script I tried to implement did not work. I gave up on javascript, and created a cascading select list. Hopefully with the example in the URL above and better JavaScripting skills may be of help to you. Good luck! --irene

[Raju Adluru]

Hi ibarg

How did you fix this, can you share your thoughts on this, i also have similar kind of requirement.

Thanks

[Irene Irene]

Hi Raju,

I personally did not figure it out, but one of my colleagues had a work around. I am retired now, I will look though my old JIRA issues to see if I can elaborate. Sorry...:-)

[Raju Adluru]

Hi
I have similar requirement, when i select a component, i want to display custom field-"release" select list related to that component only, can you help here.
for e.g
i have components Portal, Web etc
i have custom field - release with select list portal rel 1, portal rel 2, web rel 1, web rel 2 etc.
when i select portal Component, i should see only portal rel select list, how can i do this with above code.
thanks for your help.

[JamieA]

It's not incorrect per se as far as I can tell, but as it's not in a "document ready handler, it can execute before the DOM has been parsed and therefore the getElementByID could fail to find the element. Nor does it handle the case where the user changes the value for the Portal field.

It's more or less the same question as answered here, maybe you could use similar code: https://answers.atlassian.com/questions/24566/show-hide-a-custom-field-based-on-select-llist?page=1#24570

EDIT: And the Components field has the ID components, not component.

[Irene Irene]

We finally figured it out. But I was grateful for all who commented.