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.

9 answers

1 accepted

1 vote
Accepted answer
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.

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?

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

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

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?

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

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>

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?

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 guys - sorry this will be a ridiculous question to those who know... 

How do you enter code like that into Jira? Does it have to be the server version of the software? Or is this possible on the cloud version?

Like 1 person likes this

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

Why isn't this available in the advanced settings as for sub-tasks?

In our Jira the announcement banner is used for other purposes and putting a js script that certainly not all admins would understand is a really bad practice as from my perspective.

Can the same thing be done in some add-ons? Maybe Behaviours?

I totally agree.

Adding a script to the annoucementbanner cannt be the solution as you have to potentially develop, test and fix it after every update.

 

So there really is no "clean" solution?

Like 1 person likes this

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.

Lukasz Baksik I don't see "ANNOUNCEMENT BANNER" in Jira Cloud.

User Interface is present in System but even if i search for the word Banner or Announcement, nothing turns up. I have gone through the menus many times, nowhere can I fin Announcement Banner in Jira Cloud.

 

Can you please clarify?

 

Kind Regards.

Like 2 people like this

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 

Hello Lukasz,

The insertion is done with the line

AJS.$(actions).before('<td class="nav value">' + value + '</td>');

The line before that set the action

var actions = ALS.$(row).find('td.issue_actions');

Looking at the web page in the developer console, F12, you will see that td.issue_actions is the last table data column. Replacing td.issue_actions with the appropriate column will change the position. E.g. use td.issutype to place it between the summary and the issuetype icon.

var actions = ALS.$(row).find('td.issuetype');
AJS.$(actions).before('<td class="nav value">' + value + '</td>');

Br
Henrik

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

Do you know how to replace there column "Stage" to "Sprint". Because sprint number is more useful?

https://take.ms/4rnrt

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 Sign up to answer
Community showcase
Published yesterday in Jira

How you can achieve compact and easy-to-maintain workflows in your JIRA( Server)

This approach requires you to have the JIRA administrative rights. The main aim of this article is to help you achieve an organized, easy-to-maintain workflows in your JIRA instance thereby, reducin...

200 views 0 0
Read article

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