Tech-Stuff‎ > ‎

jQuery: Creating Dashboard Widgets / Webparts Plugin

posted May 25, 2009, 11:34 PM by Kartik Sehgal   [ updated May 26, 2009, 1:14 AM ]
The focus of this article is to showcase how we can create a widget / web part plugin in jQuery and render content of other pages inside it.

Widget / Webpart

A widget or web part is essentially the same thing - a rectangular section on the screen which has a title and some content. The idea is that the content could come from a source different than the rest of the page and ideally, the widget will take a fraction of the space on the screen, because it will be part of a set of widgets which together make up a dashboard.

In this article, we will not be showing any database interactivity as the focus is just to show how to create a widget dynamically at run time.

See dashboard screenshot for sample implementation 

Sample Code

Widget HTML

<div id="[controlID]" style="width:100%; height: [Height + Title bar height]px; overflow: hidden; padding: 5px;" >
<table style="width: 100%; height: 100%; border: solid 1px #CCC; background-color: whitesmoke;">
    <th valign="top" style="text-align:left; height:40px width: 95%;">[title]</th>
    <td align="right">
    <img id="ImgVisible[controlID]" src="collapse.jpg" alt="" />
    <a href="[url]" target="_BLANK"><img src="PopOutIcon.png" alt="" border="0" /></a>
    <td colspan="2" style="width:100%">
    <table style="table-layout:fixed; width:100%; cellpadding = "0" cellspacing="0">
        <div id="[controlID]Content" style="width: 100%; height: [height]px; overflow: auto; border: solid 1px #000; background-color: White;">loading...</div>

The text highlighted in bold are the parameters (controlID, Height, Title bar height, title and url) which are dynamically set. Of course, there is an opportunity to make the look and feel also flexible, but it was not critical to the focus of this article.

Creating the UI Plugin

jQuery.fn.AddWidget = function(controlID, title, url, height)
    return this.each(

        var me   = jQuery(this);
        var totalHeight = 40 + height;
        var strHtmlMarkup = "<div id=\"" + controlID + "\" style=\"width:100%; height: " + totalHeight + "px; overflow: hidden; padding: 5px;\" ><table style=\"width: 100%; height: 100%; border: solid 1px #CCC; background-color: whitesmoke;\"><tr><th valign=\"top\" style=\"text-align:left; height:40px width: 95%;\">" + title + "</th><td align=\"right\"><img id=\"ImgVisible" + controlID + "\"  src=\"collapse.jpg\" alt=\"\" /> <a href=\"" + url + "\" target=\"_BLANK\"><img src=\"PopOutIcon.png\" alt=\"\" border=\"0\" /></a></td></tr><tr><td colspan=\"2\" style=\"width:100%\"><table style=\"table-layout:fixed; width:100%;\" cellpadding = \"0\" cellspacing=\"0\"><tr><td><div id=\"" + controlID + "Content\" style=\"width: 100%; height: " + height + "px; overflow: auto; border: solid 1px #000; background-color: White;\">loading...</div></td></tr></table></td></tr></table></div>";
        $.post(url, {}, function(response){ $("#" + controlID + "Content").html(response).show();});
        $("#ImgVisible" + controlID).click(function()
            if($("#ImgVisible" + controlID).attr("src") == "collapse.jpg")
                $("#ImgVisible" + controlID).attr("src", "expand.jpg");
                $("#" + controlID + "Content").hide();
                $("#" + controlID).attr("style", "width:100%; height: 40px; overflow: hidden; padding: 5px;");
                $("#ImgVisible" + controlID).attr("src", "collapse.jpg");
                $("#" + controlID + "Content").show();
                $("#" + controlID).attr("style", "width:100%; height: " + totalHeight + "px; overflow: hidden; padding: 5px;");
        } );

jQuery.fn.AddWidget = function(controlID, title, url, height

    return this.each

            var me   = jQuery(this);

This is the basic template to create a plug-in. AddWidget is the name of our plug-in. return this.each ensures that if the jQuery object is a collection, then the same activity is repeated across each element in the collection. It has been recommended as the approach to create plug-ins. Here we have 4 parameters being accepted.

There are other recommendations for creating plug-ins, including the theming part, but it would have been far too much to cover in just one article. 

me is the jQuery object which has called this function. In this case, we have created a div called Zone1 and executed AddWidget on that

$("#Zone1").AddWidget("zone1widget2", "Pending Actions", "TechnicalPosts.aspx", 300);

The first step is to append the HTML content in strHTMLMarkup in to Zone1. me.append(<content>) ensures that the existing content is not over-written.

$.post is used to execute the requested url and the place the contents inside a div (instead of  using iframes). 

To learn more about $.post, please feel free to reference the article How to submit a form using JQuery via AJAX to an ASP.NET and receive the response.

Being asynchronous, the widgets will start displaying as the load, but in the sequence they are called in.

Besides this, there is an expand / collapse icon as well as icon which, when clicked, opens the same URL in a new window.

Browser Compatibility

This plug-in is compatible with all browsers including IE (6,7 and 8), Firefox3, Chrome2 and Safari4


If the content return by the URL has some issues, it can cause disruption of activities on the main page itself also.

Inquiries / Suggestions

Kartik Sehgal,
May 26, 2009, 1:03 AM