APEX & custom warning messages

D

Did you ever wanted to customize user messages? To make them intuitive? Green as success, red as error, yellow as warning? Oh yes, lets add a third message type. Not everything can fit into success or error.

To achieve this, I am passing a JSON object as a message and catching this message on page before showing it to users. This allows me to pass the message type or even a unique color, icon and other things (like a DA name to fire after the message). You can modify it however you need.

To simplify this and make it more readable, I have created 3 JavaScript functions:

• show_success
• show_warning
• show_error

const show_success = function(msg) {
    apex.message.showPageSuccess(JSON.stringify(get_message(msg, 'SUCCESS')));
};
//
const show_warning = function(msg) {
    apex.message.clearErrors();
    apex.message.showErrors([{
        type:       apex.message.TYPE.ERROR,    // sadly no warning supported
        location:   ['page'],
        message:    JSON.stringify(get_message(msg, 'WARNING')),
        unsafe:     false
    }]);
};
//
const show_error = function(msg) {
    apex.message.clearErrors();
    apex.message.showErrors([{
        type:       apex.message.TYPE.ERROR,
        location:   ['page'],
        message:    JSON.stringify(get_message(msg, 'ERROR')),
        unsafe:     false
    }]);
};
//
const show_message = function(msg) {
    if (!!msg.message) {
        if (msg.status == 'SUCCESS') {
            show_success(msg);
        }
        else if (msg.status == 'WARNING') {
            show_warning(msg);
        }
        else {
            show_error(msg);
        }
    }
};

Then I have a get_message functions which parse the JSON object.

const get_message = function(payload, status, action) {
    var msg = {
        'message'   : payload,
        'status'    : status,
        'action'    : action
    };
    if (typeof payload == 'object') {
        msg.message = (!!payload.message ? payload.message : msg.message);
        msg.status  = (!!payload.status  ? payload.status  : msg.status);
        msg.action  = (!!payload.action  ? payload.action  : msg.action);
    }
    else if (typeof payload == 'string' && payload.substring(0, 1) === '{' && payload.trim().slice(-1) === '}') {
        try {
            const obj = JSON.parse(payload);
            //
            msg.message = (!!obj.message ? obj.message : msg.message);
            msg.status  = (!!obj.status  ? obj.status  : msg.status);
            msg.action  = (!!obj.action  ? obj.action  : msg.action);
        }
        catch(err) {
            console.error('JSON_PARSE_FAILED', payload, err);
        }
    }
    return msg;
};

And finally the hooks to catch message before showing it to users. Note also the auto hide for success messages.

function() {
    const autohide_after = 2300;

    // autohide success messages
    // this actually dont work together with the following setThemeHooks
    apex.theme42.util.configAPEXMsgs({
        autoDismiss : true,
        duration    : autohide_after
    });

    // catch message event
    apex.message.setThemeHooks({
        beforeShow: function(pMsgType, pElement$) {
            // error messages
            if (pMsgType === apex.message.TYPE.ERROR) {
                var msg = get_message(pElement$.find('ul.a-Notification-list li').html());
                console.log('MESSAGE.ERROR:', msg);

                // switch error to warning
                if (msg.status == 'WARNING') {
                    pElement$.find('.t-Alert--warning').addClass('t-Alert--yellow');
                }

                // change message
                pElement$.find('.a-Notification-item').first().html(msg.message);
            }

            // success messages
            if (pMsgType === apex.message.TYPE.SUCCESS) {
                var msg = get_message($('#APEX_SUCCESS_MESSAGE h2.t-Alert-title').html());
                console.log('MESSAGE.SUCCESS:', msg);

                // change message
                $('#APEX_SUCCESS_MESSAGE h2.t-Alert-title').text(msg.message);

                // auto hide success message
                // this message can be from AJAX call (AJAX_PING process) and then it wont be autoclosed
                clearTimeout(last_scheduler);
                last_scheduler = setTimeout(() => {
                    apex.message.hidePageSuccess();
                }, autohide_after);
            }

            // execute action if requested
            if (!!msg.action) {
                console.log('TRIGGER_ACTION', msg.action);
                $.event.trigger(msg.action);
            }
        },
        beforeHide: function(pMsgType, pElement$) {
        }
    });
};

Enjoy. Source with other things...