Design

Messages are used to provide clarity on the status of the product or an action. They may be informational; indicate success or failure for an interaction; or alert the user to a system failure.

Messages have two behaviours:

  • timed, where the message disappears without user interaction
  • persistent, where the message does not disappear unless the user chooses to dismiss it
Example Name Comments
Information
Information Mostly used for persistent messages that aren’t specifically success or error messages. Note that empty result sets from search and filter actions are displayed in default messages, not errors (a search which accurately returns zero results is not an error, just a result).
Success
Success Mostly used for timed messages that display when an action is successful.
Error
Error Mostly used for timed messages that display when an action is unsuccessful.
Critical
Critical Used for persistent messages that indicate a major failure.
InformationClose
Close Used for closing persistent messages.
Undo error messageUndo
Action Used for adding a contextual actions to persistent messages.
Praesent ac vulputate quam, in convallis augue. Praesent suscipit convallis congue. Phasellus vehicula cursus augue. Praesent ac vulputate quam, in convallis augue. Praesent suscipit convallis congue. Phasellus vehicula cursus augue.
Multi-line Messages work when there is more text to display. Messages should still be crafted as concisely as possible without losing clarity.
No results found
Large messages Large, default messages can be used to indicate states which are not errors but have no information to display, such as a succesful search which returned zero results.
No documents
Large message with buttons. Large messages are often used to indicate an initial or 'empty' state, which the user may be keen to change. For example if there are no documents, a button should be provided to upload their first document.
Page context messages Page context messages can be used to indicate that a message is contextual to the whole page. There must only ever be ONE page context message active at a time. It is up to the application to enforce this.

Code

Messages are primarily used in general body content. Critical Error should be used sparingly.

Example Element Code
Default message
Default message. 

                                                                                          <div class="ace-message"><span class="ace-message-content">Default message</span>
                                                                                          </div>

                                                                                      <% ace.message(Array("text", "Default message")) %>
Success message
Success message. 

                                                                                          <div class="ace-message ace-message-success"><span class="ace-message-content">Success message</span>
                                                                                          </div>

                                                                                      <% ace.message(Array(_
                                                                                        "text", "Success message",_
                                                                                        "type", "success"_
                                                                                      )) %>
Error message
Error message. 

                                                                                          <div class="ace-message ace-message-error"><span class="ace-message-content">Error message</span>
                                                                                          </div>

                                                                                      <% ace.message(Array(_
                                                                                        "text", "Error message",_
                                                                                        "type", "error"_
                                                                                      )) %>
Critical error message
Critical error message. 

                                                                                          <div class="ace-message ace-message-criticalerror"><span class="ace-message-content">Critical error message</span>
                                                                                          </div>

                                                                                      <% ace.message(Array(_
                                                                                        "text", "Critical error message",_
                                                                                        "type", "criticalerror"_
                                                                                      )) %>
Closable messageClose
Closable message. 

                                                                                          <div class="ace-message ace-message-default" data-ace-closeable="true"><span class="ace-message-content">Closable message</span><span class="ace-icon ace-icon-control-close ace-messages-custom-icon" title="Close">Close</span>
                                                                                          </div>

                                                                                      <% ace.message(Array(_
                                                                                        "text", "Closable message",_
                                                                                        "closable", True _
                                                                                      )) %>
Closable message custom icon textdismiss message
Closable message custom close icon text. 

                                                                                          <div class="ace-message ace-message-default" data-ace-closeabletext="dismiss message" data-ace-closeable="true"><span class="ace-message-content">Closable message custom icon text</span><span class="ace-icon ace-icon-control-close ace-messages-custom-icon" title="dismiss message">dismiss message</span>
                                                                                          </div>

                                                                                      <% ace.message(Array(_
                                                                                        "text", "Closable message",_
                                                                                        "closable", True,_
                                                                                        "closeableText", "Dismiss message"_
                                                                                      )) %>
No results found
Large message. 

                                                                                          <div class="ace-message ace-message-default ace-message-large"><span class="ace-message-content">No results found.</span>
                                                                                          </div>

Note: track ACE-1049 for support in ASP templates.


                                                                                      <% ace.message(Array(_
                                                                                        "text", "No results found",_
                                                                                        "size", "large"_
                                                                                      )) %>
No documents
Large message with buttons. 

                                                                                          <div class="ace-message ace-message-default ace-message-large"><span class="ace-message-content">No documents </span>
                                                                                                <div class="ace-button-group ace-button-group-separate">
                                                                                                      <button class="ace-button ace-button-default" type="button"><span>Upload documents</span></button>
                                                                                                </div>
                                                                                          </div>

                                                                                      <% ace.message(Array(_
                                                                                        "text", "No results found",_
                                                                                        "size", "large",_
                                                                                        "buttons", (Array(_
                                                                                          (Array("id", "01", "text", "new subject", "type", "subtle", "onClick", "#")),_
                                                                                          (Array("id", "01", "text", "close", "type", "link", "href", "#"))_
                                                                                        ))_
                                                                                      )) %>
Page context message

Note: the page context message must be rendered in the #hidden section


                                                                                      <script type="text/javascript">
                                                                                        $('#id-of-button').on('click', function(){
                                                                                            ACE.Messages.show('#id-of-message');
                                                                                        });
                                                                                      
                                                                                        // Optional: you can listen for messageRemoved to run code in concert with the page context message
                                                                                        $('#id-of-message').on('messageRemoved', function(e){
                                                                                            e.preventDefault(); // This will stop the message from being removed when the close button is clicked
                                                                                        });
                                                                                      </script>

                                                                                          <div class="ace-message ace-message-pagecontext" id="id-of-message"><span class="ace-message-content">This message is from the example below</span>
                                                                                          </div>

Note: the page context message must be rendered in the #hidden section

Note: track ACE-1207 for support in ASP templates.


                                                                                      <script type="text/javascript">
                                                                                        $('#id-of-button').on('click', function(){
                                                                                            ACE.Messages.show('#id-of-message');
                                                                                        });
                                                                                      
                                                                                        // Optional: you can listen for messageRemoved to run code in concert with the page context message
                                                                                        $('#id-of-message').on('messageRemoved', function(e){
                                                                                            e.preventDefault(); // This will stop the message from being removed when the close button is clicked
                                                                                        });
                                                                                      </script>

                                                                                      <% ace.message(Array(_
                                                                                        "id", "id-of-message",_
                                                                                        "text", "This message is from the example below",_
                                                                                        "context", "page"_
                                                                                      )) %>
Page context message that auto closes

Note: the page context message must be rendered in the #hidden section


                                                                                      <script type="text/javascript">
                                                                                        $('#id-of-button').on('click', function(){
                                                                                            ACE.Messages.show('#id-of-message');
                                                                                            setTimeout(function(){
                                                                                              ACE.Messages.hide('#id-of-message');
                                                                                            }, 5000);
                                                                                        });
                                                                                      
                                                                                        // Optional: you can listen for messageRemoved to run code in concert with the page context message
                                                                                        $('#id-of-message').on('messageRemoved', function(e){
                                                                                            e.preventDefault(); // This will stop the message from being removed when the close button is clicked
                                                                                        });
                                                                                      </script>

                                                                                          <div class="ace-message ace-message-pagecontext" id="id-of-message"><span class="ace-message-content">This message is from the example below</span>
                                                                                          </div>

Note: the page context message must be rendered in the #hidden section

Note: track ACE-1207 for support in ASP templates.


                                                                                      <script type="text/javascript">
                                                                                        $('#id-of-button').on('click', function(){
                                                                                            ACE.Messages.show('#id-of-message');
                                                                                            setTimeout(function(){
                                                                                              ACE.Messages.hide('#id-of-message');
                                                                                            }, 5000);
                                                                                        });
                                                                                      
                                                                                        // Optional: you can listen for messageRemoved to run code in concert with the page context message
                                                                                        $('#id-of-message').on('messageRemoved', function(e){
                                                                                            e.preventDefault(); // This will stop the message from being removed when the close button is clicked
                                                                                        });
                                                                                      </script>

                                                                                      <% ace.message(Array(_
                                                                                        "id", "id-of-message",_
                                                                                        "text", "This message is from the example below",_
                                                                                        "context", "page"_
                                                                                      )) %>

Message Attributes

Element Attributes Description
.ace-message .ace-message-default, .ace-message-success, .ace-message-error, .ace-message-criticalerror Sets type of message.
.ace-message data-ace-closeable="true" Makes the message closable. Requires the closing span element (see example above).
.ace-message data-ace-closeabletext="text" Adds alternative text for closeable icon control.
Name Description
id Sets ID
customclass Adds a custom class
type Sets type. options:["default", "success", "error", "criticalerror"]
closeable Makes message closeable. options:[True, Empty]
context Sets the context for this message. options:["default", "page"]

Javascript

Events

Event Description Example Usage
messageRemoved Message element been removed from DOM. Call preventDefault on this event to prevent the element from being removed 

                                                                    $('.ace-message').addEventListener('messageRemoved', function(e) {
                                                                      e.preventDefault(); // The message will not be removed from the DOM
                                                                    });

Optional Methods

Function Arguments Description Example Usage
init elementSelector Bind all the events to message. 
ACE.Messages.init('.ace-message');
destroy elementSelector Removes the event bindings from messages. 
ACE.Messages.destroy('.ace-message');
show elementSelector Shows a message. 
ACE.Messages.show('.ace-message');
hide elementSelector Hides a message. 
ACE.Messages.hide('.ace-message');