You're on your way to the next level! Join the Kudos program to earn points and save your progress.
Level 1: Seed
25 / 150 points
Next: Root
1 badge earned
Challenges come and go, but your rewards stay with you. Do more to earn more!
What goes around comes around! Share the love by gifting kudos to your peers.
Keep earning points to reach the top of the leaderboard. It resets every quarter so you always have a chance!
Join now to unlock these features and more
The Atlassian Community can help you and your team get more value out of Atlassian products and practices.
Do you also have the need to communicate certain news to specific Jira project users only? E.g. you're gradually migrating from Jira Server/Data Center to Jira Cloud and need to inform your users that a certain project is migrated and they should rather work in Jira Cloud?
In this How-to, I'll explain how you can configure a project banner on a project or even issue level.
You need system administration permissions in order to configure the banner.
<div id="projectAnnouncement" style="display:none;margin:0;" class="aui-message aui-message-error">
This is the project banner for project <span id="announcementProjectKey"></span>.</div>
<div id="issueAnnouncement" style="display:none;margin:0;" class="aui-message aui-message-error">
This is the issue banner for issue<span id="announcementIssueKey"></span>.</div>
<script>
//enter the project keys of your migrated projects here
const projectsToAnnounce = ['FIRST','SECOND'];
document.getElementById('announcement-banner').style.padding = '0';
const showProjectMovedAnnouncement = function() {
require(['jira/issue','jira/api/projects'], function(issue, projects) {
const pageDetails = getPageDetails(issue);
if (projectsToAnnounce.includes(pageDetails.projectKey)){
if (pageDetails.issueKey) {
document.getElementById('issueAnnouncement').style.display = 'block';
document.getElementById('announcementIssueKey').innerHTML = pageDetails.issueKey;
} else {
document.getElementById('projectAnnouncement').style.display = 'block';
document.getElementById('announcementProjectKey').innerHTML = pageDetails.projectKey;
}
} else {
document.getElementById('projectAnnouncement').style.display = 'none';
document.getElementById('issueAnnouncement').style.display = 'none';
}
});
}
if (window.location.href.includes('jql=')) {
//run the script multiple times in the issue browser
setInterval(showProjectMovedAnnouncement, 500);
} else {
//run it once after everything is initialized on the other pages
addEventListener('DOMContentLoaded', (event) => {showProjectMovedAnnouncement()});
}
function getPageDetails(issue, projects){
let issueKey;
let projectKey;
const metaAjsIssueKey = document.querySelector('meta[name="ajs-issue-key"]');
//try to get issue key
if ((issue.getIssueKey && issue.getIssueKey())) {
issueKey = issue.getIssueKey();
} else if (metaAjsIssueKey && metaAjsIssueKey.content) {
issueKey = metaAjsIssueKey.content;
}
//try to get project key
if (JIRA && JIRA.ProjectConfig && JIRA.ProjectConfig.getKey) {
projectKey = JIRA.ProjectConfig.getKey();
} else if (projects && projects.getCurrentProjectKey && projects.getCurrentProjectKey()) {
projectKey = projects.getCurrentProjectKey();
} else if (issueKey) {
let matches = issueKey.match(/([A-Za-z]+)-\d+/);
if (matches && matches.length > 1) {
projectKey = matches[1];
}
}
return {
'issueKey': issueKey,
'projectKey': projectKey
};
}
</script>
If you want to style your banner in a different way, you can also make use of the Atlassian User Interface library (AUI). This sample code uses, e.g. AUI's messages formatting by specifying the corresponding CSS classes.
While working on a blogpost for improving communication about a phased migration of Jira, we had the need for such a project configuration banner - and thought we simplify it and share it with the broader Atlassian Community. If you're interested in our specific version how that banner looked like, check out our help docs.
Let me know what you think about it - or what improvement tips you have.
And if that's a too hacky solution for you - or you want to have it on Cloud, checkout some marketplace apps.
Matthias Gaiser _K15t_
Community LeaderTechnical Product Manager
K15t
Stuttgart, Germany
145 accepted answers
1 comment