Show/Hide Multiple Web Parts

You have 4 web parts on the page but when the page loads you only see the first web part, ‘Overdue Tasks’. A dynamically created menu of all the task web parts is on the left.

When you click on ‘My Tasks’, ‘Overdue Tasks’ is hidden and ‘My Tasks’ appears in its place

Clicking on ‘All Tasks’ shows the All Tasks Web part

When you edit the page, you can see all 4 web parts and easily modify or reorder them.

Technical Expertise and Permissions needed:

• Create views for a list
• Add and Modify web parts on a page
• Copy/paste some code into a content editor web part

Here I was again, trying to figure out how to show multiple views of the same list on my page. I had a task list and I wanted to show tasks for the current person (My Tasks), Overdue Tasks, High Priority Tasks and a Final view of all the tasks on the same page.

Problem is, there is a limited amount of real estate on the page to show all these views at once. I have in the past made multiple pages and placed one web part on each and made a menu that allowed me to go back and forth, the only problem is now I have to wait for a page load each time.

Fix:
I need some javascript or jquery to d hide all the webparts and only show me the one web part I want to see. My solution also has to do the following:

• Be easy used by non-technical users
• Work no matter how many web parts are included
• Not hide the web parts in ‘edit page’ mode

Here is what I came up with:

I created views for Overdue Tasks, and High Priority in my task list. (All Tasks and My Tasks are created by default)

I created 4 web parts of the task list in one column on my page. I set there width to 600 px each gave each one a title with the word “Task” in it (my keyword). I set there chrome type to title only and I changed their view to one of the four views I wanted to show.

Next I added a content editor web part and added the following code:

<script type=text/javascript>
////////////////////////////////////////// User Chosen Parameters ///////////////////////////////////////////////
var displayFirst=false			// Show the first web part on load
var menuTitle="" 				//Title of the top menu. If empty, spacing will be removed
var keyWord="Department"		//The keyword in the title of all web parts used in this code.  ie any web part with the word 'Tasks' will be hidden and added to the menu
var menuType="DropDown" 		//Enter 'List' or 'DropDown'
//--------------------------------------------------------------------------------------------------------------------------------------------------
</script>

<div class=content id=jLoadDiv></div>

<script type=text/javascript>
if(typeof jQuery=="undefined"){
	var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/";
	document.write("<script src='",jQPath,"jquery.js' type='text/javascript'><\/script>");
}
</script>

<script type=text/javascript>
$("document").ready(function(){
  if(menuTitle!="")
  {$("#jLoadDiv").append("<p class='ms-WPHeader'><H3 class='ms-standardheader ms-WPTitle'>"+menuTitle+"</h3></p>")}
  hideZones(1,displayFirst);
});

function show(item)
{
 hideZones(0,false); //hide all web parts
 var webPart
 if(menuType=="List"){webPart=item.id}
 else if(menuType=="DropDown"&&item!="none"){webPart=item}
 else if(menuType=="DropDown"&&item=="none"){return false;}
 document.getElementById(webPart).style.display=""; //Show selected web part
}

function hideZones(writeMenu,displayFirst)
{
    var menu=""
	var menuDD=""
	if (displayFirst==false)
		{menuDD="<option value='none'>--- Select an Item ---</option>"}
    var listTitle = $("td:contains('"+keyWord+"')");//make an array of the titles of the web parts

    $.each(listTitle, function(i,e)
	{
		var listZone=listTitle[i];
		var wpnum
		if (listTitle[i].title.length!=0){
		//slice off the table title and select the web part number
		wpnum="MSOZoneCell_WebPartWPQ"+listZone.id.substring(15);
        //If not in edit mode, hide the web parts
		if (displayFirst==false)
		{
		  document.getElementById(wpnum).style.display="none";
		}
		else
		{
		  displayFirst=false;
		}
		var Title=listZone.title.split(" - ")// get rid of the description by splitting on the " - " and only showing the first part
		menu=menu+"<li><a href='javascript:show("+wpnum+");'>"+Title[0]+"</a></li>"
		menuDD=menuDD+"<option value="+wpnum+">"+Title[0]+"</a></option>"
		}
	});
    if (writeMenu==1&&menuType=="List")
		{$("#jLoadDiv").append("<ul>"+menu+"</ul>")}
	else if (writeMenu==1&&menuType=="DropDown")
		{$("#jLoadDiv").append("<select onchange='javascript:show(this.value)' id='webShowHide'>"+menuDD+"</select>")}
} //end function
</script>

The code has three options:

var keyWord=”Tasks” – Put the keyword thats in all your web part titles here

var displayFirst=true – Leave this true if you want the first web part to show up on load

var menuTitle=”Whatever you want the title of your menu to be”

Viola!
Now the code will go out and add any web part that has your keyword in the title to a menu and then hide it. When you click on the menu item all the web parts will be hidden except for that web part (view).

UPDATE:
1 Fix has been added.
The webpart description has been filtered out so it won’t show up in the menu

There is a new menu type at the type, since several people asked for a drop down instead of a list for the menu.

At the top of the code, change:
var menuType=”List” – to show the menu as a list
var menuType=”DropDown” – to show a drop down list with all your selected web parts

Make a pie chart that shows percents

 

Update: The code I had originally posted was hard to copy and not figuring the percentage accurately. This has been corrected.

This is a quick update to Claudio Cabaleyro’s ground breaking blog on endusersharepoint.com to use jquery and google charts api to create pie charts of SharePoint List data.

Here is Cabaleyro’s code slightly modified to show the percent instead of the count of items from the list. Hope this helps anyone who has been looking for this solution.

Copy and paste the following code

<script type="text/javascript">
if(typeof jQuery=="undefined"){
var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/";
document.write("<script src='",jQPath,"jquery.js' type='text/javascript'><\/script>");
}
</script>
<div id="jLoadMe" class="content"><strong>Item by percent</strong></div>
<script type="text/javascript">
if(typeof jQuery=="undefined"){
var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/";
document.write("<script src='",jQPath,"jquery.js' type='text/javascript'><\/script>");
}
</script>
<script
type="text/javascript">
$("document").ready(function(){
var arrayList=$("td.ms-gb:contains(':')");
var coord= new Array();
var labels= new Array();
var titles= new Array();
var total=0

$.each(arrayList, function(i,e)
{
var MyIf= $(e).text();
var txt= MyIf.substring(MyIf.indexOf('(')+1,MyIf.length-1); // Extract the ‘Y' coordinates
coord[i]=txt;
total=total+(txt*1)
var txt1= MyIf.substring(MyIf.indexOf(':')+2,MyIf.indexOf("(")-1); // Extract the labels
titles[i]=txt1;
//labels[i]=titles[i]+"("+coord[i]"; //update the total
//labels[i]=titles[i]+"("+Math.round((coord[i]/total*100)*10)/10+"%)"; //update the total
});

for(i=0;i<coord.length;i++)
{
coord[i]=Math.round((coord[i]/total*100)*10)/10
labels[i]=titles[i]+"("+coord[i]+"%)"; //update the total
}

var txt= coord.join(",");
var txt1= labels.join("|");

// Adjust Chart Properties below – See Google Charts API for reference
var vinc= "<IMG src='http://chart.apis.google.com/chart?cht=p&chs=300x120&chd=t:"+txt+"&chl="+txt1+"&chco=FF0000' />";
$("#jLoadMe").append("
"+vinc+"
")
});

</script>

Web Chart Part available on Codeplex

Here is an interesting Web Part available for free on Codeplex. You have to have Micrsoft .net 3.5 SP 1 and .net 3.5 Chart Controls so if you have access to the Sharepoint server(s) this would be a real easy solution to graphs for dashboards.

http://chartpart.codeplex.com/

Adding Graphs, Bar and Pie Charts to SharePoint

Here is a quick trick I learned today that solves an issue I’ve been having for awhile now.  How to quickly make charts and graphs that pull dynamically from SharePoint Lists.

Screen Shot of the finished product:

Claudio Cabaleyro posted this article on endusersharepoint.com on how to use jquery and google charts to pull info off of SharePoint Lists and display it as a Pie Chart.  I tried it out and it literally took me 1 minute to have my first pie chart.  I quickly saw some limitations that people may run into and in this article I will talk about some tweaks I did to Claudio’s code to do some very cool stuff.

First off, the code works by rooting for any table cell that has the class “ms-gb” and then checks to see if that cell has an “:” in it.  Here is the code

var arrayList=$(“td.ms-gb:contains(‘:’)”);

This works fine except if you want to have multiple graphs on the same page, then the code would tally all your lists together regardless if they were related or not.  If you would like to have more than on graph here is how to edit that line of code.

var arrayList=$(“td.ms-gb:contains(‘[name of column that's grouped]‘)”);

Since my first list was grouped om the Category so I put Category in there instead of the colon.
var arrayList=$(“td.ms-gb:contains(‘Category’)”);

My second graph, I made another list and grouped it by Status, I copied and pasted the code a second time in the second instance I changed the code to:
var arrayList=$(“td.ms-gb:contains(‘Status’)”);

Now at least you can have multiple graphs as long as the column names that are doing the grouping are different.  I also made an update to the second div tag id to prevent there being two identical id’s from being on the same page.  On the second div <div id=”jLoadMe” class=”content”> I changed to <div id=”jLoadMe2″ class=”content”> at the end where it dumps the information I updated $(“#jLoadMe”).append to $(“#jLoadMe2″).append

Since I did not one of the lists to actually show up I went to layouts and checked the hidden box, and the pie chart continued to work fine.

Other notes:

I went to google charts at http://code.google.com/apis/chart/ and spent some time learning how to customize the charts a little bit.

To change the color all you have to do is add &chco=#[Hexadecimal color number], the &chs=250×100 tells the width and heigth of the cart image and you can change the piechart to a non-3d chart with the cht=p here is what my code looked like when it was done.

var vinc= “<IMG src=’http://chart.apis.google.com/chart?cht=p&chs=250×100&chd=t:”+txt+”&chl=”+txt1+”&chco=0000FF’ />”;
 $(“#jLoadMe”).append(“<p>”+vinc+”</p>”)

Here is what the chart looked like:

I hope the rest of you find this solution as useful as I did.  As I said, I had a dynamic charts of my SharePoint Lists up in minutes!

UPDATE!
Here is the code that I used to do the two pie charts side by side:

<script type="text/javascript">
if(typeof jQuery=="undefined"){
var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/";
document.write("<script src='",jQPath,"jquery.js' type='text/javascript'><\/script>");
}
</script>

<script type="text/javascript">
var chartkeyword = [];
var chartcolor = [];

////////////////////////// Customizations /////////////////////////////////

chartkeyword[1]="Status" 	//name of the first column that's grouped
chartkeyword[2]="Category"	//name of the second column that's grouped

chartcolor[1]="FF0000"		//Color of Pie Chart 1
chartcolor[2]="0000FF"		//Color of Pie Chart 2

var charts=2

</script>
<table width=100%><tr>
<td><div id="jLoadMex1" class="content"><strong>

<!------------- Name of Chart 1 -------------------------->
Add a Name Here

</strong></div></td>
<td><div id="jLoadMex2" class="content"><strong>

<!------------- Name of Chart 2 -------------------------->
Add a Name Here

</strong></div></td>
</tr></table>

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

for(var i=1;i<=2;i++)
{
makeChart(i)
}
});

function makeChart(i)
{
	var arrayList=$("td.ms-gb:contains('" + chartkeyword[i] + "')");
	var coord= new Array();
	var labels= new Array();
	$.each(arrayList, function(i,e)
	{
		var MyIf= $(e).text();
		var txt= MyIf.substring(MyIf.indexOf('(')+1,MyIf.length-1); // Extract the 'Y' coordinates
		coord[i]=txt;
		var txt1= MyIf.substring(MyIf.indexOf(':')+2,MyIf.indexOf("(")-1); // Extract the labels
		labels[i]=txt1+"("+txt+")";   //add also coordinates for better read
	});
	var txt= coord.join(",");
	var txt1= labels.join("|");
	// Adjust Chart Properties below - See Google Charts API for reference
	var vinc= "<IMG src='http://chart.apis.google.com/chart?cht=p&chs=320x120&chd=t:"+txt+"&chl="+txt1+"&chco="+chartcolor[i]+"' />";
	$("#jLoadMex"+i).append("<p>"+vinc+"</p>")
}

</script>

Change the keywords at the top of the code to the name of the categories you are grouping by… Good Luck!