Learn More





DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.

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

This post is cross-posted from my personal blog site.


Comment Form

Only registered users may post comments.


2sic Daniel Mettler (125)
Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (22)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (203)
Chris Paterra (55)
Clinton Patterson (28)
Cuong Dang (21)
Daniel Bartholomew (2)
Dave Buckner (2)
David Poindexter (3)
David Rodriguez (2)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (6)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (270)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (52)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (37)
Will Strohl (163)
William Severance (5)
Try Evoq
For Free
Start Free Trial
a Demo
See Evoq Live
Need More Information?