Author: David Petersen

I have received some positive feedback on this article series. Thank you! I thought I’d go ahead and create this post with links to each post in the series to make it easy to read the whole thing in order. I also want to thank EndUserSharePoint.com for picking up the series, making it available to many more people. As always, if there is a particular subject you would like to know more about, send me an email and I’ll try to write something about it.

Here are all of the links!

1. Introduction
2. Setting up the coding environment
3. Create the chart
4. Add content
5. Conclusion

Part 5 – Conclusion

In the first four parts, we saw how easy it is to set up a couple of lists and then with just a little bit of JavaScript, we can transform that list data into an Org Chart or a graphical Site Map. This shows you how a little out-of-the-box thinking can produce great results.

When we last left our Site Map, it looked like this in IE.

The structure is all there but it looks completely different in browsers such as Chrome.

The reason the displays are different for each browser is because of the CSS used to render the boxes. Google uses some specific css that IE prior to version 9 does not recognize:

.google-visualization-orgchart-node {
    background-color: #EDF7FF;
    border: 2px solid #B5D9EA;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    cursor: default;
    font-family: arial,helvetica;
    text-align: center;
    vertical-align: middle;
}

If you look closely, there are a couple of tags that specify the rounded corners and the shawdow, namely, border-radius and box-shadow. These are found in the CSS3 proposal, the web-kit markup for Chrome and Safari browsers and the mos- markup for the Mozilla based browsers.

More information on CSS3 can be found at http://www.css3.info

Not everyone will be using IE9, so how can we make previous versions look better? While there are numerous rounded corner techniques, I chose to only work on the background and just accept the square corners. Lets begin by inserting a <STYLE> section just before our sitemap <DIV>.

The CSS class that we want to override is .google-visualization-orgchart-node. We can always use a solid color to draw the box but to make it look a little better, I created a small 3px X 395px that had a blue gradient. I can use this as the background and repeat it across the whole box. I chose 395 at random. I don’t think the boxes will ever be larger than 395px but I also wanted it small enough that I could see the gradation in the smaller boxes. If the boxes do get larger than 395px, then my background-color attribute is the same as the end color of my graphic. I named the graphic ‘background.gif’. Upload the graphic to the images folder you created in the second post. Once the file is uploaded to the server insert following CSS into your style section.

.google-visualization-orgchart-node
{
    Background-image:url(resources/images/background.gif);
    Background-repeat:repeat-x;
    Background-color:#d2eaf3;
    Border:1px solid #a8d5eb;
    padding: 10px;
    height: 120px;
    white-space: nowrap;
}

You will notice that I also took some liberty in trying to make the boxes look a bit uniform. I did this with the padding and setting the height. I also want to make sure that the contents of the box do not wrap. The key takeaway, it that you can configure each node however you want. Our final look in both IE and Chrome are:

I hope you have enjoyed this series. I love creating solutions that might look difficult but in reality, are pretty easy. This also shows how powerful SharePoint Web Services can be. If you haven’t worked with SPServices library in the past, check it out. With a little OOB thinking, you can create some cool solutions.

I hope my instructions have been clear enough so that your chart looks like mine, but if not, you can download my code SiteMap and the background.gif file here.

Other posts in this series:

1. Introduction
2. Setting up the coding environment
3. Create the chart
4. Add content
5. Conclusion

Part 4 – Add content

Now that we have the basic chart, it’s now time to add content to each box from the Site Map Content List. I could get all of the content of the list and then iterate through them for each node in the Site Map list, or I could write a short function that queried the Site Map Content list at the time I was drawing the node. Since my site map was small and I knew it wouldn’t get much larger, i chose the second option. It would not be hard to code the first option either.

I called this function GetContent and I place it outside of my $(document).ready() block.

function GetContent(LookupValue)
{
    var out='';
    var content, url;
    // use SPServices to query the Site Map Content list for all nodes that match the
    // LookupValue.  Grab the Title, Url, Position and SiteMapNode fields.
    $().SPServices({
        operation: 'GetListItems',
        listName: 'Site Map Content',
        async: false,
        CAMLViewFields: '',
        CAMLQuery: ''+LookupValue+'',
        completefunc: function(xData,Status){
            // When the response is received from the server,
            // create our content string by iterating
            // through each row returned in the response.
            $(xData.responseXML).find('[nodeName="z:row"]').each(function(){
                url='';
                content='';
                // if our string has already been started, add a new row to the response.
                if(out.length>0)
                    out+='
';
                content=$(this).attr('ows_Title');
                if($(this).attr('ows_Url')!=null)
                    content='' + content + '';
                // add the content string to the output.
                out += content;
            });
            // one requirement I had was to put the Node name at the bottom of the box.
            // The easiest way to do this is to add an empty paragraph and then the Lookup Value.
            // This is specific to my requirement so you don't have to do this.
            out+='
 
';
            out+= LookupValue.wrap('
(',')
');
        }
    });
    return out;
}

Now that we have the content string built, we can plug that function call into our existing code where we are drawing the boxes.

If you go back to the original function that drew the boxes, locate the lines that say:

boxContent=curTitle;

and replace the line with the following code snippet:

boxContent = GetContent(curTitle);

Your site map should now look like the following illustration.

As you can see, it looks quite different in IE than it does in Chrome. The reason behind this is the CSS that is used by Google to draw the boxes. In the last post, we’ll make some CSS changes to make it look better in IE.
 

Other posts in this series:

1. Introduction
2. Setting up the coding environment
3. Create the chart
4. Add content
5. Conclusion

Part 3 – Create the chart

In the first two posts, we created our lists and set up our development environment. In this part, we will use jQuery to query the Site Map list and create the Site Map hierarchy. If you haven’t completed the steps outlined in the first two parts, you should do that now. Links to the other posts in the series can be found at the end of this article.

Drawing Boxes

The first thing we are going to do is query our Site Map list and grab all of the list items. We will put all of the code in the document.ready block that we already prepared.

Copy and paste the following snippet of code into the page.

$().SPServices(
{
    operation: 'GetListItems',
    listName: 'Site Map',
    async: false,
    CAMLViewFields: '',
    CAMLQuery: '',
    completefunc: function(xData,Status){}
});

This snippet directs SPServices to use the GetListItems web service and query the list named, Site Map. It specifies that we want to see the following fields: Title, Parent and ID. It also says that we want to Order our data by Parent in ascending order. When we receive the return data, we want to pass that data, xData, to a function for further processing.

For more information on CAML and its syntax, you can find a great reference at http://msdn.microsoft.com/en-us/library/ms462365.aspx.

So far, our code doesn’t really do anything except fetch the data from our list. We need to parse the results and then format it so that the Google charting API can understand it. We will do this in the function(xData, Status){} block. Copy and paste the following snippet.

	//initialize variables
    var curParent='0';
    var testParent;
    var curTitle='';
    var curId='0';
    var parentId;
    var boxContent='';
    // create a new DataTable object that we will pass to the Google API
    var	data = new google.visualization.DataTable();
    // add the following columns to the DataTable to store the chart values.
    data.addColumn('string','Name');
    data.addColumn('string','Parent');
    data.addColumn('string','Tooltip');
    // SPSServices return the response data in the xData object.  It contains
    // the response in an XML document.  We can then use jQuery to find each
    // row of data in the XML file and act on it.
    $(xData.responseXML).find('[nodeName="z:row"]').each(function(){
        // if this node does not have a parent, then we need to save it to the DataTable
        // differently than the nodes with parents.
        if($(this).attr('ows_Parent')==null)
        {
	    curParent = $(this).attr('ows_ID');
	    curTitle = $(this).attr('ows_Title');
	    boxContent=curTitle;

            //   note the first field in the DataTable. the v:curParent and the
            //   f:boxContent are in the Name field.  The v: represents the Value
            //   while the f: represents the display field.  It may look like we're
            //   saving 4 values to a 3 field table but the first field has a
            //   value and display name part to it.

	    data.addRow([{v:curParent, f:boxContent},'',curTitle]);
        }
        else
        {
	    testParent = $(this).attr('ows_Parent');
	    curTitle = $(this).attr('ows_Title');
	    parentId = testParent.split(';#')[0];
	    curId = $(this).attr('ows_ID');
	    boxContent=curTitle;
	    if(parentId !=curParent)
	        curParent=parentId ;
	        data.addRow([{v:curId, f:boxContent},curParent,curTitle]);
	 }
    });

    // now send it to the Google Visualization API and store the results in 'chart'
    var chart = new google.visualization.OrgChart(document.getElementById('sitemap'));
    // render the HTML of the chart.
    chart.draw(data,{allowHtml:true});

If everything worked right, you should now have an OrgChart based on the values you placed in the Site Map list resembling Figure 1.

That’s promising! This is where it starts getting fun! In the next post, I’ll show you how to get the content for the individual boxes!

Other posts in this series:

1. Introduction
2. Setting up the coding environment
3. Create the chart
4. Add content
5. Conclusion

Part 2 – Setting up the coding environment

In the last post, we defined the requirement and the solution and then created the lists that will support it.  In this post, we will assemble all of the parts and set up the coding environment.  I will also show you how I organize supporting files when I develop SharePoint solutions.

Note: The structure I use to create client-side solutions using jQuery and the CEWP is the method and structure that I have adopted after trying various ways on various different projects.  I know others create Document Libraries to store their code and that is fine.  Some even put all of the code in the CEWP.  I normally have SharePoint Designer access so I choose to create Folders instead of Libraries.  If you don’t have SharePoint Designer access, you can create a Document Library to store your code or place it in the CEWP.

To host the org chart, we are going to use a Content Editor Web Part (CEWP).  Using this web part,  we can use HTML or JavaScript to create rich content.

1. Place a Content Editor Web Part (CEWP) into one of the web part zones.  Don’t worry about configuring it right now.
2. Open up your site in SharePoint Designer (SPD).
3. Create a new folder in the root of the site and name it Resources.
4. Create four new folders in the Resources folder named content, css, images, js.
5. For this exercise, we are going to use jQuery 1.6.2 and SPServices-0.6.2.
6. If you haven’t already done so, download the jQuery and SPServices libraries.
7. Place jquery-1.6.2.min.js and jquery.SPServices-0.6.2.min.js into the Resources/js folder you created on your site.
8. In the Resources/content folder, create a new file called SiteMap.js.
9. Open the SiteMap.js file for editing in SharePoint Designer (or any other text editor).
10. Use the following code block to set up your code page.

11. Go back to the page in your browser where you placed your CEWP.  Open the web part for modification and in the Content Link box, type the path of the SiteMap.js file.  The path to the file is relative to the site so normally, it would be resources/content/sitemap.js. Test your path to make sure.
12. Save your changes.

Other posts in this series:

1. Introduction
2. Setting up the coding environment
3. Create the chart
4. Add content
5. Conclusion

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:

Table 1 – Site Map List

Add the following content to the Site Map List

Table 2 – Site Map list content