Is there a way to inject javascript onto the view page of an issue based on the workflow step?

[Adam Barylak]

I am looking for a way to possibly inject some javascript code into the view page of an issue but only when an issue is in a specific step. The reason i am looking to do this is because i want to remove the Assign and Assign To Me buttons without removing the ability to assign the issue via a transition, but only have these buttons hidden for one issue type in one project and only while that issue is in one specific state.

I know the behaviours plugin which we do have installed is able to do some special stuff on fields which will only take effect under special circumstances, but i haven't figured out how to inject javascript into the page via that plugin.

If anyone can offer help regarding how we can accomplish this via the behaviours plugin or via some other method, please let me know. Thanks.

[Andris Bērziņš · Accepted solution]

I have done something similar to what you ask. What I did was edit the viewissue-opsbar.jsp file with javascript code like this:

jQuery(document).ready(function () 
{

var workflowState = AJS.$('#status-val img').attr('alt');
if(workflowState == 'some specific state')
{
	var btnAssignToMe = AJS.$("#assign-to-me");
	var btnAssign = AJS.$("#assign-issue");

	btnAssignToMe.parent().remove();
	btnAssign.parent().remove();

}

});

All it does is scan the issue page for the status (#status-val) and depending on which status it is (by reading the image alternative attribute), it removes the assign buttons.

I hope this helps.

[Adam Barylak]

That is a very useful answer. I did modify my use of it a little bit, by using the javascript code but placing it in the description of a field i knew would always show up on the View screen (Component/s) for the issue needing this change. I also added to the script a little bit to also test the Project, and Issue Type. Here is my resulting code:

<script type='text/javascript'>
AJS.$(document).ready(function() {
        var workflowState = AJS.$('#status-val img').attr('alt');
        var issueType = AJS.$('#type-val img').attr('alt');
        var projectName = AJS.$('#heading-avatar img').attr('alt');
        if(workflowState == 'New' && issueType == 'Ticket' && projectName == 'IT Support')
        {
           var btnAssignToMe = AJS.$("#assign-to-me");
           var btnAssign = AJS.$("#assign-issue");
 
           btnAssignToMe.parent().remove();
           btnAssign.parent().remove();
      }
});
</script>

The results are actually really clean and the bar looks complete. In comparison, i tried a simple script where you just hide the buttons and that actually removes the rounded left side of that button bar. This method keeps that rounded edge and keeps the look of the UI consistant.

[George Lewe (LSY)]

Hi Adam,

I love that approach. Looking for something like that myself. However, the description of a field does not show up on the View screen. Only on Edit and Create. Using JIRA 6.1. How do make the description of Component/s appear on the View screen?

[Adam Barylak]

George-

This is kinda an old question, it has changed with the new versions of JIRA and you now have to use the announcement banner and I have tweaked it even further to ensure that the javascript changes will always persist. It was found that if a comment was added or a workflow transition was initiated, the javascript in the announcement banner was not re-initiated and the buttons, links or whatever you were modifying with javascript would return to defaults.

Here is some new code that i have implemented which will re-run the javascript function every time the page content is refreshed.

<script type='text/javascript'>
function contentChangedIT(){
    var workflowState = AJS.$('#status-val img').attr('alt');
    var issueType = AJS.$('#type-val img').attr('alt');
    var btnAssignToMe = AJS.$("#assign-to-me");
    var btnAssign = AJS.$("#assign-issue");
    if(workflowState == 'New' && issueType == 'Ticket')
    {
        btnAssignToMe.parent().remove();
        btnAssign.parent().remove();
    }
}
AJS.$(document).ready(function() {
    var projectName = AJS.$('#heading-avatar img').attr('alt');
    if(projectName == 'IT Support')
    {
        contentChangedIT();
        var myElement = document.getElementById('stalker');
        if(myElement != null && window.addEventListener){
            // Normal Browsers
            myElement.addEventListener('DOMSubtreeModified', contentChangedIT, false);
        } else if(myElement != null && window.attachEvent){
            // IE
            myElement.attachEvent('DOMSubtreeModified', contentChangedIT);
        }
    }
});
</script>

Hope This helps.