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.
As displayed in IE
The structure is all there but it looks completely different in browsers such as Chrome.
As displayed in 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:
IE Final
Chrome Final
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:
- Introduction
- Setting up the coding environment
- Create the chart
- Add content
- Conclusion
Comments (0) 
A friend of mine, Cory VanDyke, works for Ricoh and asked me to spread the word about their SharePoint Roadshow that will be held at the Microsoft Seminar Facilities in Omaha on February 21, 2012. If you want more information on this, you can download the flyer here - Omaha Flyer 2-12-2012. Looks like a promising day of SharePoint goodness!
Themocracy