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

There are several message types with different colours and icons.

Code

There are a few 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>

JavaScript

Messages can be added through AUI's JavaScript API in two main ways. The most common is to inject the element inside a "context" element:

AJS.messages.info("#a-custom-context", {

    title: 'This is a title in a default message.',

    body: '<p> And this is just content in a Default message.</p>'

});

If the context selector is omitted, the message is added to a static location: an element with id="aui-message-bar".

AJS.messages.info({

   title: 'This is a title in a default message.',

   body: '<p> And this is just content in a Default message.</p>'

});

Note that if you do not set the context, and the aui-message-bar element does not exist, the message will not appear as it has no target location.

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}

Types of messages

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-

Message actions

If the message is more than just informational or there are obvious follow-up things a user could do, add a list of actions to the message body to allow the user to easily take their next step.
Actions should have the appearance of a link, but should use the appropriate HTML element for the action — for example, use a <button> when the action is handled by JavaScript or does something on the current page; use an <a> when the action can take the user to another location in the system.

<div class="aui-message aui-message-warning">

    <p>It's dark in here... just the way Grues like it.</p>

    <ul class="aui-nav-actions-list">

        <li><button class="aui-button aui-button-link">Turn on the light</button></li>

        <li><button class="aui-button aui-button-link">Take your chances</button></li>

    </ul>

</div>

Closeable

If you want to allow the user to dismiss the message

Options

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

$(document).on('aui-message-close', function (e) {

    AJS.log('Message id: ' + e.target.attr('id'));

});