Using the jQuery UI Dialog widget for confirmation windows

In our web applications, we often have the need to confirm with the user whether or not they want to proceed with an action they attempted to take. For instance, we might have a delete button on our form that responds to a user click by deleting a record in the database. Before we actually do the delete, we want to double-check with the user first. JavaScript has a confirm(msg) function that will display a standard dialog window that you can use to determine whether or not to continue with an action. The standard dialog window looks like the following (in IE): 

The standard confirm window is not very flexible. First, you only get two buttons (and no more), Ok and Cancel, and you can't change the text of either button. Second, you can't change the title on the title bar. You also can't change the question mark icon inside of the dialog. If you need something more flexible, you're going to have to create your own modal overlay window and recreate the functionality that confirm() gives you. Fortunately, jQuery UI has a dialog widget that will get you most of the way there:

 

As you can see, this dialog window definitely doesn't look like the standard confirm. First, I have more than two buttons and with different text. I also have a different title. It can be resized and repositioned. Also, although you can't see it, this dialog window can have the same visual effects (like applying semi-transparent overlays on everything underneath the window) applied to it that can be applied to other html elements by using jQuery. This would not be possible with the standard confirm. I won't bore you with the details of how to set this up. The documentation on the jQuery site sufficiently explains that. What I want to concentrate on is showing you how to make the jQuery dialog widget behave exactly like the standard JavaScript confirm.

When using the standard confirm, all processing stops until the user clicks on either Ok or Cancel in the window. That means that if the button was supposed to post back to the server, the postback won't occur until a selection is made. Usually, we only go ahead with the postback if the Ok button was clicked. This is typically handled by adding something similar to the OnClientClick event handler on our button:

<asp:Button ID="Button1" runat="server" Text="JavaScript" OnClick="Click" OnClientClick="return confirm('Dude, are you sure?');" />

If the user clicked the Ok button, true would be returned by the confirm(msg) function. If the user selected Cancel, false would be returned. Returning false in OnClientClick will effectively cancel the rest of the event processing (i.e., the event handler for the OnClick event won't be triggered).

Now, for the jQuery dialog, this is how I have the button:

<asp:Button ID="Button2" runat="server" Text="jQuery" OnClick="Click" OnClientClick="showjQueryDialog();return false;" />

I call a client-side function showjQueryDialog() which, amazingly enough, handles showing my jQuery dialog (pre-configured in the document ready event handler). After the call to showjQueryDialog(), I go ahead and just return false. The reason why I have to return false here is because, unlike the confirm() function, the browser doesn't stop processing the rest of the client-side script just because the dialog widget is opened. So we have to manually stop it. Now this raises an issue. So if we always return false, how will our event handler for the OnClick event ever be executed? In order for that event handler to execute, we will need to do the postback ourselves. There are a couple of ways to handle this but this is the approach I take:

1. Create a hidden field on the form (called hdnBtnPostback) who's value will be the exact postback function call I need to make in order to emulate the same postback that would occur had the button processing continued. This value can be set in the Page_Load() of the ASP.NET page. But how do we know what the exact postback function call should be? Fortunately for us, that is one of the methods available from the ClientScriptManager object. So the following code will do the trick:

 

this.hdnBtnPostback.Value = Page.ClientScript.GetPostBackEventReference(Button2, string.Empty);

 

This is will generate the exact same call to the __doPostBack() JavaScript function that is generated by the button. 

2. In the event handler for my dialog's Ok button click, all I have to do then is get the value of this hidden field and pass it to the JavaScript eval() function. This will effectively execute the postback and the event handler for the OnClick event will be processed: 

    1    function showjQueryDialog() {

    2 

    3       $("#dialog").dialog("open");

    4    }

    5 

    6    //document on ready.

    7    $(function(){

    8       $("#dialog").dialog({

    9          autoOpen: false,

   10          modal:true,

   11          buttons : {

   12             "Yes" : function() {              

   13                $(this).dialog("close");

   14                eval($("#<%= hdnBtnPostback.ClientID %>").val());

   15             },

   16             "No" : function() {

   17                $(this).dialog("close");

   18             },

   19             "Maybe": function() {

   20                $(this).dialog("close");

   21                //what should we do when "Maybe" is clicked?

   22             }        

   23          }

   24       });

   25    });

The event handler for the Yes button in the dialog are on lines 12-15. Line 14 is where we actually do the postback manually. 

As you can see, it is quite easy to replace the standard confirm dialog and make it function in the same way. All that is needed is a little elbow grease :).

Creating a SharePoint breadcrumb control with drop down menus

While there have plenty of things that people don't like about Windows Vista, one of the features I do like and I think is underappreciated is the new breadcrumb:

Unfortunately in SharePoint, the breadcrumbs don't work like this. There are no submenus. Lucky for us, it's pretty easy to create a breadcrumb that functions this way. Here's how:

Creating the web control

The first part we'll need is a web control that will render the markup. The web control I created is simple and straightforward. Only two public properties are available: SiteMapProvider (string) and NodeSeparator (string). The SiteMapProvider property is used to specify the named site map provider from the web.config file to use to build the breadcrumb. The NodeSeparator property is used to specify the character(s) to use to separate each item in the breadcrumb (like the sideway triangles in the screenshot above). By default, this is set to the '>' character. Also, this property will only be used if the breadcrumb item doesn't have any sub-items; if it does, then a clickable image like the one above will be displayed instead. Lastly, the breadcrumb's submenus will only go one level deep (like Vista's). So there won't be any "submenus of submenus".

The rendering logic takes place in the RenderContents(HtmlTextWriter) method. First, we get an instance of the SiteMapProvider object that has the same name as the one specified in the control's SiteMapProvider property. Then, using the provider, we traverse our way up the site map from the current page (specified by the SiteMapProvider.CurrentNode property) until we get to the top of the site map. While we traverse up, we will collect the nodes that we passed in a Stack<SiteMapNode> collection:

            SiteMapProvider provider = GetSiteMapProvider();

 

            Stack<SiteMapNode> nodes = new Stack<SiteMapNode>();

 

            SiteMapNode current = provider.CurrentNode;

            while (current != null)

            {

                nodes.Push(current);

                current = current.ParentNode;

            }

 

Once we've reached the top, we then pop the nodes out of the stack. Each node will be represented as a list item (li) in an unordered list (ul). If the node has any subitems, then we will render a clickable image and unordered list that is a child of the list item:

            while (nodes.Count > 0)

            {

                SiteMapNode node = nodes.Pop();

                sb.AppendFormat("<li class='dp-breadcrumbitem'><a href='{0}' title='{1}'>{1}</a>", node.Url, node.Title);

 

                //why not use SiteMapNode.HasChildNodes? see: http://social.msdn.microsoft.com/Forums/en-US/sharepointdevelopment/thread/37d10f92-140f-4ce8-b71c-388163721737/

                if (node.ChildNodes.Count > 0)

                {

                    sb.Append("<img src='/_layouts/images/marr.gif' class='dp-breadcrumbitemimage'/>");

 

                    sb.AppendFormat("<ul id='dp-submenu-{0}' class='ms-topNavFlyOuts dp-breadcrumbsubmenu'>", node.Key);

                    foreach (SiteMapNode subNode in node.ChildNodes)

                    {

                        sb.AppendFormat("<li class='dp-breadcrumbsubmenuitem'><a href='{0}' title='{1}' class='dp-submenulink'>{1}</a></li>", subNode.Url, subNode.Title);

                    }

                    sb.Append("</ul>");

                }

                else

                {

                    if (nodes.Count > 0) sb.AppendFormat("<span class='dp-breadcrumbseperator'>{0}</span>", nodeSeparator);

                }

                sb.Append("</li>");

            }

 

This is the typical html markup that is rendered by the breadcrumb control:

<ul class='dp-breadcrumb'>

    <li class='dp-breadcrumbitem'><a href='link' title-'Item 1'>Item 1</a> <img src='path_to_image' />

        <ul class='ms-topNavFlyOuts dp-breadcrumbsubmenu'>

            <li class='dp-breadcrumbsubmenuitem'><a href='link' title='Sub Item 1' class='dp-submenulink'>Sub Item 1</a></li>

            <li class='dp-breadcrumbsubmenuitem'><a href='link' title='Sub Item 2' class='dp-submenulink'>Sub Item 2</a></li>

        </ul>

    </li>

    <li class='dp-breadcrumbitem'><a href='link' title-'Item 2'>Item 2</a> <img src='path_to_image' />

        <ul class='ms-topNavFlyOuts dp-breadcrumbsubmenu'>

            <li class='dp-breadcrumbsubmenuitem'><a href='link' title='Sub Item 3' class='dp-submenulink'>Sub Item 3</a></li>

            <li class='dp-breadcrumbsubmenuitem'><a href='link' title='Sub Item 4' class='dp-submenulink'>Sub Item 4</a></li>

        </ul>

    </li>

</ul>

 

That is pretty much it for the web control. The next parts we need to build are the CSS and the JavaScript.

CSS and JavaScript

I won't bore you with the details of the CSS since it's available in the zip file below but the most important things with the CSS are: making sure the breadcrumb items are displayed inline and making sure the submenu uses absolute positioning and has a z-index that will place it on top of any other element that is going to be on the page.

Now for the UI magic to happen, we need a little client-side code. Here again, I use my new favorite client-side library, jQuery. The client script primarily consists of three event handlers: an event handler for the click event on the image, an event handler for a submenu item's hover event, and an event handler used to handle clicks anywhere else on the document.

The click event for the image is used to show/hide the corresponding submenu. It will also make sure that no other menu is visible besides the one that corresponds to the image that was clicked. Finally, it will toggle an appropriate image to use, depending on whether or not the submenu is visible or hidden:

    //add the event handler for the click on the image

    $("img.dp-breadcrumbitemimage").click(function(e){   

        e.stopPropagation();

 

        var theImage = $(this);

 

        var left = this.offsetLeft + 12;

        var top = this.offsetTop + 12;

 

        //get the submenu corresponding to the image.           

        var submenu = theImage.next("ul.dp-breadcrumbsubmenu");

 

        //iterate over all the submenus in this breadcrumb and hide any that isn't the target submenu.

        $("ul.dp-breadcrumbsubmenu").each(function(idx){           

            if (this.id != submenu.attr("id")){

                $(this).hide();

                $(this).prev("img.dp-breadcrumbitemimage").attr({src:"/_layouts/images/marr.gif"});

            }

        });

 

        //if the target submenu is visible, hide it. if it's invisible, show it.

        //also change the image that is being displayed.

        if(submenu.is(":visible"))

        {

            theImage.attr({src : "/_layouts/images/marr.gif"});

            submenu.slideUp();

        }

        else

        {

            theImage.attr({src : "/_layouts/images/menu2.gif"});

            submenu.css("position", "absolute").css("top", top).css("left", left).slideDown();

        }       

    });

The hover event handler for each submenu item will take care of making sure the item is highlighted properly. The highlighting we will use is the same highlighting used by the top navigation menu:

    //add a hover event for the items in the submenu so that they are highlighted.

    $("li.dp-breadcrumbsubmenuitem").hover(function(){

        $(this).addClass("ms-topNavFlyOutsHover");

    },

    function(){

        $(this).removeClass("ms-topNavFlyOutsHover");   

    });

Lastly, the click event handler for the document will make sure that if the user clicks outside of the breadcrumb, any visible submenu will be hidden:

    //add a click handler for the entire page so that when the user clicks outside of the breadcrumb, any visible menu will be hidden.

    $(this).click(function(){

        $("ul.dp-breadcrumbsubmenu").slideUp();

        $("img.dp-breadcrumbitemimage").attr({src:"/_layouts/images/marr.gif"});

    });

 

Putting it all together

So now that we've built the components, it's time to put it all together. First, add the breadcrumb.css file and breadcrumb.js file in a document library or folder in the SharePoint site collection. You also need to place the jQuery javascript library in a document library/folder (note: I used jQuery version 1.2.6 for this).

Second, you need to deploy the assembly 'DeviantPoint.SharePoint.Web.UI.dll' to the Global Assembly Cache (GAC) and then reset IIS.

Third, in order to be able to use the web control we developed, you need to add an entry into the SafeControls section of your web.config file:

      <SafeControlAssembly="DeviantPoint.SharePoint.Web.UI, Version=1.0.0.0, Culture=neutral, PublicKeyToken=d767c3b2d2145e42"Namespace="DeviantPoint.SharePoint.Web.UI.WebControls.Navigation"TypeName="*"Safe="True" />

Lastly, you need to modify your site collection's master file by first registering our custom assembly:

<%@ Register Tagprefix="DeviantPoint" Namespace="DeviantPoint.SharePoint.Web.UI.WebControls.Navigation" Assembly="DeviantPoint.SharePoint.Web.UI, Version=1.0.0.0, Culture=neutral, PublicKeyToken=d767c3b2d2145e42" %>

Then you need to add a reference to the css and javascript files we are using:

    <!-- reference to the breadcrumb css -->

    <link href="/Style Library/Breadcrumb.css" type="text/css" rel="stylesheet"/>

 

    <!-- add the reference to the two jquery libraries -->

    <script src="/scripts/jquery-1.2.6.min.js" type="text/javascript" language="javascript"></script>

    <script src="/scripts/Breadcrumb.js" type="text/javascript" language="javascript"></script>   

Note that in this case, I put 'Breadcrumb.css' in the default Style Library document library. I put the javascript files in a folder I created with SharePoint designer called scripts. Also, make sure to place these lines right before the closing 'head' tag in the master file.

Lastly, we need to place the breadcrumb control in an appropriate spot on the master page where we'd like the breadcrumb to appear:

              <asp:ContentPlaceHolder id="PlaceHolderGlobalNavigationSiteMap" runat="server">

                <!-- DEVIANTPOINT breadcrumb -->

                <DeviantPoint:Breadcrumb ID="bcGlobal" runat="server" SiteMapProvider="GlobalNavSiteMapProvider"></DeviantPoint:Breadcrumb>

              </asp:ContentPlaceHolder>

In this case, I actually replaced the default global breadcrumb that comes out of the box with my own breadcrumb. I also used the GlobalNavSiteMapProvider because that site map provider will have all of the nodes for the site collection.

Results

Here are some screenshots of the new breadcrumb in action:

 

 

See? Not too difficult!

Files

In the zip file below, you'll find the assembly that needs to be deployed to the GAC, Breadcrumb.cs, breadcrumb.css, breadcrumb.js, and deviantpoint.master. Deviantpoint.master is just the out of the box master with all the changes to the master file I specified above. You will need to download jQuery v. 1.2.6 yourself.

DeviantPoint_Breadcrumb.zip (11.12 kb)

Creating an accordion-style SharePoint Quick Launch menu with jQuery

About two months ago, a colleague of mine told me of a requirement he had to build an accordion-style menu for an intranet MOSS portal he was building. Not knowing where to start, he asked me what he could do. I advised him that he could either try to work with the <SharePoint:AspMenu> control used by the Quick Launch out of the box or he could use the Accordion control found in the AJAX.NET Control Toolkit and (combined with the SharePoint navigation providers), he could roll his own menu control. They never got around to actually doing this as more critical requirements came about and they eventually postponed this accordion-style menu to a later phase.

Last weekend, I finally decided to look into the examples and documentation around jQuery. I had heard of it before but never really had a chance to play around with it. But I decided that it would be a worthwhile investment of a few hours to learn it, especially since I had read a few weeks ago that Microsoft had put it full jQuery support into Visual Studio 2010. What I found after a few hours of digging in impressed me. I can see why everyone seems to be buying in and using jQuery. It simply makes client-side, rich internet application development much simpler. I have never enjoyed writing Javascript (frankly, I've tried to avoid it as much as possible) but with jQuery, it makes it so easy.

So, being as excited as I was, I started to dream up some ideas I had on how I could use jQuery. I have kicked around a few ideas with some of my colleagues and acquaintances and the ones they thought were good ideas, I will start to build during the upcoming days and months. I will release the code either here (if it is just small snippet code) or in CodePlex if I build out libraries or toolkits. But yesterday, as I was laying in my bed freezing (it was 45 degrees in my house because my furnace went out and had to be repaired this morning), I thought about the accordion control my colleague mentioned. I thought to myself, now this is something I think could do quickly with jQuery. So today, as I waited for the service guy to fix my furnace and for my new treadmill to be delivered, I wrote some jQuery code to make the SharePoint Quick Launch menu work like an accordion. 

Getting Started

By default, the following image is the default appearance of the Quick Launch menu in my dummy test portal: 

I annotated the image in order to better explain what I did. First, in order to understand the javascript I wrote, it is important to understand the html output that is emitted by the Quick Launch menu. Every site in the menu is outputted as a table (item B). That table has the CSS class 'ms-navheader' applied by default (I say by default because you can always override the CSS class assigned in the <SharePoint:AspMenu> control; all references to CSS classes here are in reference to the default CSS classes assigned out of the box). Within this table, a link (item A) is added to the actual site. Each of these anchor tags also have the 'ms-navheader' CSS class applied to it. Lastly, each sub-menu section (item C) is another table with the CSS class 'ms-navSubMenu2' applied.

My accordion would function as follows (the UI requirements, if you will):

  • Only one sub menu at a time should be visible.
  • If you click on a site's navigation bar (item B), the sub menu (item c) should appear and all other sub-menus would disappear.
  • If you click on a site's navigation bar to attempt to expand the sub-menu but the site has no sub-items, nothing should happen (the currently visible sub-menu should still remain).
  • Clicking on the site link (item A) should still continue to take you to the site.
  • By default, when the page is first rendered, the current site the user is on should have its sub-menu expanded out.

The following zip file contains the javascript I wrote to satisfy these UI requirements (the zip also contains both the minified and Visual Studio annotated 1.2.6 version of jQuery): quicklaunch_accordion.zip (58.59 kb)

Some highlights and explanations of the code: 

Finding each sub menu 

//For each Quick Launch navigation sub menu:

    $("table.ms-navSubMenu2").each(function(){

        //Find any navigation items under the sub menu that have been selected.

        var selectedNavItems = $(this).find("a.ms-selectednav");

 

        //Find the corresponding navigation header of the current sub menu being processed

        var menuHeader = $(this).parents("tr:eq(0)").prev("tr").find("table.ms-navheader:eq(0)");           

 

        if ($(menuHeader).hasClass("ms-selectednavheader") || selectedNavItems.length > 0)

        {

            //if the navigation header for this sub menu is selected or if there are any

            //selected navigational items in this submenu, show the submenu.

            $(this).show();

        }

        else

        {

            //otherwise, hide the submenu

            $(this).hide();

        }

    });

When the page is first rendered, the above snippet finds each sub-menu and automatically hides or displays them based on the UI requirements above. A sub-menu item link that is selected will have the 'ms-selectednav' CSS class applied. Similarly, if the user is currently on the welcome page of a site that appears on the Quick Launch, the 'ms-selectednavheader' CSS class will be applied to the corresponding table element in the Quick Launch html.

Handling a site's link (item A) click event

//When a user clicks a navigation header, the user should be taken directly

//to the site link. The javascript event handler to hide/display the submenus

//should not be triggered.

    $("a.ms-navheader").click(function(e){

        e.stopPropagation();

    });

 

Normally, the javascript that is triggered when clicking on the table navigation header (item B) would execute because this anchor tag is within that table. Calling stopPropogation() prevents that click event on the table from firing.

 

Event handler for site menu items

 

//Finally, this adds a click event handler for the navigation header table

    $("table.ms-navheader").click(function(e)

    {           

        var subMenu = $(this).parents("tr:eq(0)").next("tr").find("table.ms-navSubMenu2:eq(0)");

        if (subMenu.length > 0)

        {

            //only if we have a submenu should we hide the other submenus and show the current one.

            $("table.ms-navSubMenu2").hide("slow");

            subMenu.show("slow");

        }

 

    });

The above snippet adds an event handler to handle clicks on the table. And the final output of this code is:

Portal home page (on first load) 

 

Portal home page (News expanded) 




Portal Home Page (Search expanded)

Portal Home Page (Sites expanded)

News Home Page

Sub link Page



About the author

Bart X. Tubalinal is a Solutions Architect with over 10+ years experience in building enterprise applications. He also considers himself to be, pound for pound, one of the best developers there is.

Archives

Comments

Comment RSS