Configure a Project Banner

You can configure a project banner in order to notify your users that a certain project has been migrated to a Cloud instance. Since Jira only supports system-wide announcement banners, this article provides you with a sample JavaScript code how you can make the banner to only show up within the desired projects.

Prerequisites

You need system administration permissions in order to configure the banner.

Setup the Announcement Banner

Navigate to the announcement banner administration in Jira.
1. Choose Administration > System.
2. Select User Interface > Announcement banner in the System panel below.
In the Announcement text area, enter the sample code below and adjust it to your needs. The sample code adds an issue-specific banner and a project-specific banner, depending on the context the user currently is in. You probably want to adjust these sections:
- The text inside the projectMovedAnnouncementProjectLevel. This is the text shown in a project context, e.g. the project configuration.
- The text inside the projectMovedAnnouncementIssueLevel. This is the text shown in an issue context, e.g. the issue view.
- The list of migrated projects (migratedProjects). This sample shows a banner for the projects with the keys FIRST and SECOND.
- The url to your Cloud instance (cloudURL). This sample creates links to YOURINSTANCE.atlassian.net
Save your banner.

JS

<div id="projectMovedAnnouncementProjectLevel" style="display:none;margin:0;" class="aui-message aui-message-error">
The project <span id="projectMovedProjectKey"></span> has been moved to Cloud. You can keep watching the existing content here or <a id="projectMovedProjectLink" href="">navigate to the Cloud project</a>.</div>
<div id="projectMovedAnnouncementIssueLevel" style="display:none;margin:0;" class="aui-message aui-message-error">
The project <span id="projectMovedProjectKey2"></span> has been moved to Cloud. You can keep watching the issue <span id="projectMovedIssueKey"></span>  here or <a id="projectMovedIssueLink" href="">navigate to the Cloud issue</a>.</div>

<script>
//enter the project keys of your migrated projects here
const migratedProjects = ['FIRST','SECOND'];
//enter your cloud instance url here (without a trailing slash)
const cloudURL = 'https://YOURINSTANCE.atlassian.net';

document.getElementById('announcement-banner').style.padding = '0';
const showProjectMovedAnnouncement = function() {
  require(['jira/issue','jira/api/projects'], function(issue, projects) {
    const pageDetails = getPageDetails(issue, projects);

    if (migratedProjects.includes(pageDetails.projectKey)){
      if (pageDetails.issueKey) {
         document.getElementById('projectMovedAnnouncementIssueLevel').style.display = 'block';
         document.getElementById('projectMovedIssueKey').innerHTML = pageDetails.issueKey;
         document.getElementById('projectMovedProjectKey2').innerHTML = pageDetails.projectKey;
         document.getElementById('projectMovedIssueLink').href = cloudURL + '/browse/' + pageDetails.issueKey;
      } else {
         document.getElementById('projectMovedAnnouncementProjectLevel').style.display = 'block';
         document.getElementById('projectMovedProjectKey').innerHTML = pageDetails.projectKey;
         document.getElementById('projectMovedProjectLink').href = cloudURL + '/projects/' + pageDetails.projectKey;
      }
    } else {
      document.getElementById('projectMovedAnnouncementProjectLevel').style.display = 'none';
      document.getElementById('projectMovedAnnouncementIssueLevel').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];
      }
  }

  console.log(`issuekey=${issueKey}`);
  console.log(`projectKey=${projectKey}`);

  return {
    'issueKey': issueKey,
    'projectKey': projectKey
  };
}
</script>

Additional Styling Tips

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.