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.
- Content Editor Web Part
- SPServices jQuery library for SharePoint Web Services
- Google OrgChart API
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.
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:
|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
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.
|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
|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|
|Manager: Wesley Willingham||1||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:
One response to “jQuery – .SPServices – Google.OrgChart API Mashup – Part 1”
Update: When I first posted this, I put the wrong data on the page so it didn’t match the graphic. I have since corrected the post, but if you started this prior to my corrections and got confused, I apologize.