Jquery in SharePoint


Published: 4th March 2017

In this post, you will learn basics of Jquery and how to use Jquery in SharePoint to customize the list forms. This is a first part of the series on client side development in SharePoint, i will be adding more example related to Jquery in SharePoint in the upcoming posts. When I started learning Jquery, I wasn't sure where to start, how to start and what are the things required to learn and master Jquery. I would like to provide the details which will make it easier for you to start with Jquery in SharePoint. I do not want you to struggle like me :).

Lets get started with a  basic question, Why do you need to learn JQuery? or why you wanted to be good or awesome at client side development?.

If you have worked with previous versions of SharePoint, we have different approach while building the applications but now with SharePoint Online (Office 365) or even on SharePoint on-premises, you need to learn how to develop a solution using client side becomes critical due to nature how SharePoint Online works. Now the question is how you should learn it?

The first step towards your journey to master client side development, you need to learn Jquery or JavaScript. If you know the HTML and CSS then learning JQuery becomes easier.  

If you know some of the things CSS then those things are same  in Jquery. In this post we will be answering some the common questions you might have.

What are the different options you have to get started with JQuery? 

How to customize the list forms using JQuery. 

Now we have both the traditional and new sites, so we will where JQuery works and doesn't work. 

What options we have while working with new modern sites etc.  

In this post, we will also see how to debug issues with JQuery.  

 What is JQuery:

If you have ever visited Jquery.com, it says write less and do more. The reason is JQuery is library behind the scenes it is JavaScript. 

We just made a library with a set of standard functions that was written. 

If you know JavaScript, learning JQuery will be easier. I would recommend if you don't know JavaScript, please learn it. 

What is all about  $ symbol ?

You will see the dollar $ symbol everywhere whenever you try to write scripts. $ Symbol is equivalent of jQuery, so instead of writing each and every time jQuery in the script we can only use $ symbol.

// $ symbol is equivalent of jQuery

jQuery () = $()

While writing the functions you can simply specify $ ().

Basic Idea of JQuery:

Whenever you are learning something, it’s important to learn what is the basic idea behind that. 

If you know the basic idea, then learning any concept will be easier to you. Here also the same thing applies if you wanted to learn JQuery. 

Do not worry about what is being shown in the screen below. What is this $ symbol, or “.” You will understand these very soon, at least in next paragraph. 

So what is the basic idea behind the JQuery? If you have any page or a website you are going to select something from the page, this can be anything, it can be textbox, or label or navigation menu. Like I said it could be anything, you are going to select something. 

Once you select something, then you will do something.  

$(document). ready ( function (){

$(".myclass").hide();

});

you select something and do something.  

In this case, I am trying to select all elements that match article, and I am hiding. I might change the color of text, or I might change the background color, or I might show the details or I might change the font, this can be anything.  So the first thing would be I need is to select something on a particular page and perform something. 

 You might have seen a lot of complex applications where the JQuery was written. It is always does the same thing.  

Do you need to learn HTML and CSS?

I would say yes, you need to know the HTML and CSS. If you don't know these things, then you need to learn it, you may ask why? JQuery is about manipulating the elements on your page.  So the page that you have uses the HTML, and why I am taking about the CSS, some of the things that you have in CSS are very much similar to what you have in JQuery. So if you know the the HTML and CSS then learning JQuery get easier. Do not worry if you do not know HTML and CSS I will teach you some of the basics of HTML and CSS, which will help you get started with these. Later on, you explore more on that, with that intro lets explore what HTML is?

 HTML?

Set of elements or tags which will instruct the browser on how to show the contents in the browser.

If you take the analogy, then these HTML tags are similar to your sandwich. I think you might have eat sandwich one or other time even if you don't you know how it looks like.   

If you look at the top portion of Sandwich, it’s a top bread and treats that as a <h1> tag. This can be any other tag like paragraph or div tag.  The bottom bread you can treat it as a closed </h1> tag.  The middle section is the content where you want to display this to the user. 

These tags will give instruction to the browser how the content between the tags need to be displayed.  If you use the h1 tags, then the content shows differently, if you use h2 of p for paragraph then the content displayed in the browser will be different.  

You can the see the image below, this is how the content will be displayed in the browser.  

CSS Selectors: 

What is CSS selectors? Why these CSS selectors are important when you are working or learning Jquery.  The CSS nothing but cascade style sheets. There are different types of selectors in CSS. The first is name selectors. So what is a name selector?

Name Selector: 

The below code represents change all the content inside the <h2> tags in the HTML to red color. 

Once I apply the CSS, the content on your browser will change to a red color as shown below.  These selectors we call it as name selectors, it works based on the name of HTML tags. 

There are few more selectors available in CSS, the next one I want to discuss here is ID selector.  So what is ID selector.  

ID Selector: 

Each HTML element has an attribute called ID. In the example below, we have Id called "demo". We use # symbol to denote the Id of an element.   

What is an attribute? Attribute changes the behavior of an element.  

The below code represents whatever the element with an Id demo will change the background color to blue.  

You can see the background color of the text below got modified to blue. 

Class Selector: 

The last selector, I wanted to discuss here Class selector. This selector works based on the CSS class name applied to the element. . symbol will be used to create the class selectors.  

Once I apply the class selectors all the elements in the page uses the .myclass CSS class will get the background color as green. 

There are lot more selectors in CSS if you wanted to explore, please go-ahead and explore it but these are the basic ones we can use.  


The below video explain how the CSS selectors work.  

 

You can down the videos on JQuery in SharePoint by clicking the image link below and watch it offline.

Tools: 

Below are the basic tools required to start learning it:

  1. Text editor (note pad or notepad++) : To write the script.
  2. Browser (Internet explorer, Mozilla, Google Chrome, etc.) : To test  what you have written.
  3. jQuery library : which will reduce the code to be written to achieve the required functionality.
  4. Web Server : If you are going for web development this is required. It can be on your local machine also.

If you have a machine, by default you will have a note pad (Text editor) and browser. The web server can be an IIS (Internet Information server).

From where do we get library?

You can go to www.jQuery.com , click on download and get the latest version either production or development.

Difference between Production and developer version:

  • Production version improves the performance by deleting the unwanted spaces.
  • Developer version is to explore more of what is inside the library.

Getting started with JQuery in SharePoint: 

Finally, we are here, this is what we wanted to learn when you started reading this post. Let's look at how to get started with JQuery.  

When you wanted to get started with Jquery, it might be SharePoint or any other web technology the approach will be same. You will be downloading the Jquery library from Jquery.com and refer that library on the page or a website you will be working on.  This works well, but SharePoint is little bit different in terms of options you have in terms of how you could refer the Jquery.  

You can add Jquery reference directly on to   

  • Individual Page  
  • To the Master Page 
  • Page Layout   

While working with JQuery you might have heard about document.ready function, so what is this all about. You might have seen the below code in a lot of places. This is important code when you are working with JQuery.  

 

$(document). ready ( function (){

});

What this code does is, it will delay the execution of your until all the elements in the page got loaded.  

Using JQuery, remember you need to make changes to the elements on the page, so if you want to make changes to the page, you need to wait till all the elements got loaded before your code got execute.  

See the below video on what happens if you do not have document.ready function while working with JQuery.  

 

You can down the videos on JQuery in SharePoint by clicking the image link below and watch it offline.

Customize SharePoint List Forms:   

One of the main areas where you use jQuery is customized the list forms in SharePoint. Creating SharePoint list forms is easy because as soon you create the list with the set of the fields the forms will be ready.   

What kind of customizations you do while working with the forms.  

  • You might want to hide some of the fields  
  • You might want to make the fields read-only   
  • You might want to show some of the fields based on value selection from other fields.   
  • You might want to perform validations on the fields.  

This is not an exhaustive list,  you could be doing lot more things while working with customization list forms.  

Using Jquery, you can make changes the list forms. How can you do that? You need to learn JQuery selectors. Now the question is what is JQuery selectors?

JQuery Selector: 

JQuery selectors are similar to CSS selectors. Here we have class selector. 

 Class selector:  

Below are the examples of class selectors

// Slide up all the elements that are memebrs of CSS class class

Example : $(".class").Slideup();

.class is a class element in CSS

Below one is the similar example of CSS class selector

CSS Class selector:

.class{

display:block;

}

Name Selector:  

// Shows the all the P elements in the page

Example : $("p").show();

// P is a paragraph element in CSS

Below one is the similar example of CSS Name selector

// CSS element selector:

P {

Text - color:#000000;

}

Id Selector:  

// Adds text "hello" to the ID selector

Example : $("#message").text("Hello");

#message is a ID element in CSS

Below one is the similar example of CSS ID selector

CSS ID selector:

#message{

color:#FF0000;

}

These are the common selectors that you use when working with JQuery. There are few more selectors that will be more useful while working on JQuery in SharePoint. These selectors are attribute selectors.  

What is Attribute here, an attribute can change the behavior of an element. Within your HTML there can different attribute like Title, id etc. 

Attribute selector

$("[Id='foo']") ; //Equals to

Here Id is an attribute of an element. This selects an element which has an attribute Id is equal to foo.   

Even though the Jquery is JavaScript but while using comparison for selecting the elements we use only "=" instead of using "==".  

Attribute selector

$("[Id!='foo']") ; //Not Equals to

Below selector is my favorite selector while working with SharePoint List forms customization.

Attribute selector

$("[Id^='foo']") ; //Starts with

There are couple more selectors i use it rarely, but there are lot more selectors if you go to Jquery.com website you find all these with examples under documentation section.

Attribute selector

$("[Id$='foo']") ; //Ends with

Attribute selector

$("[Id*='foo']") ; //Contains

Check the video below on explaining how to use JQuery to customize the list forms.

 

You can down the videos on JQuery in SharePoint by clicking the image link below and watch it offline.

The approach you have see works very well in traditional SharePoint sites but not in the modern websites. In case of modern website you need to use Power Apps to customize the SharePoint List forms.

I hope in this post you are able to understand the basic concepts of the Jquery and how you can customize the list forms using Jquery. 

In the next post we will discuss about what are the options we have for deploying the script files in SharePoint and what is the best approach. I will be taking few examples and explains these things.

Your Turn

Are you using Jquery in your Projects? If yes then let me know what are the different customization you are able to implement using Jquery. 

Do you have a specific question on client side development. Leave a comment below.

About Author

Devendra Velegandla is a four-time recipient of Microsoft's Most Valuable Professional (MVP) award (2014-2017) for Office Servers and Services MVP and  SharePoint Server.He received the MCC award for his contributions in Microsoft MSDN/TechNet forums.He loves sharing articles, videos and tutorial on SharePoint and Office 365.


If you found this post helpful, please share with your friends!!


Join 6,000 subscribers and receive instant access to

Devendra's Library of Resources for SharePoint Developers