Collapsible Web Parts

12 באוגוסט 2008

תגיות: ,
15 תגובות

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>
הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

15 תגובות

  1. gv13 באוגוסט 2008 ב 10:16

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

    הגב
  2. rampalarjun69@gmail.com13 באוגוסט 2008 ב 14:37

    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.

    הגב
  3. Bill Safcik29 בספטמבר 2008 ב 23:53

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

    הגב
  4. Bryan Worthy5 בנובמבר 2008 ב 14:50

    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.

    הגב
  5. Stanley Nazaire18 במאי 2009 ב 6:35

    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

    הגב
  6. Jordan16 ביולי 2009 ב 1:22

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

    הגב
  7. Itay Shakury16 ביולי 2009 ב 11:57

    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.

    הגב
  8. Glen Robinson24 ביולי 2009 ב 3:14

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

    הגב
  9. Gilles20 באוגוסט 2009 ב 13:04

    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

    הגב
  10. Edward J5 במרץ 2010 ב 23:42

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

    Kind Regards,

    Edward J

    הגב
  11. Chris Jones6 במאי 2010 ב 18:20

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

    הגב
  12. Chris2 באוגוסט 2011 ב 13:16

    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.

    הגב
  13. Andy Levitt15 בדצמבר 2011 ב 14:12

    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

    הגב
  14. DMehta21 בפברואר 2012 ב 21:31

    Was anyone able to resolve:
    a) Default Minimized? (Right now it give blank page if default is minimized).
    b) Click on Title? (Right now user has to click on white space next to Title).

    Thank you very much for your help!

    הגב
  15. Mark26 באפריל 2013 ב 10:43

    I have the same questions as DMehta and was wondering if anyone has found a way to resolve these two issues.

    Thanks!

    הגב