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.
- Place a Content Editor Web Part (CEWP) into one of the web part zones. Don’t worry about configuring it right now.
- Open up your site in SharePoint Designer (SPD).
- Create a new folder in the root of the site and name it Resources.
- Create four new folders in the Resources folder named content, css, images, js.
- For this exercise, we are going to use jQuery 1.6.2 and SPServices-0.6.2.
- If you haven’t already done so, download the jQuery and SPServices libraries.
- 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.
- In the Resources/content folder, create a new file called SiteMap.js.
- Open the SiteMap.js file for editing in SharePoint Designer (or any other text editor).
- Use the following code block to set up your code page.
- 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.
- Save your changes.
Other posts in this series: