Documentation

Messages

Summary

Messages are the primary method for providing system feedback in the product user interface. Messages include notifications of various kinds: alerts, confirmations, notices, warnings, info and errors.

Status

Examples

Code

There are several message types with different colours and icons. There are two ways to implement messages: using HTML (or Soy to generate the HTML) or using Javascript.

HTML

<div class="aui-message aui-message-error">
    <p class="title">
        <strong>Error!</strong>
    </p>
    <p>And this is just content in a Default message.</p>
</div>

HTML - deprecated markup

<div class="aui-message error">
    <p class="title">
        <span class="aui-icon icon-error"></span>
        <strong>Error!</strong>
    </p>
    <p>And this is just content in a Default message.</p>
</div>

Javascript

Note you should use the JS API if adding Messages with JavaScript, not the compiled-Javascript-Soy API. Although the two seems similar, the JS API is the supported option.

Default context:

AJS.messages.generic({
   title:"This is a title in a Default message.",
   body: "<p> And this is just content in a Default message.</p>"
});

Note if you do not set the context, the element:

<div id="aui-message-bar"></div>

...must exist in your document, otherwise the message will not appear as it has no target location.

It is more common to set the context:

AJS.messages.generic("#context", {
   title:"This is a title in a Default message.",
   body: "<p> And this is just content in a Default message.</p>"
});

Soy

{call aui.message.warning}
    {param title: 'An error occurred - user intervention required!' /}
    {param closeable: 'true' /}
    {param id: 'messageIDattribute' /}
    {param content}
        <p>Some details about the error so the user knows what to do.</p>
    {/param}
{/call}

Options

When adding an HTML message, you must ensure root element (.aui-message) has the desired message class. Calling from Soy or JavaScript wraps this into one call, for convenience.

Note: icon class have been deprecated. The old message classes are also deprecated, now namespaced with aui-message-

HTML options

These options are set by adding classes to the root aui-message div.

<div class="aui-message closeable">...</div>

<div class="aui-message fadeout">...</div>

Soy options

These options are set by adding params to the Soy call.

JavaScript options

These options are set in the options object when creating a Message with JavaScript:

AJS.messages events

AJS.$(document).on("aui-message-close", function (e,a) {
    AJS.log("message id: " + a.attr("id"));
});