Right now I am in Birmingham Alabama getting ready to give a couple of presentaions at the SharePoint Saturday here.  I have uploaded the outline to how to Jazz up your sharepoint pages with no more skill than copy and pasting.

Three items are already covered in my blog; Pie charts, SharePointCanvas.com, and Hiding/Displaying web parts.  The other three are from other authors and I have provided links directly to their sites.  Please let me know if you are author on any of these sites and the links or credit due is not to your liking.

* note: I updated the Progress bar text to the code I use on my site, since the linked text did not work during the presentation.

Juice_your_SharePoint_page.doc

Here is the link to the outline for creating a Master Calendar or Library

Creating_ Master_Calendar_Presented.doc

Ever wish you could just make the top links disappear? Maybe kill the quick launch or the top navigation? How do you hide the global bread crumb, the site actions tab or the my links tag?

This site at http://sharepointcanvas.com allows you to uncheck all the elements you don’t want on your page then it will print out the css for you. Just copy and paste the css in a content editor web part or master page an viola! All you unchecked items are hidden from view.

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

One of the first frustrations I had when learning SharePoint was wrapping my head around content types. A seemingly simple thing such as going to the MS Project Tracking template and adding a new column to the project list should mean that from now on, when I add or edit my list, I should see my newly created column just waiting to be filled, right? Wrong!

The reason is this; this template uses a Content Type for the project list and if you ever run into an issue where a column you created is not showing up on the add new or edit page or is not an option for a filter or content query part, the most likely reason is that you are working on a list that is using a content type but the option of “Allow management of content types” is set to “No”.

Fix:
Go to the list settings – under the heading “General Settings” select Advanced Settings.

The first option is to “Allow management of content types”, set this to yes.

Now when you create a column, a new option will appear: Add to all content types. If this is checked, the column will now show up whenever you go to edit or a add a list item.

What if you have already added a bunch of columns? How can you now have them show up as options when adding and editing list items?

Now when you go to list settings you will notice a new heading above columns for Content Types.

Simply click on the name of the content type (in this case Project) and then on Add from existing site columns, this will allow you to add previously created columns to the lists Content Type.

Hope this helps anyone struggling with this issue. Just to know Content Types are very useful and there is a reason for not adding columns by default to your lists. Even though now it seems a bit awkward an unintuitive.

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>

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/

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!

Customizing the Budgeting and Tracking Multiple Projects Template

This is the final product of this blog… a related documents data view that functions and looks like the related tasks, issues and milestones on the Budgeting and Tracking Multiple Projects Template.

At my organization, we have found the Budgeting and Tracking Multiple Projects Template extremely useful. For those of you have not seen this template I urge you to go to http://www.wssdemo.com/application/default.aspx and view an example of this handy template. The link is in the left nav 2cnd one after the heading Template Type: Server Admin.

In a nutshell the template allows you to track all you projects as you normally would. When you click on a detail view of the project, you also get a related tasks, related issues and related milestones data views on the same page. Any tasks, issues or milestones you add on this page will be associated with that particular project and will rollup onto a nice looking dashboard.

However… like anything, SharePoint gets you 95% there and leaves you to your own devices to accomplish the last 10 feet.

I was asked by a business user to add a related documents view. Made sense to me, so now you have all your tasks, issues, milestones and documents on one convenient page. Perhaps people would like to add a related links or related announcements or calendar items, so I set out to figure a way to add these items with one goal in mind, make a no .net code solution that a user with SharePoint designer could do. Here is the fruit of my labors.

First you must have the Budgeting and Tracking Multiple Projects Template. It is one of the Fantastic 40 Microsoft templates for SharePoint. If you don’t already have it, you will need a farm administrator to install it for you. If you have these permissions and want to do it, here are the templates and instructions.

Second you must have SharePoint Designer and the permissions to use it, other than that you are good to go!

Finally, you can do this on the detail view of any list, not just the above template.

Step 1: Create a new Document Library
I called mine Project Documents, call yours whatever you would like. Go into Settings then Advanced Settings and click on Yes to Allow management of content types. This allows you to add a new column to the Document Library Content type.

Step 2: Add a new lookup column to the Document Library
It makes no difference what you call this field, but I called mine Project. You will want to point it at the Item column on the Projects List. Now go back into your new library and add a few documents and select a couple of projects in your newly created lookup column that they belong to.

Step 3: Open up the DispForm.aspx page in the Lists-Projects Directory
Make a small text edit to make sure you have the right page, and now go get a cup of coffee or another favorite beverage, because the next part is a little complex if you’re not used to looking at code.

Step 4: Click below the Related Milestones Data View and insert a new Data View
In your data source, choose your document library you just made and pick the fields you would like to display. I recommend the minimum of the fields “item” and “url path”

Step 5: Add a Query string parameter called “projectname”
Click on the arrow in the data view box and select parameters from the menu Click “New Parameter” Pick “Query string” for Parameter Source and “projectname” for Query String variable.

Now click on the arrow again and this time select Filter.  Pick the Name (for use in forms) field when it equals [projectname].

Step 6: Add a div tag around the title
The title of the page is the name of the item you are looking at in detail. For example if you click on the Project called “Upgrade Servers” The title of the detail page will be at the top of the page – Projects List: Upgrade Servers. If we select this title in design view, we will see that the this title field is an asp tag called

<sharepoint:listitemproperty id=”ID_ItemProperty” runat=”server” maxlength=”40″></sharepoint:listitemproperty>

Add a div tag around this asp tag like this:

<span style="font-size:x-small;">&lt;div id="projectname" style="display:inline"&gt;
<div id="projectname" style="display:inline">
<SharePoint:ListItemProperty id="ID_ItemProperty" MaxLength=40 runat="server"/>
</div>

This div tag allows you to grab the title of the item you want to filter your related documents on.

Step 7: Add the following Javascript Code
Add this code directly after an existing javascript code snippet on the dispForm.aspx page

<script type="text/javascript">

function querySt(ji)
{
	hu = window.location.search.substring(1);
	gy = hu.split("&");
	for (i=0;i<gy.length;i++)
	{
		ft = gy[i].split("=");
		if (ft[0] == ji)
		{
		return ft[1];
		}
	}
}
var projectname = querySt("projectname");
var checked = querySt("projectname");
var url=window.location

if (!projectname && !checked)
{
	projectname=document.getElementById("projectname").innerHTML
	checked=1
				url=url+"&projectname="+projectname+"&checked="+checked
	window.location = url
}

</script>

Now select a project on the main page.  Only the documents that have that project listed in the lookup field Project, should appear.  Test to make sure it works

Step 8: Fix up the view to look the way you want
This is perhaps the most tedious and time consuming part of adding a related list, getting it to look the way you want.

Select the table, click on the arrow for the data view and click edit columns. I used the columns Item, Modified and Modified by.

Find the following in the related documents view
xsl:value-of select=”@Title”/>
and replace with

<a href="{@FileRef}">
<xsl:value-of select="@Title"/>
</a>

This will display the item as a link to the document.

Make two new table rows right after the start of the table and add the title “Related Documents” to the second row.

<table border="0" width="100%" cellpadding="2" cellspacing="0">
<tr>
<td class="ms-WPHeader" colspan="99">
<xsl:text xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" ddwrt:nbsp-preserve="yes" disable-output-escaping="yes">&amp;nbsp; </xsl:text>
</td>

</tr>

<tr>
<td class="ms-WPHeader" colspan="99">
<h3 class="ms-standardheader ms-WPTitle">Related Documents</h3></td>
</tr>

Add the following code right before the closing table tag for the “upload new document link”.

<tr valign="top">
<td colspan="99" class="ms-vh">
<a href="Enter the url of your new item for the library here">
Upload a new Document...
</a></td>
</tr>