Breadcrumbs

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.

image2022-3-4_10-57-12.png

Prerequisites

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

Setup the Announcement Banner

  1. Navigate to the

    announcement banner administration

    in Jira.

    1. Choose Administration > System

    2. Select User Interface > Announcement banner in the System panel below.

  2. 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

  3. Save your banner.


<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.