Collapsible Quicklaunch Menu for SharePoint2010 Using Jquery

Recently I have been getting comments on my post Collapsible QuickLaunch SharePoint Menu For MOSS 2007/WSS 3.0 Using Jquery saying this is not working on SharePoint 2010 or is there any solution to get it working in SharePoint 2010. So here is the post that would describe how to achieve this in SharePoint 2010.

The way quick launch is rendered in SharePoint 2010 is different from MOSS 2007/WSS. SharePoint 2010 uses DIV/UL/LI for rendering menu tags compared to TR/TD in the previous versions. The image below shows how the menu is typically rendered in SharePoint 2010.

After doing some research I came to an approach of using Jquery to achieve this. Here is the article which is the base of this approach, so that you can use it to customize further if required. After implementing this how the collapsible quick launch looked.

But there was an issue with post back operation on click of each item on the navigation menu which resulted in losing the menu click item as expanded. To fix this issue I used cookies to maintain the expanded state of a menu item after post back which was posted as comment by Krillehbg on my previous post. The below snapshot show how it looks when you click Lists menu item.

Currently I will be posting the script which you can place it in master page later at some point of time I will make this as feature or someone could work on this to make it as feature.

1. Open the site in SharePoint Designer in which you want to make the QuickLaunch Collapsible.
2. Open the Master Page which resides in the catalog folder.
3. Copy and paste the given snippet above the end of head tag in the master page 

        <script type="text/javascript">
        $(document).ready(function () {


    $("body").addClass("enhanced");
    $(".root li:first").addClass("selected");
    $(".root li").not(":first").find("ul").hide();


    $(".root li.static").click(function () {        
        var menuClicked = createCookie("Menu_Clicked", $('a > span > span ', this).html(), 1);
        if ($(this).parent().find("ul").is(":hidden")) {
            $(".root ul:visible").slideUp("fast");
            $(".root li").removeClass("selected");
            $(this).parent().addClass("selected");
            $(this).find("ul").slideDown("fast");


        }
    });


    var menuClickedOld = readCookie("Menu_Clicked");
        $(".root li.static").each(function () {
        if ($('a > span > span ', this).html() == menuClickedOld) {
            if ($(this).parent().find("ul").is(":hidden")) {
                $(".root ul:visible").slideUp("fast");
                $(".root li").removeClass("selected");
                $(this).parent().addClass("selected");
                $(this).find("ul").slideDown("fast");


            }
            return;
        }
    });
});


function createCookie(name, value, days) { if (days) { var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); var expires = "; expires=" + date.toGMTString(); } else var expires = ""; document.cookie = name + "=" + value + expires + "; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); } return null; } function eraseCookie(name) { createCookie(name, "", -1); } function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}




function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}


function eraseCookie(name) {
    createCookie(name, "", -1);
}
        </script>

Happy Reading :). Please feel free to leave comments

JQUERY RSSReader WebPart for Office365

It’s been long time I have posted any technical posts. This post would describe an alternate for RSS Reader Web part in Office 365. Last week I started to work on one of our client’s requirement to show RSS feed in Office 365. For surprise I came across few posts which indicated RSS Viewer Web Part is not supported.

To start my research first I tried with RSS Reader Web part present in CodePlex written by phil wicklund. If you try to deploy this solution on cloud it would through error because of few limitations that I had posted here in my previous post.

So I started to Google to check how to display RSS feeds in ASP.net which doesn’t use any web part concept. I ended up with This post. With the help of the above two posts I started creating JQUERY RSS Reader web part for office 365.

After completing the development of the base web part, I thought it would be great if can render the rss feeds as ticker instead of static. So I ended up in creating the following display mode 1. Basic and  2.Ticker which can be configured to render feeds accordingly. Here are some snapshots of the configuration and how the web part looks.

Please find below the source code and the WSP for this web part now. Please feel free to modify this webpart according to your needs and let me know if you have any better solution.

Summary of OFFICE 365 Limitations and Workarounds

This blog post will brief you about that various limitations I faced during Office 365 Sandbox development. Sandbox limitations differ when it comes to cloud deployment compared to on premise deployment.You will find various blogs with Sandbox Limitations. 

This post would help you understand these limitations in a quick way, so that you can plan before you start your deployment. If you are a SharePoint Expert this blog would not help you much, but there are lots of Office 365 BeginnersJ.    

1. The WSP package cannot deploy files to hive .i.e. file system. The possible option to uses document library to deploy your files

2. We can use Sandboxed Visual WebParts with some limitations while you are developing for Office 365. You need to install the Visual Studio 2010 SharePoint Power Tools and use Visual WebPart (Sandboxed) Item Template.

  3. Performing asynchronous post back cannot be achieved, we may try using JQUERY, I need to explore more on this and will update my post accordingly.

4. You cannot use Assembly.GetExecutingAssembly on cloud but this will work when you are developing sandbox for on premise application.

5. You cannot use Page.RegisterClient script for registering JavaScript on the page; you can use html render tag to insert script tag in the page. This holds good for adding css. Few say to use embedded resources but not sure if it’s really going to work out on cloud.

6. RSS Reader WebParts doesn’t work on cloud. I have developed an alternate solution to achieve this. Will be posting a post on my blog soon.  

7. You cannot use Run with Elevated privileges in sand box solution.

8. Using resources in sandbox solution is Tricky, which is not feasible while developing solutions for OFFICE 365 or cloud.

Will be updating this blog as and when I find more limitations. Please feel free to comment on the above points or if you have a better workarounds.

Note: Post Updated On August 8 2011