Part 1 – Introduction

A client had a requirement to modify an Org Chart that they had on their SharePoint (WSS3) site. When looking at it, I realized that it was an image with the links mapped. The image itself was sliced up pretty good and it was impossible to make the requested modifications because I didn’t have original image to edit.

I looked at different commercial Org Charts but the ones I looked at only displayed contact data either from Active Directory or a custom Contact List in SharePoint.

I knew that Google had a charting API and when I looked, that included an Org Chart. This API would work perfectly for me since my client wanted more of a Site Map that would illustrate their different department sites with links to each site, I needed to include HTML in the content of the ‘Nodes’ of the Org Chart. I quickly fired up SharePoint Designer and coded some jQuery and HTML to create the chart in a Content Editor Web Part (CEWP). It worked but my client would always need a web developer to make any modifications to the chart. What I wanted to do was to provide them with a solution that would allow them to make modifications to the chart without any developer resources.

I have been working with the wonderful SPServices jQuery library that Marc Anderson has written for sometime. I love the ability to query the SharePoint Web Services with jQuery. It provides some great possibilities. So, I noodled about and came up with the following solution, which I will cover in 5 parts. Please see the end of this post for links to the other parts.

The Pieces

• Content Editor Web Part
• jQuery
• SPServices jQuery library for SharePoint Web Services
• Google OrgChart API

The Requirement

The client wants to display a visual representation of their organization and provide links to their individual team site. The client wants to be able to modify the content and structure of the Organizational Chart without using developer resources. The end result should look like Figure 1.

The Solution

After thinking about this requirements a bit, I thought that Google’s Visualization API, specifically their charting API might give me the tools necessary to actually draw an organizational chart. I knew that I could write some javascript code to access the API so that was pretty simple. I quickly set out to create an organizational chart using Goolgles OrgChart visualization and hard-coded all of the content. This provided the visual result I wanted but not the functional result. An end user would need to know HTML to be able to update the chart. What I wanted to do is to create a couple of lists that would drive the content and structure of the list. The perfect solution for this is Marc Anderson’s SPServices jQuery library for SharePoint Web Services. Marc has done a fantastic job with this library and is constantly updating the code to keep up with the changes in both SharePoint and jQuery. The SPServices library will allow us to query a SharePoint list and then parse the XML that is returned and send that data to the Google API to draw the org chart.

So, now that we have an idea of how we are going to create the solution, it’s time to set up the lists.

Setting up the lists

To make this easy to modify by anyone, I have decided to use two custom lists. The first custom list is to control the structure of the org chart. Two fields are necessary, a name for the node and what it’s parent is. Of course, the first node will not have a parent. I created a list with the following fields:

Field Name	Type	Notes
Title	Single line of text
Parent	Lookup	This lookup field references the Title field in the same list.

Table 1 – Site Map List

Add the following content to the Site Map List

Title	Parent
IT
Database	IT
Systems	IT
Collaboration	IT

Table 2 – Site Map list content

To supply content to each node, I chose to use an additional list that I called Site Map Content. In this list, I needed to define the content line, any URL that the content would link to, the position the content should appear in the node and what node to place the content in. Table 2 illustrates how I created the content list.

Field Name	Type	Notes
Content	Single line of text	Renamed the Title field
Url	Single line of text
Position	Number	set to zero decimal places, minimum number 1
SiteMapNode	Lookup	Lookup to the Site Map list and reference the Title field

Table 3 – Site Map Content List

Now add the following content to the Site Map Content List

Content	Url	Position	SiteMapNode
Director: Jim Smith		1	IT
Manager: Bob Blisand		1	Database
Oracle Team Site	#	2	Database
MSSQL Team Site	#	3	Database
MySQL Team Site	#	4	Database
Manager: Chris Cooper		1	Systems
Microsoft Systems Team	#	2	Systems
Linux Team	#	3	Systems
Manager: Wesley Willingham		1	Collaboration
SharePoint Development	#	2	Collaboration
Web Development	#	3	Collaboration

Table 4 – Content for the Site Map Content List

Now that we have the two lists created, we can begin coding. In the next part of this series, we will set up the environment we will need to code the solution.

+++++++++++++++++++++++++++++++++++

Other posts in this series:

1. Introduction.
2. Setting up the coding environment.
3. Create the Chart.
4. Add Content
5. Conclusion