What's The (Share)Point?

jQuery – .SPServices – Google.OrgChart API Mashup – Part 2

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.
  1. 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.
  2. Save your changes.
Your environment is now set up.  I showed you how I prefer to set up my solution and explained how others have accomplished the same task.  The point to remember is that creating these types of solutions are simple and flexible. In the next post, we will start coding our solution.

Other posts in this series:

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

David Petersen

,
, , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *