CRM Form message / response / error / warning area

I had a requirement to show a warning message to users but didn’t want to use a basic Alert popup. I decided to write a function which inserts a div into the form with various pre-defined options for severity of the message. It uses existing CRM images so no need to create any Web Resources.

Here’s how it looks in the context of a page:

Previews of the colour schemes:

“ok” or “success”


“info” or “information”


“warn” or “warning”


default

Here’s the code:

function ShowWarning(message, mode) {

var boxId = "warning";    // DOM ID of new DIV

if (document.getElementById(boxId)) {
document.getElementById("crmFormTabContainer").removeChild(document.getElementById(boxId));
}

if (!message || message=="") {return;}

var warning = document.createElement("DIV");
warning.style.padding = "10px 10px 10px 50px";
warning.style.border = "1px solid";
warning.style.height = "50px";
warning.style.display = "table-cell";
warning.style.verticalAlign = "middle";
warning.style.margin = "15px 15px 5px 15px";

var colour = "";

switch (mode) {

case "information":
case "info":
warning.style.background = "#BDE5F8 url('/_imgs/error/notif_icn_info.png') 10px 55% no-repeat";
warning.style.borderColor = "#00529B";
colour = "#00529B";
break;

case "success":
case "ok":
warning.style.background = "#DFF2BF url('/_imgs/importwizard_greentick.gif') 20px 55% no-repeat";
warning.style.borderColor = "#4F8A10";
colour = "#4F8A10";
break;

case "warning":
case "warn":
warning.style.background = "#FEEFB3 url('/_imgs/error/notif_icn_warn.png') 10px 55% no-repeat";
warning.style.borderColor = "#9F6000";
colour = "#9F6000";
break;

default:
warning.style.background = "#FFBABA url('/_imgs/error/notif_icn_critical.png') 10px 55% no-repeat";
warning.style.borderColor = "#D8000C";
colour = "#D8000C";
break;

}

warning.innerHTML = "<table cellpadding=0 cellspacing=0 border=0 width=100% height=100%><tr><td valign=middle style=\"font-size: 13px; color: " + colour + ";\">" + message + "</td></tr></table>";

document.getElementById("crmFormTabContainer").insertBefore(warning, document.getElementById("crmFormTabContainer").firstChild);

}

Ended up using a table to ensure the vertical alignment. Any CSS trick I tried didn’t want to play in IE.

To call the function, use something like this:

ShowWarning("You clicked the wrong button!!!", "warn");

Message – The message you want to display
Mode – The severity (“ok”, “warn”, “info”) you want to use (optional). Any non-recognised mode will be treated as an error (red).

Advertisements
Leave a comment

3 Comments

  1. Hello Pete,
    your message bar is very cool, but with the above code, it is a little form spammer because it does not remove his own predecessor.
    In line 5, you check if the element with the ID of the variable BoxID exists, but previously by the script generated DIV containers do not have an ID.
    My suggestion is:
    Insert in line in 18: warning.id = BoxID;
    Regards
    Ben

    Reply
  2. Gary

     /  June 18, 2013

    Hi,
    Good post. I have question, if i want to show 2 or more notifications, and i want show it from left to right rather than its default top to bottom.
    Any idea.

    thanks
    Gary

    Reply
  1. CRM 2011 Message Box / Notification Bar | Vogelgesang Consulting

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: