Hide a field through other field

[simarpreet singh]

* NOTE*: This is for JIRA core, not cloud

Hi team,

I have 3 fields here: Approval Status, IfChoosen and Any Error.

I want to hide Any Error field through through Approval Status on create issue screen.

Again I want to hide Any Error through IfChoosen on a particular transition of same issue type.

I am able to do it for one of the scenarios but not for the other time. I mean Approval Status also controls Any Error and IfChoosen also controls Any Error, because the code is same in the description of Approval Status and IfChoosen. System is not able to understand which field is trying to hide Any Error.

Is there any way of creating an isolation, keeping in mind that I'm not going to create any 4th field here.

Here is the code:

Many thanks.

[Earl McCutcheon]

hello @simarpreet singh ,

Thanks for reaching out and I played around with this a bit and I took a little bit of a different approach, I found and modified the script on the following thread to line up with your use case that works really well here:

• https://community.atlassian.com/t5/Jira-questions/How-do-I-display-a-field-based-on-the-values-of-a-Single-select/qaq-p/158386

The modification I made is to add in all three fields into field ones description so the full java update into the first field you are using is then doing cascading reveal, so that all the actions are controlled from the initial visible field.  I was running into some issues getting the scripts to run from the second field if the values were separated into alternate fields but adding both onchange values into field one did the trick where having onchange events in the hidden  field was causing it to error out.

You will need to modify the field ID's to match your fields but in the example script below the following ID's are used, i created 3 custom fields of type Select List (Single Choice) lining up with your naming convention and the ID's for the fields and options are as follows:

• _Approval Status: 
  • customField_10100
    • options:
      • 1 with ID: 10101  << This ID is used to make ifChosen visible
      • 2 with ID:  10102 
• _ifChoosen: 
  • customField_10101
    • options:
      • 1 with ID: 10103 
      • 2 with ID: 10104  << This ID is used to make Any_Error visible
      • 3 with ID: 10105
• _Any_Error
  • customField_10102
    • options:
      • 1 with ID: 10106
      • 2 with ID: 10107
      • 2 with ID: 10108

and the Script is placed in the Custom Field description of Approval Status, so when Approval status is selected as option 1 it will show ifChosen and then if ifChosen is set to option 2 the field Any Error will be shown, and deselecting the parent field will re-hide and clear out the value of the child field:

<script type="text/javascript">
/*---------
   Use Case
-----------
   Only show targetField when the changingField is set to
   desiredValue.
-----------
   This is using basic javascript and the jquery library
   provided by atlassian. This should be within the Field
   Description, within the Field Configuration.
   The jQuery can be accessed using the AJS.$ wrapper.*/    //Obtain the first field by ID
    changingField = document.getElementById('customfield_10100');
    changingField2 = document.getElementById('customfield_10101');    //Start our process if the field is present
    if (changingField) {            //Desired value to show the target field
            desiredValue = '10101'            //Obtain the second field by ID
            targetField = document.getElementById('customfield_10101');
            targetField2 = document.getElementById('customfield_10102');            // This first if-statement will hide the target field immediately, unless the default value is set to our desired value
            // Hide the target field's container if changing field isn't set the desired value
            if (changingField.value != desiredValue) AJS.$(targetField).parent().hide()            // onchange runs when a select field changes. Basic logic here shows it for desired value, hides it for all else
            // Be sure to set the field to nothing when using the else clause to hide the field container, otherwise you'll still submit data
            changingField.onchange=function() {
                if (this.value == desiredValue) {           
                    AJS.$(targetField).parent().fadeIn( 200, "jswing" )
                    } else {
                        targetField.value='';
                        AJS.$(targetField).parent().fadeOut( 200, "jswing" );
                      }
            }
    }
        if (changingField2) {            //Desired value to show the target field
            desiredValue2 = '10104'            //Obtain the second field by ID
            targetField2 = document.getElementById('customfield_10102');            // This first if-statement will hide the target field immediately, unless the default value is set to our desired value
            // Hide the target field's container if changing field isn't set the desired value
            if (changingField2.value != desiredValue2) AJS.$(targetField2).parent().hide()            // onchange runs when a select field changes. Basic logic here shows it for desired value, hides it for all else
            // Be sure to set the field to nothing when using the else clause to hide the field container, otherwise you'll still submit data
            changingField2.onchange=function() {
                if (this.value == desiredValue2) {           
                    AJS.$(targetField2).parent().fadeIn( 200, "jswing" )
                    } else {
                        targetField2.value='';
                        AJS.$(targetField2).parent().fadeOut( 200, "jswing" )
                      }
            }
    }
 </script>

Give this a try and let me know if it fits your needs.

Regards,
Earl