Adding Links to the Jira Navigation Bar with Javascript (and other tips)
January 15, 2019

Adding Links to the Jira Navigation Bar with Javascript (and other tips)

So we wanted to add some simple buttons to the Jira navigation bar to easily reach some of our favorite dashboards. Should be easy, right? Not in the world of Atlassian. Jira is a great solution to issue management, but Atlassian (like several other software companies - Adobe? Microsoft?) is now trying to squeeze too much profit out of it. Their strategy seems to be to remove as many useful features from the base software as possible, and have developers create plugins for these missing features - which the user then needs to buy if he wants to effect sometimes even the simplest customizations. Sorry, end.of.rant.

Back to the point, if you are set on doing this the "Atlassian" way then you'll need to either buy a plugin that does it for you (like Adaptivist ScriptRunner), or create a plugin yourself. To do the latter, you'll have to install the Atlassian Plugin SDK, and spend several hours learning about how to develop and build a plugin for Jira. Although luckily, Jira has created a tutorial on Adding menu items to Jira. Still...that doesn't sound too zen. Really, all it should take is a line of Javascript!

Write the script!

Use FireBug or Chrome's developer tools to figure out where you want to put your button. You can also see what links are used for many aspects of the Jira site. I wanted to put links to some of my dashboards, so I just inspected the relevant links on the "Dashboard" drop-down menu.

So, you'll have to write your own script, but for me this is what the end result was:

<script>if (AJS.Meta.get("remote-user") == 'l.laszlo') { $('#create-menu').after(`<li style="margin-left: 2rem;"><a href="/secure/Dashboard.jspa?selectPageId=10103">Szelence ITS</a></li><li><a href="/secure/Dashboard.jspa?selectPageId=10200">Tipton ITS</a></li><li><a href="/secure/Dashboard.jspa?selectPageId=10300">Zen Internal</a></li>`); }</script>

I wanted to only show the buttons for my own login, so I added the if (AJS.Meta.get("remote-user") == 'l.laszlo') { condition. You can read more about How to access metadata in a user macro here! Or read the official "Atlassian User Interface" a.k.a. AUI docs,

Of course, you'll be running into problems if you want to write a script in a corporate environment with hundreds of users with different privileges etc. But if you're a corporate Jira admin, you probably don't mind paying $$$ for some plugin to add this functionality for you anyway.

Conjure Jira to run your script!

Again, you could use a plugin for this - that was my first thought anyway. There are several paid options, and one that is almost perfect called JSIncluder. Luckily, it turns out there's an easier way! Go to your Administration panel, and find the Announcement banner link:

Turns out, you can paste any bit of code here and it'll be added to every Jira page load! Perfect.

And voila! Here are my buttons, inserted after the "Create" button:

Is this a great solution? Of course not. Might it break with a new Jira version? Quite possibly. Is it hard to maintain? Not really. Did it take longer to write this post than to implement "the solution"? Yepp.


Some other tips that we've found useful:

Hide the dashboard "sidebar"

A useless feature of Jira is the dashboard "sidebar" that duplicated the functionality of the Dashboards drop-down. Luckily, it can be hidden with some CSS! Place it in the "Announcement banner" (in the Adminisitration area).

<style>
/* HIDE DASHBOARD LEFT PANEL WITH FAVOURITE DASHBOARD LINKS*/
#dashboard > .tabs.vertical {
  border-right: 0px !important;
}
#dashboard > .vertical.tabs {
    width: 0px !important;
}
#dashboard > .vertical.tabs + #dashboard-content {
    margin-left: 0px !important;
}
/* REMOVE BANNER TOP PADDING*/
#announcement-banner {
    padding: 0px !important;
}
</style>

From: https://community.atlassian.com/t5/Jira-questions/Dashboard-how-do-I-hide-the-dashboard-selector-on-the-left/qaq-p/372986

Adding Links to the Jira Navigation Bar with Javascript (and other tips)
Share this