JIRA Notification Banner

With Custom JS for JIRA, you can also add notification messages to inform your users of important events etc. These notifications have a title and content, the content can contain HTML-markup.

You can choose the style of the message

Info: blue background
Error: red background
Warning: yellow background
Success: green background

You can also choose to insert the message above or below the JIRA bar.

Information Message

Above the JIRA bar

var title = "This is a title in a info message";
var body = "<p>And this is just content in a info message</p>";

//Don't change the code below this line
AJS.$(document).ready(function () {
  AJS.$('#jira').prepend('<div id="aui-message-bar"></div>');
  AJS.messages.info({
    title: title,
    body: body
  });
});

Below the JIRA bar

var title = "This is a title in a info message";
var body = "<p>And this is just content in a info message</p>";

//Don't change the code below this line
AJS.$(document).ready(function () {
  AJS.$('#content').prepend('<div id="aui-message-bar"></div>');
  AJS.messages.info({
    title: title,
    body: body
  });
});

Error message

Above the JIRA bar

var title = "This is a title in a error message";
var body = "<p>And this is just content in a error message</p>";

//Don't change the code below this line
AJS.$(document).ready(function () {
  AJS.$('#jira').prepend('<div id="aui-message-bar"></div>');
  AJS.messages.error({
    title: title,
    body: body
  });
});

Below the JIRA bar

var title = "This is a title in a error message";
var body = "<p>And this is just content in a error message</p>";

//Don't change the code below this line
AJS.$(document).ready(function () {
  AJS.$('#content').prepend('<div id="aui-message-bar"></div>');
  AJS.messages.error({
    title: title,
    body: body
  });
});

Warning Message

Above the JIRA bar

var title = "This is a title in a warning message";
var body = "<p>And this is just content in a warning message</p>";

//Don't change the code below this line
AJS.$(document).ready(function () {
  AJS.$('#jira').prepend('<div id="aui-message-bar"></div>');
  AJS.messages.warning({
    title: title,
    body: body
  });
});

Below the JIRA bar

var title = "This is a title in a warning message";
var body = "<p>And this is just content in a warning message</p>";

//Don't change the code below this line
AJS.$(document).ready(function () {
  AJS.$('#content').prepend('<div id="aui-message-bar"></div>');
  AJS.messages.warning({
    title: title,
    body: body
  });
});

Success Message

Above the JIRA bar

var title = "This is a title in a success message";
var body = "<p>And this is just content in a success message</p>";

//Don't change the code below this line
AJS.$(document).ready(function () {
  AJS.$('#jira').prepend('<div id="aui-message-bar"></div>');
  AJS.messages.success({
    title: title,
    body: body
  });
});

Below the JIRA bar

var title = "This is a title in a success message";
var body = "<p>And this is just content in a success message</p>";

//Don't change the code below this line
AJS.$(document).ready(function () {
  AJS.$('#content').prepend('<div id="aui-message-bar"></div>');
  AJS.messages.success({
    title: title,
    body: body
  });
});

Fadeout

You can choose to let the message dissapear automatically, by adding the fadeout parameter.

var title = "This is a title in a success message";
var body = "<p>And this is just content in a success message</p>";

//Don't change the code below this line
AJS.$(document).ready(function () {
  AJS.$('#content').prepend('<div id="aui-message-bar"></div>');
  AJS.messages.success({
    title: title,
    body: body,
    fadeout: true
  });
});