Shared JavaScript and CSS in Visual Studio SharePoint
Solutions
A SharePoint Developer tutorial by Jayant Rimza
 The
kalmstrom.com developers use shared code as much as possible.
Here Lead Developer Jayant Rimza explains how the shared
code is managed in the kalmstrom.com SharePoint Solutions.
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.
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.
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!
 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.
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:
- 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.
- 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.
- 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.
- '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.
|
