How do you add a column to "Issues in Epic" panel

Hello Everyone,

I am not sure if this is possable but is there a way to add a new column to the Issues in Epic panel on epics. I am hoping there is some configuration setting somewhere like subtask.

Thank you in advance.

8 answers

1 accepted

1 votes
Timothy Chin Community Champion May 16, 2013

Don't think this option is avaialble at the moment. Editing the add-on would be the only way now i think.

7 votes
Renjith Pillai Community Champion Nov 16, 2013

Put this into announcement banner (remember the change the custom field id in the script):

<script type='text/javascript'>
AJS.$(document).ready(function() {

AJS.$('#ghx-issues-in-epic-table tr').each(function(){
	console.log('Found epic table');
	var row = this;
	var issueKey = AJS.$(this).attr("data-issuekey");
	AJS.$.getJSON(AJS.contextPath() + '/rest/api/latest/issue/' + issueKey, function(data){
		console.log('Got data for - ' + issueKey);
		var value = data.fields.customfield_10600;
		console.log('Value - ' + value);
		var actions = AJS.$(row).find('td.issue_actions');
		AJS.$(actions).before('<td class="nav">' + value + '</td>');
	});
});

});
</script>

Thanks for sharing this Renjith!

I'm trying to add fixVersions value to the table and struggle to address this filed properly.

data.fields.fixVersions returns object type, how can I get version(s) names?

Renjith Pillai Community Champion Dec 03, 2013

fixVersions is an Array. Use this:

<script type='text/javascript'>
AJS.$(document).ready(function() {
 
AJS.$('#ghx-issues-in-epic-table tr').each(function(){
    var row = this;
    var issueKey = AJS.$(this).attr("data-issuekey");
    AJS.$.getJSON(AJS.contextPath() + '/rest/api/latest/issue/' + issueKey, function(data){
        var value = data.fields.fixVersions.map(function(version){return version.name});
        var actions = AJS.$(row).find('td.issue_actions');
        AJS.$(actions).before('<td class="nav">' + value + '</td>');
    });
});
 
});
</script>

That's very useful and a good example of how to change what is show. It will need testing for each version of Agile since the DOM model changes reasonably quickly between versions in my experience.

Renjith,

can you please provide the Announcement banner entry for adding timespent to the Issues in Epic display? I tried this and it's not working for me...

<script type='text/javascript'>
AJS.$(document).ready(function() {

AJS.$('#ghx-issues-in-epic-table tr').each(function(){
console.log('Found epic table');
var row = this;
var issueKey = AJS.$(this).attr("data-issuekey");
AJS.$.getJSON(AJS.contextPath() + '/rest/api/latest/issue/' + issueKey, function(data){
console.log('Got data for - ' + issueKey);
var value = data.fields.timespent;
console.log('Value - ' + value);
var actions = AJS.$(row).find('td.issue_actions');
AJS.$(actions).before('<td class="nav">' + value + '</td>');
});
});

});
</script>

Thanks

Renjith Pillai Community Champion Feb 19, 2014

That seems to be correct. Can you try to print the output of the REST call using the browser console and see the data format?

AJS.$.getJSON(AJS.contextPath() + '/rest/api/latest/issue/&lt;your issue id&gt;', function(data){
console.log(data);
});

Renjith, I see what the problem is...Jira is displaying hours (in the Issues in Epic section) only for stories that have hours booked directly against the story. But Jira is not displaying hours that are booked against subtasks of those stories. Is there a way I can see hours booked against subtasks of Issues in Epics as well as hours booked directly against the stories?

Thanks

Renjith Pillai Community Champion Feb 20, 2014

Ahh, right. JIRA is designed that way.

You can, you need to extend the script a bit to do a query for all the sub-tasks of the parent.

For example, this gives the sub-tasks of the parent JRA-36686 - https://jira.atlassian.com/rest/api/2/search?jql=parent%20%3D%20%22JRA-36686%22

You need to write a function which checks this data and sums up all the values for the children.

Thanks Renjith, do you have an example of the function you mentioned above?

Renjith Pillai Community Champion Feb 20, 2014
var totalSpent = 0;
var issueKey = "CONF-21986";
AJS.$.getJSON(AJS.contextPath() + '/rest/api/latest/search?jql=parent%20%3D%20%22' + issueKey + '%22', function (data) { for (var i = 0; i < data.issues.length; i++) { var subTime = data.issues[i].fields.timespent; if (subTime) { totalSpent += subTime; } console.log("Total time in seconds : " + totalSpent); } });

Hi Renjith

I have a custom field - Target release(single drop down) with multiple values, when i put this code in banner, i am getting "object object" instead of target release value, am i missing anything here. can u help me with this.

Tried with fixversion code, thats working fine for fix versions displaying in "issue in epics" section.

thanks

Raj

Renjith Pillai Community Champion Apr 04, 2014

Just try to do a console.log of the object and see the object properties and use the appropriate one. (might have a 'name' member)

Renjith

thanks for quick response, appreciate your help.

I tried with name.customfield_xxxx, i am getting value as "undefined" instead of selected value.

Object properties as shown below.

<label for="customfield_11208">Target Release</label>

<select class="select cf-select" name="customfield_11208" id="customfield_11208">

<option value="-1">None</option>

<option value="11124">Release 1</option>

<option value="11125">Release 2</option>

<option value="11126">Release 3</option>

<option value="11127">Release 4</option>

<option selected="selected" value="11128">Release 5</option>

<option value="11129">Release 6</option>

<option value="11130">Release 7</option>

<option value="11131">Release 8</option>

<option value="11132">Release 9</option>

</select>

Renjith Pillai Community Champion Apr 18, 2014

Raj, I meant the json object that you are getting (not the html data). I don't know what you meant by name.customfield_xxxx. Can you paste the json output for the issue? http://your_server_name:port//rest/api/latest/issue/your_issue_key

Hey Renjith,

How can we add Sprint name to the fixversion issue in epics column adjustment?

Renjith Pillai Community Champion May 23, 2014

In fact Sprint is also a custom field. For example in the public instance, the customfield is customfield_11930. You may need to do some string parsing based on the value that you get for the customfield.

using the custom field value for Sprint gives the follwing result in the Epic columns: com.atlassian.greenhopper.service.sprint.Sprint@14a1cbbf[name=RNA 2014.1.0 Sprint 1,closed=true,startDate=2014-03-31T09:00:00.000-04:00,endDate=2014-05-02T17:00:00.000-04:00,completeDate=2014-05-16T10:54:12.107-04:00,id=179]

Any ideas on how to show just the name?

Renjith, You nailed it! Thank you much for sharing this!! Can you help me add headings to this panel? I am trying to add headings so for the new column that I added, most of the fields are null and users get confused by just seeing the 'null' values. Your help is much appreciated! Thank you.

Can we revisit this? I've managed to get the 'Due Date' setup to show. However, when you edit the issue from the gear/cog icon, that section of the page reloads and the data disappears. I've tried with both (document).ready() and (window).load with no success. Any help to rerun this when that event is run would be really helpful!

Hi there.  This has been very helpful.  I successfully added story points and fix version.  But I can't seem to figure out how to parse the sprint to get the name.   When I use a javascript function like split(","), the entire script seems not to work.   Any help is appreciated.

Just applied the FixVersion script.  Thank you, thank you, thank you @Renjith Pillai!

Hopefully Atlassian will resolve https://jira.atlassian.com/browse/JSW-14705, but being that it was submitted over 3 years ago, not holding my breath.

Hi Renjith

How do you add multiple custom fields as columns in "Issues in Epic" panel?

Is it:
var value = data.fields.customfield_10600, data.fields.customfield_10601;

Many thanks.

The best approach is to loop over the fields.

console.log('Got data for - ' + issueKey);
                                
        var actions = AJS.$(row).find('td.issue_actions');
        
        var index;
        var fields = [data.fields.customfield_10600, data.fields.customfield_10601,data.fields.customfield_10602];
        var addToTable = "";
        
        for (index = 0; index &lt; fields.length; ++index) {
            var field = fields[index];
            if (!field) {
                field = "";
            }
            addToTable += '&lt;td class="nav" style="white-space: nowrap"&gt;' + field + '&lt;/td&gt;';            
        }
                
        AJS.$(actions).before(addToTable);

Why doesn't all me to 'set banner'?

 

Can you configure this to only display the issues in a specific project and not all epics?

 

Hi Renjith,

I tried to add "Due Date" and "Component", 2 columns into "Issues in Epic" as follows. But it's displaying as undefined - why it's so? anything wrong in the script...

 

<script type='text/javascript'>
AJS.$(document).ready(function() {

AJS.$('#ghx-issues-in-epic-table tr').each(function(){
console.log('Found epic table');
var row = this;
var issueKey = AJS.$(this).attr("data-issuekey");
AJS.$.getJSON(AJS.contextPath() + '/rest/api/latest/issue/' + issueKey, function(data){
console.log('Got data for - ' + issueKey);
var value = data.fields.Due;
console.log('Value - ' + value);
var actions = AJS.$(row).find('td.issue_actions');
AJS.$(actions).before('<td class="nav">' + value + '</td>');
});
});

});
</script>

 

<script type='text/javascript'>
AJS.$(document).ready(function() {

AJS.$('#ghx-issues-in-epic-table tr').each(function(){
console.log('Found epic table');
var row = this;
var issueKey = AJS.$(this).attr("data-issuekey");
AJS.$.getJSON(AJS.contextPath() + '/rest/api/latest/issue/' + issueKey, function(data){
console.log('Got data for - ' + issueKey);
var value = data.fields.Components;
console.log('Value - ' + value);
var actions = AJS.$(row).find('td.issue_actions');
AJS.$(actions).before('<td class="nav">' + value + '</td>');
});
});

});
</script>

I have the results that I expect the first time that I set the banner, and go to an epic. But when I go to another epic, I don't get the new columns that I've added unless I click on Reload page.  Any ideas how to fix that issue?

Hi,

I tried to add multiple custom fields(components, duedate) as columns in "Issues in Epic" panel as below and it's working successfully now for me - you can try to follow the same as per your requirement.

<script type='text/javascript'>
AJS.$(document).ready(function() {

AJS.$('#ghx-issues-in-epic-table tr').each(function(){
console.log('Found epic table');
var row = this;
var issueKey = AJS.$(this).attr("data-issuekey");
AJS.$.getJSON(AJS.contextPath() + '/rest/api/latest/issue/' + issueKey, function(data){
console.log('Got data for - ' + issueKey);

var value1 = data.fields.components.map(function(component){return component.name});
var value2 = data.fields.duedate;

console.log('Value - ' + value1);
console.log('Value - ' + value2);

var actions = AJS.$(row).find('td.issue_actions');
AJS.$(actions).before('<td class="nav">' + value1 + '</td>');
AJS.$(actions).before('<td class="nav">' + value2 + '</td>');
});
});

});
</script>

Hi - Can someone tell me exactly where I enter these details


Thanks

Administration > System > User Interface > Announcement Banner - it has to stay there as long as you want to add extra column/s.

Hi Renjith,

I added a cloumn do display labels. Is there any way to move the column position from last to third (after issue key and summary)?

Thanks,
Lukasz 

It would be nice to be able to configure Issues in Epic like sub-tasks.

This javascript snippet helped us too, because we wanted to see sprint data on this table.

However extracting sprint name is not easy as some already mentioned.

So I decided to solve this via string manipulation after converting "data.fields.customfield_10004" to a string.

My code is as follows:

&lt;script type='text/javascript'&gt;
AJS.$(document).ready(function() {
AJS.$('#ghx-issues-in-epic-table tr').each(function(){
    console.log('Found epic table');
    var row = this;
    var issueKey = AJS.$(this).attr("data-issuekey");
    AJS.$.getJSON(AJS.contextPath() + '/rest/api/latest/issue/' + issueKey, function(data){
        console.log('Got data for - ' + issueKey);
        var value = "No Sprint" ; 
        if (data.fields.customfield_10004 != null) {
                   value = String(data.fields.customfield_10004);
                   var re = /name/;
                   var pos = value.search(re);
                   value = value.substring(pos);
            
                   var re2 = /,/;
                   var pos2 = value.search(re2);
                   value = value.substring(5,pos2);
                   }
        console.log('Value - ' + value);
        var actions = AJS.$(row).find('td.issue_actions');
        AJS.$(actions).before('&lt;td class="nav"&gt;' + value + '&lt;/td&gt;');
    });
});
});
&lt;/script&gt;

Hope that helps.

Hi,

I found a very good input here for my issues here. But while getting into the more into the details for my solution one question regarding issuetype arose:

I would like to check in such a script the type of issuetype to proceed with different actions depending on the issuetype. But somehow I don't get back the issuetype. Here's my script:

<script type='text/javascript'>
AJS.$(document).ready(function() {

AJS.$('#ghx-issues-in-epic-table tr').each(function(){
console.log('Found epic table');
var row = this;

var issueKey = AJS.$(this).attr("data-issuekey");
string1 =issueKey + " ";

if (string1.startsWith("PSUMBRELLA")) {
    


AJS.$.getJSON(AJS.contextPath() + '/rest/api/latest/issue/' + issueKey, function(data){
console.log('Got data for - ' + issueKey);

var value1 = '- ' + data.fields.components.map(function(component){return component.name})+ ' -';
var value2 = data.fields.fixVersions.map(function(fixVersion){return fixVersion.name})+ ' - ';
var value3 = 'RemainingEffort: ' + (data.fields.aggregatetimeestimate)/3600 + 'h - ';
var value4 = 'IssueType: ' + (data.fields.issueType.name))+ ' - ';


console.log('Value - ' + value1 );
console.log('Value - ' + value2 );
console.log('Value - ' + value3 );
console.log('Value - ' + value4 );

var actions = AJS.$(row).find('td.issue_actions');
AJS.$(actions).before('<font color="red"><td class="nav">' + value1 + '</td></font>');
AJS.$(actions).before('<td class="nav">' + value2 + value3 + value4 +'</td>');
});
}
});

});

</script>

 

Marked the area which I am struggling with in bold letters.

thanks for feedback

Best regards

Tobias

Suggest an answer

Log in or Join to answer
Community showcase
Sarah Schuster
Posted Jan 29, 2018 in Jira

What are common themes you've seen across successful & failed Jira Software implementations?

Hey everyone! My name is Sarah Schuster, and I'm a Customer Success Manager in Atlassian specializing in Jira Software Cloud. Over the next few weeks I will be posting discussion topics (8 total) to ...

3,128 views 13 19
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you
Atlassian Team Tour

Join us on the Team Tour

We're bringing product updates and pro tips on teamwork to ten cities around the world.

Save your spot