Most of you have already worked with jQuery, if you have not shame on you.
I have worked with jQuery a lot the past years, client site scripting gives you more flexibility towards your customers.
The way you can manipulate the DOM is just great.

Many people find it hard to start with jQuery, the first step of the process is to get your jQuery into SharePoint.
There are several ways of doing this which I’ll be explaining to you in this post.

First we have to download jQuery  here. Just save it somewhere so that you know were it is.

The ways that I know to import jQuery into SharePoint are the following:

  • Put a reference into your MasterPage
  • Put a reference in your webpart or your layouts page
  • Load it programmatic
  • Through the content editor webpart
  • With a feature

1. Put a reference to Jquery

You can tell your webpart, layouts page and master page to load the script directly.
Keep in mind if you do this in the MasterPage then everywhere in your SharePoint the jQuery is loaded.

This technique is the most simple of loading the jQuery.
You have to open SharePoint designer for this, and open the site where you want to place the jQuery.

Next thing you have to select ‘all files’ and then catalog.

Jquery SPS 001

Next you have to select your MasterPage en select ‘Edit file in advanced Mode’

Jquery SPS 002

Next you will see the HTML and stuff of your MasterPage , there we can place a link to the jQuery file.
We can link directly to the jQuery site

Jquery SPS 004

or to our local JQuery file , stored somewhere in the layouts folder of SharePoint in this case

Jsurty local file system  master page linked to layouts folder

Next you just save and publish the masterpage and your are done.

And how do I know that it worked ????
If you open your IE explorer en type F12 which will open the development tools of IE, you’ll see a tab called scripts.

Jquery SPS script loaded from LAyouts folder

Jquery SPS script loaded with direct link

Told you it was simple.
This technique can be repeated for a VisualWebPart or a Layouts page.
I’m not gonna show because it is just copying the same script tags
2. Load the script programmatic

Personally I prefer this way.
Why?
It’s easy, it’s faster, no SharePoint designer, Visual Studio and so on

When you’re using jQuery you are going to develop something, so you’ll be using VS anyway.
So you can deploy the jQuery along with your solution.
I’m just gonna create a very simple webpart to demonstrate.
My Visual Studio project looks like this:

vs 001

I added a link to the SharePoint Layouts/1033 folder in my Visual Studio, then I added the jQuery file which I downloaded earlier in this folder in Visual Studio.
The reason I placed it there is because SharePoint also put it’s JavaScript files there.
Now let’s add this thing into our WebPart, but lets test this.
Lets create a simple “HelloWorld.js” that throws an alert when the page is loaded, and put this also in the 1033 folder.

vs 003

Then you deploy the webpart and add it to your page, now every time the page is loaded it will throw an alert.

vs 004

Using this techniques you do not have to open SharePoint designer every time you have to add a jQuery file.
To my point of view this techniques gives you way more flexibility.

3. Content Editor WebPart

This is the most simple technique there is.
Just edit the page add add a CEW.

Edit the webpart and just add this in the text:

// <![CDATA[
javascript” src=”http://code.jquery.com/jquery-1.11.0.min.js”&gt;
// ]]>

CEW

Click ‘ok’ and you are done.
I find this more unprofessional but it would do the trick, but there are risks to it.

4. Using a feature

This is also a very simple technique to load the general jQuery files into SharePoint.

Add to your solution a new Module.
Delete the txt file that comes with the Module, and change the content of the Element.xml file to look like this:

feature Jquery 001

In the screenshot you’ll see I have put the Module into a feature and that is it.
Go to your feature in SharePoint and activate

feature Jquery 002

You can test with the development tools to check if the feature is deactivated and deactivated.

Hope it helps.

Leave a comment

Cheers

Serveral times I had opened a project developed for SharePoint 2010 and I needed to make some changes for instance to make it work in Sharepoint 2013.

When you open it you will receive some problems regarding your dll references, what the hell ???

The solution for this is to make some changes in the xxx.proj file.

I was able to get my solution upgraded from a 2010 project to 2013 using the following.

Note that this will update your solution to use the new 2013 API.
First edit your .csproj file (for c#).

Modify the target framework to this:

<TargetFrameworkVersion>v4.5</TargetFrameworkVersion>

Add this a node for the office version, I put mine directly below the TargetFrameworkVersion tag

<TargetOfficeVersion>15.0</TargetOfficeVersion>

Update references
Reload the project and update your referenced assemblies.
If you haven’t specified a specific version they should already be referencing the v15 (SharePoint 2013) assemblies.

Do a find replace for 14.0.0.0 to 15.0.0.0. This updates any references on your pages, layouts, and master pages to the v15 assemblies.

Hope it helps !

This is something I created in 2007 but it is still usefull for 2010

image
First you need to set up your base project. If you don’t know how check out the other Blog. You just create a new C# ClassLibrary and add the necessary folder, they should look like your 12 folder of SharePoint

It should something like this. Add two XML files underneath the folder, like showed here above. To The feature XML add the following code

<Feature xmlns="http://schemas.microsoft.com/sharepoint/"
         Id="{EE6D9774-8EA7-42c6-B949-D8B398A4654A}"
         Description="Site Iformation tool"
         Title="Site Information"
         Scope="Farm"
         ImageUrl="BLOGPREV.PNG"
         >
    <ElementManifests>
        <ElementManifest Location="elements.xml"/>
    </ElementManifests>
</Feature>

Let me explain the code:

  • The first line give an ID to your feature which is logic, cause every feature needs to have an unique ID.
  • Title , where you define the Title of your feature.
  • Description , you give a description to your feature.
  • Version, if you want to apply versioning on your feature.
  • Hidden, this can have two value “TRUE” or “FALSE”, is you set the value to “TRUIE” you will not be able to see the feature in your ‘Site Feature’ on your website.
  • Scope, this can have four values site,Farm ,WebAplications,Site and Web, this value will determine on which level your will deploy your feature.
  • ElementManifest ,within these brackets you will add certain files to your feature, it define the elements of your feature, a feature can be ANYTHING, a workflow, a menu an list, a custom field ,…

To The element XML add the following code

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <CustomActionGroup
        Id="ExtraAdminOptions"
        Title ="Extra Admin Options"
        Sequence="1000"
        Location="Microsoft.SharePoint.SiteSettings"
        >
        </CustomActionGroup>
    <CustomAction
        Id="ExtraSiteInformation"
        Title="Extra Site Information"
        GroupId="ExtraAdminOptions"
        Location="Microsoft.SharePoint.SiteSettings"
        Sequence="1"
        >
        <UrlAction Url="/_layouts/SITEINFORMATION/SiteInformation.aspx"/>
            </CustomAction>
</Elements>

Let me explain the code:

  • CustomActionGroup, here you define a group to which your action belongs to.
  • Id= Each group needs to have an ID.
  • Location=”Microsoft.SharePoint.SiteSettings” , this is where your group is located
  • CustomAction, you you see that you are going to add a new action group to your site
  • ID , every action needs to have an ID
  • Description, add a description
  • Title, you can give a title to your custom action
  • GroupID, this is actually the most important property. Where you are going to define where your ‘Action’ will be added. In our case it’s the name of the group we have created.
  • ImageUrl, here you can define which icon you’ll see before your feature.This is sorted also in the virtual file system,you can use your explorer to go your 12 folder, and check in the map “_layouts/images” there you’ll find all the images that are used within SharePoint , you can paste your images in there, although here I just use a standard one and paste in my, which is not needed BUT recommended.
  • UrlAction , where you define the action of your feature, I think if you click on your feature you want something to happen, in his case our link will go to the SiteInformation.aspx, which is a custom page, but you an like it to everywhere.

NOTE : The location is in our case “Microsoft.SharePoint.SiteSettings”, if your groudId is different your location can be Different. You can check these thing in your virtual file system. Or you can visit this site SharePoint Custom Action Identifiers.
I hope this blog was usefully, if so please spread the word.