Roadmap Framework v1.3 Messages

Messages

To visually emphasize different types of messages to the user, the messages styles will provide:

• info - Provide additional information to the user
• alert - Alert user of certain information such as "Remember to perform Journal Voucher before deadline"
• confirm - Confirm a message to user such as "Your class has been added"
• error - Bring attention to the user of an error such as "Unable to process your request"

The four corresponding styles are:

• .message .info
• .message .alert
• .message .confirm
• .message .error

There are four ways to display a message:

• inline - inline message where only the text color is changed
• page - message box appears at the top of the page, outside content areas such as content or form
• content - message box appears inside content areas such as content or form
• modal - message box appears as a modal dialog box when triggered

Inline Message

Simple inline messages can be achieved using the message style class:

<p>This is a demo on inline <span class="message info">information message</span></p>

Page Message

Top of the page message uses a div container to decorate a full width box and contains icons to accommodate color-blind users. Since it is outside a container, message padded class name can be added to provide padding. The HTML markup is as follows:

<div class="message padded info">This is an info message</div>

Content Message

Message that appears inside a content block such as content or form can be coded as:

<div class="content padded">
    <h1>Title here</h1>
    <div>
        <div class="message info">This is an info message</div>
    </div>
</div>

Since the content div is already added, there is not need to add the padded css class.

Modal Message

Modal message requires JavaScript support and is only supported for the full classification devices. When triggered, the JavaScript inserts the message right at the top of the body. It should include an overlay in the message box itself where the z-index is set to 1001 for the overlay and 1002 for the message box. To display a modal message dialog box from an existing HTML message markup:

    <div id="alert-msg" class="message padded alert">Are you sure you want to delete?</div>

<script type="text/javascript">
    if (mwf.classification.isFull()) {
        mwf.messages.modal({
            id: "[element id]"            // required.  in this case, it's 'alert-msg'
        });
    }
</script>

To display a modal message dialog box from dynamic HTML message markup:

<script type="text/javascript">
    if (mwf.classification.isFull()) {
        mwf.messages.modal({
            text: "[message content]",    // required if id is not specified.
            type: "[message type]",       // required if id is not specified.  can be [alert|confirm|error|info].
            padded: [true|false]          // optional.  defaults to true.
        });
    }
</script>

To include a callback function when the user closes the dialog box, pass in the callback function for the callback option:

<script type="text/javascript">
    if (mwf.classification.isFull()) {    
        callback_function = function() {
            ...
        }    
    
        mwf.messages.modal({
            text: "Check-in Date is required",
            type: "error",
            callback: callback_function
        });
    }
</script>