Sexy Messaging in DotNetNuke 6.0

You may or may not know, but I just submitted the Media Module v04.01.00 to the release tracker.  This version has it’s entire user interface (UI) updated to match the DotNetNuke v6.0 standards and form patterns, among other updates.  It was definitely a learning experience, but a very fun one!  One of the cool things I got to learn…  Reusing the built-in message types!

All too often, we as developers need to tell the “end-user” something helpful.  This can be a warning, and error message, or just an informational dialog.  Even within the core modules – or community modules that ship with DotNetNuke – we’ve all been doing this our own way.  Sometimes, this way has been pretty, and other times, not so much.  And some of these ways have been easily changed by designers, and others, again, not so much.  This has changed in an awesome way with the upcoming DNN 6.0 release!

There are a few types of common messages that you’d want to use when trying to convey information to users of your website.  Each of them have been carefully branded to have a consistent branding, to allow visitors of your site to always know what they are for, at a glance.

Informational

Informational messages usually are helpful message to guide the end-user into making a decision, or keep them informed of what a feature is.  There are other reasons, but you get the idea.  Here is what that looks like in DNN 6.0.

As you can see from the carefully chosen text, the mark-up to create this look is incredibly easy!  Just include some (localized?) text in your HTML output that looks like the following.

<div class="dnnFormMessage dnnFormInfo">
     Your Message
</div>

Success

The success message is not all that different from the informational message.  It’s branding is just a bit varied to convey a different “message.”

Note that there is a different color scheme and icon.  These are intentional changes to allow you to easily convey to your visitors something good that happened.  The mark-up is equally as easy as the informational message too.

<div class="dnnFormMessage dnnFormSuccess">
     Your Message
</div>

Warning

A warning message is great to let visitors know that something bad might happen.  For example, “Are you sure you want to do this?”

Like our previous examples, this one has it's own branding, for the same reasons.  We want to have a specific message using this technique, with having the least amount of effort by the visitor.

The code?  You guessed it…

<div class="dnnFormMessage dnnFormWarning">
     Your Message
</div>

Error

The final message I am going to talk about right now is one used to display an error to the visitor.  I think that’s self-explanatory, so here’s what it looks like.

It’s mark-up has very little difference than the rest of the examples above.

<div class="dnnFormMessage dnnFormError">
     Your Message
</div>

In this case though, you might not always want to display this by itself.  In fact, I would say in most cases, this would be better attached to form fields, as part of your validation strategy that you already have in place.  For example…

This is soooooooo easy to implement in your existing code, if you’re using the built-in server validators.  Here is an example snippet from the media module.

<asp:RequiredFieldValidator 
    id="valAltText" resourcekey="valAltText.ErrorMessage" runat="server" 
    controltovalidate="txtAlt" display="Dynamic" 
    cssclass="dnnFormMessage dnnFormError" 
    errormessage="&lt;br />Alternate Text Is Required" />

Nothing should stand out to you in the snippet above, except the two CSS classes being added to the message.  All many of you would have to do is simply replace NormalRed with dnnFormMessage dnnFormError in your validation controls. 

By the way, I used the HTML module to create all of these screen shots (with the exception of the field error).  They can be used in widgets, content, skins, and modules.  Basically, anywhere that will be rendered to the visitor on the page.

You can get a heads up of this and many more of the cool DNN 6.0 features for developers and skin designers in the quick start guide.

Can it be any easier and cleaner?!  Hopefully, you can start to see why I am so excited about the DNN 6.0 release…

This blog entry is cross-posted from my personal blog.