DCSIMG
Collapsible Web Parts - itaysk

Collapsible Web Parts

Posted Tuesday, August 12, 2008 11:35 AM by Itay Shakury

Here is something cool I have recently made. It's an add on to SharePoint, that allows a user to temporarily collapse (or minimize) Web Parts, and restore them, by clicking on their titles.
Just click on the Web Part's title to collapse, and click again to restore.

CollapsibleWPDemo

  • Your users doesn't need any special permissions to use this (works with anonymous as well).
  • No SharePoint personalization involved.
  • Collapsing occurs instantly (no postback).
  • Everything is temporary, when the user returns to that page again, it is in it's original state.
  • No dll's or custom code.

The solution is implemented as a single hidden Content Editor Web Part, that adds JavaScript to the page it is at, and modifies the other web parts on that page to allow collapsing.

I have developed and tested this on IE, WSS 3.0, don't know how it will work with other browsers or WSS versions.

Download: http://blogs.microsoft.co.il/files/folders/itaysk/entry130087.aspx

Installation:

  1. Extract Itaysk_CollapsibleWebParts.zip, and run setup.exe.
  2. Follow the installation wizard to add the solution and deploy it in you farm.
  3. Activate the 'Itaysk - Collapsible Web Parts' feature at the site collection level.
  4. Go to a page you want to have this capability, and add the 'Collapsible Web Parts' web part somewhere on a page.

If you want to apply this to all of you pages, you can put this script in you master page file.

 

Here is the script: (the downloaded file won't include these comments)

<script type="text/javascript">

    //Make the registeration function invoked after page load
    _spBodyOnLoadFunctionNames.push("registerTitleEvents");
    
    //This function registers an event handler to every web part title in the page
    function registerTitleEvents()
    {
        //In order to get all the web parts in the page, we search for all the H3 tags in the page, and check their parent's id
        //We search for H3 tags becaue every web part has one in it's title, inside the TD tag.
        //We don't search for TD tags because there are much more of them in the page than H3 tags.
        var webPartTitles = document.getElementsByTagName('h3');
        
        //Go through all the H3 tags we found
        for(i=0;i<=webPartTitles.length-1;i++)
        {
            //Since the H3 tag itself doesn't have any id, we check it's parent TD tag.
            var title = webPartTitles[i].parentElement;
            //If an H3 tag's parent TD tag is begining with "WebPartTitleWPQ", we can tell it's a web part's title H3 tag and not just another H3 tag
            if (title.id.indexOf("WebPartTitleWPQ") > -1)
            {
                //Make the titleClicked function invoke on every click on the H3 tag
                //The H3 tag spans the entire TD, so we won't get dead spots
                //We don't attach the event to the parent TD tag (title variable), because it would attach the H3 anyway..
                webPartTitles[i].attachEvent('onmousedown',titleClicked);
                //Change the cursor to hand when the mouse is iver the title to give the user a clickable fill
                webPartTitles[i].style.cursor = "hand";
            }
        }
    }
    
    //This function is handling click events for the web part's title, and hides\displays the body of the web part
    function titleClicked()
    {
    
        //This function is triggerred from the id less H3 tag. So again, we are ckecking it's parent TD id.
        var titleId = event.srcElement.parentNode.id;
        //This hack is to keep clicking on the title text itself working as before
        if (!titleId)
            { return; }
        //Get the clicked web part id from the id of the TD tag
        var wpq = titleId.substring((titleId.lastIndexOf('WPQ')+3),titleId.length);
        //Get the container of the body of the web part, so we can hide it later
        var body = document.getElementById("WebPartWPQ"+wpq );
        
        //Declare a flag that will help us know is the web part was hidden when the click occured.
        //We use the style attribute "display" to deak with visibility
        var fVisible = true;
        if (body.style.display == "none")
        {
            fVisible = false;
        }
        
        //Check what was the web part's visibility state when the clicked occured
        if (fVisible)
        //The web part was visible
        {
            //Hide the web part
            body.style.display = "none";
        }
        else
        //The web part was hidden        
        {
            //Show the web part
            body.style.display = "block";
        }
        
        
    }
</script>
תגים:,

Comments

# SharePoint Daily for August 13, 2008

Wednesday, August 13, 2008 9:23 AM by SharePoint Daily

Top News Stories Information&rsquo;s Just a Keystroke Away (Schriever Air Force Base) Are you working

# re: Collapsible Web Parts

Wednesday, August 13, 2008 10:16 AM by gv

Great feature - I also tested it out with FireFox 3, and it does not work, so in case anyone was wondering...

# re: Collapsible Web Parts

Wednesday, August 13, 2008 2:37 PM by rampalarjun69@gmail.com

Good work. The webpart seems to be working only when you have title in the chrome type.

If you change the chrome type to none(modify shared webpart -> Appearance -> chrome type ->none ), it will not work. And yes, it does not work in mozilla.

Anyways good work to start of with, since I was also looking something of this sort.

# Links (8/20/2008) &laquo; Steve Pietrek - Everything SharePoint

Wednesday, August 20, 2008 8:45 PM by Links (8/20/2008) « Steve Pietrek - Everything SharePoint

Pingback from  Links (8/20/2008) &laquo; Steve Pietrek - Everything SharePoint

# re: Collapsible Web Parts

Monday, September 29, 2008 11:53 PM by Bill Safcik

How do you create a web part with an ID that starts with WebPartWPQ?

# re: Collapsible Web Parts

Wednesday, November 05, 2008 2:50 PM by Bryan Worthy

It seems to work just like you said except that I can't click on the title, I have to click in the empty space next to the title for it to work.

It does not work with FireFox by itself, but it does work if you use the IE Tabs add-on in FireFox and open it using an IE engine.

# re: Collapsible Web Parts

Monday, May 18, 2009 6:35 AM by Stanley Nazaire

Dude! Hats down. This is the most amazing and simple web part modification I have ever seen. Keep up the good work. It's guys like that give a lot of developer hope out there.

Shalom

# re: Collapsible Web Parts

Thursday, July 16, 2009 1:22 AM by Jordan

Can you install or get this web part imported without being on the actual server as long as I have admin rights?

# re: Collapsible Web Parts

Thursday, July 16, 2009 11:57 AM by Itay Shakury

Hi Jordan,

Basically you can create a Content Editor Web Part, and paste the code into source view.

So the answer is yes:)

Itay Shakury.

# re: Collapsible Web Parts

Friday, July 24, 2009 3:14 AM by Glen Robinson

I have just applied this to our pages as a hidden Content Editor Web Part. It is brilliant. Good work

# re: Collapsible Web Parts

Thursday, August 20, 2009 1:04 PM by Gilles

When  I want this option to work for the title as well, what do I have to allter in the source (or what would the source look like?).

Is it possible to have this for all webparts except document library webparts ?

Or to add lines like all webparts except when title = (f.i.) "this title is an exception"?

Kind regards,

Gilles de Man

# re: Collapsible Web Parts

Friday, March 05, 2010 11:42 PM by Edward J

Gilles I am also interested on how you would change the script to work with the title.  

Kind Regards,

Edward J

# re: Collapsible Web Parts

Thursday, May 06, 2010 6:20 PM by Chris Jones

Is there a way to have the default view minimized, then click to expand?

# re: Collapsible Web Parts

Tuesday, August 02, 2011 1:16 PM by Chris

Is there a way of having the default view minimized..

Is there a way for the click event to be registered to the actual web part title text, not just the blank bit.

# re: Collapsible Web Parts

Thursday, December 15, 2011 2:12 PM by Andy Levitt

Thanks for this. It has been a very useful tool.

Just wondering, like Chris, If the default view can be minimized??

When the minimized view is set for my webpart, if I expand it i just displays a blank window.

Thanks

Andy  

Leave a Comment

(required) 
(required) 
(optional)
(required) 

Enter the numbers above: