Copy JS Files to Library Using Module in SharePoint 2010

Often in SharePoint Projects we need to copy our JS / CSS / IMAGE files into a SharePoint Library. We can do that using Visual Studio Modules and package in a WSP.

Modules

Modules are containers of files. We can use Modules to deploy files using a WSP file.

Scenario

We are trying to deploy a JS file into an existing library.

Steps

Use the following procedure to do the deployment.

Step 1: Create new project

Create a new project and name it ModuleTest.

Choose the farm solution option.

 

Step 2: Add Module

In the Solution Explorer select "Add New Item" > "Module".

 

Enter the name of the module as ModuleName for ease of understanding.

You will get the following module inside the Solution Explorer.

 

Please note that there are the following 2 items inside a Module:

1. Elements.xml that contains information on files to be deployed
2. Sample.txt that is a dummy file to be deployed

Step 3: Add JS file

Right-click on the Module and add a new file. Name it My.js.

You can also delete the sample.txt file. Now your Solution Explorer looks like the following:

 

Step 4: Modify Elements.xml

We need to modify the Elements.xml now. The following is the current contents.

 

Please note that the Module contains an inner node for the file. We can have multiple files deployed using this tag.

The path of the file element shows the file path in the solution. Url denotes the destination location after deployment.

In our case we need to change the destination to an existing library name. Please make the following changes.

 

We added the Url tag at the Module level to specify the library name. Specifying the Type as Ghostable In the Library ensures the file will be available for check in check out operations.

Step 5: Create Library

Create a library named Documents inside the SharePoint site.

 

Step 6: Deploy

Right-click on the Solution Explorer and click the Deploy option.

 

Step 7: Test

Now we are ready to test the existence of the file in the library. Open SharePoint and Navigate to the library.

You can see a new folder name has been created.

 

Inside the folder you can find the file.

 

 

 

If the library name is invalid, you will get a deployment error.

How to copy to a new library?

To copy to a new library, I suggest adding a library to the solution and ensure the library is being deployed first. Then the module deployment should reach the correct library.

References

1. Using Modules to Include Files in the Solution
2. SharePoint– Ghostable and GhostableInLibrary

Summary

In this article we explored how to deploy JS files using modules. The same knowledge can be used in deploying CSS/HTML/Image files.