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