Visual Studio SharePoint Solutions With Shared JavaScript and CSS

Part of the kalmstrom.com code is used in several solutions, and our Lead Developer Jayant Rimza makes sure that this shared code is managed in the correct way. Today Jayant will share some of his knowledge and explain how the shared code is managed in the kalmstrom.com SharePoint Solutions.

Create shared code
When you develop SharePoint solutions, especially sandboxed solutions or apps, you write lots of code in JavaScript and design pages with CSS. In such cases it is always a good practice to create shared code for common tasks instead of writing repetitive code or copy from old projects.

Attach to VS
It is also advisable to attach JQuery or other JavaScript or CSS libraries to your SharePoint Visual Studio solution. The advantage of attaching JQuery or other libraries is that if you update a file at the Master location, it gets updated in all your projects. There is no need to replace files in all projects manually.

Reliable development
Here at kalmstrom.com we always focus on good shared libraries that give fast and reliable development. As we develop standard solutions, we know that if we do it wrong the first time, we will have to go back and fix it later (at our own expense). Thus we need to always do it right from the beginning!

Add to VS as link
For a Visual Studio solution you can also add an existing file as a link. That will solve the update issue, as you only have to change that file to get all projects updated. However, a in a Visual Studio SharePoint solution files are not deployed in the SharePoint site.

Step by step
Adding managed code projects or files into a SharePoint file is not a problem, but when you are adding non-managed code, shared JavaScript files or CSS files via “add as link” to your SharePoint solution, you need to do it in a few steps. This is the process:

Add to folder or project
Place the shared JavaScript or CSS files in a folder. It can be any folder from which files should be accessible for other projects. If you are using TFS (Team Foundation Server), you can create a new project and add files into it.

Add existing item
Open your Visual Studio SharePoint solution and add a new module or use an existing one.

Right click on the module or on a folder inside the module where you want to keep your shared files. In the right click menu, select “Add” and “Existing Item".

Add As Link
In the bottom right corner of the Existing Item dialog, you will see an option to add a file. In the dropdown, select the option “Add As Link”. Do not add a file with the “Add” option, because it will make a copy of the original file in your solution.

Set deployment path
Now you need to set a deployment path into SharePoint for the file you added as a link, because when you add a file as a link it does not set the SharePoint deployment path automatically (even if Visual Studio does it automatically for you in other cases). The deployment path is an actual path where the SharePoint solution will be deployed on a SharePoint site.

To set the deployment path, select the file and go to its properties window (F4). In the properties window you will find a section named “Deployment Location”. Expand it and set the “Path” property. I would suggest the current SharePoint module path, to avoid later confusion.

After setting this path, you will find the shared file in the SharePoint deployed folder, and you can always use the deployment path to register your JavaScript or CSS files.

SharePoint Developer Tips
This information about shared code is also published in the kalmstrom.com Tips section, where SharePoint developers also can find two earlier developer tips. I hope you will find them useful!
Jayant Rimza
Lead Developer
kalmstrom.com Business Solutions