Will "the Mighty" Strohl

How to Create a DotNetNuke Widget

What’s this?  You haven’t heard of widgets in DotNetNuke?  Just in case that really is true, I will give you a bit more background information about what a widget is in DNN.  Simply put, widgets are client-side applications that run in the web browser using any form of JavaScript that you’d like.  Primarily, you see them written in jQuery these days – but the beauty of this framework is that you can pull in ANY JavaScript library that you want!

Widgets are also called Skin Widgets.  This is because they are usually used within skins in DotNetNuke, but you can also add them to module headers and footers, the HTML module, and more.  You can’t use them just anywhere though.  For example, your forum posts are safe from guest widgets.  Winking smile

When we think of what a widget can do, you are only limited by two things:

  1. Working with client-side (web browser) constraints
  2. Your creativity

I’ve seen all kinds of widgets in DNN.  Some pull in twitter feeds, create new print views, import other JavaScript libraries (i.e., Modernizr), break your site out of frames, switch all of the icons on your DNN site, and more.

As you can see from the links above, there are a growing number of DNN widgets available to you these days.  And with projects such as the Widget Suite for DNN, you’re having less and less of a need to create your own widgets.  However, if you need or want to, here is how…

How to Create Your Own DotNetNuke Widget

This is a topic that I’ve spoken about at many code camps and user group meetings.  However, I didn’t until somewhat recently see a whole lot of information on this topic online.  I had always intended to write at least one tutorial on my blog, but I was waiting for the widget framework author to do it (Nik Kalyani).  For a while, I didn’t see anything – but it seems that over a few days (a while back), he slipped in some excellent tutorial blog posts without me noticing:

  1. DotNetNuke Widgets Guide (1 of 4)
  2. DotNetNuke Widgets Guide (2 of 4)
  3. DotNetNuke Widgets Guide (3 of 4)
  4. DotNetNuke Widgets Guide (4 of 4)

There is one final piece to the puzzle though, and that is how you package your widget.  Essentially, since the widget framework is completely client-side, there really isn’t any true requirement to package your widgets since FTPing them to your site will make them immediately active.  However, if you want to hand these off to other sites and and keep track of versions and take advantage of the other DNN benefits, then packaging is highly necessary – just as it is with modules and other extensions.

Packaging Your DotNetNuke Widget

This is indeed something I blogged about in the past.  When the widget framework was first announced and released, I was so excited, I literally just jumped right in and began digging through the widget code. 

DISCLAIMER:  As the other members of the Widget Suite project can probably attest to, I am nothing close to being a JavaScript expert, but I was able to read through, understand, use, and teach others about the widget framework with a minimum of effort.

Something that I didn’t see in any of the examples in the widget framework was a packaging manifest.  This was especially troublesome since at the time, the manifest format had been changed quite a bit.  So, after a while of digging through the source code of DNN, I was able to determine what a few of the key values were that were required to properly write a DotNetNuke widget manifest file.  You can read all about that in a previous post, where I outline how to package your DotNetNuke widget.

You can of course also see a live working example of a widget manifest and package by downloading the latest version of the Widget Suite.

That’s about it.  Being one of the many people who are “afraid” of JavaScript and avoid writing it whenever possible, you’d never realize that if you knew that I founded the Widget Suite and use jQuery quite extensively – especially in place of the standard .Net user/web controls whenever possible.

You can too – it’s easy!!! Smile

blog comments powered by Disqus