Using SharePoint with the SPServices library provides an excellent way of using jQuery to read from a SharePoint lists using client-side code.
Using SharePoint with SPServices
SPServices is a great library for use with SharePoint.
I’ll show you a quick example of how we can use it to read from a SharePoint list as part of validating new or existing list items.
You will need to have a basic understanding of HTML, and browsing the DOM structure using the browser’s developer tools. You will also need to have a basic understanding of CAML query syntax and jQuery.
Example: Check for Duplicate Items with SPServices
When we want to add a new item to our SharePoint list, we want to ensure that it isn’t a duplicate. Coupled with this, we also want to make sure that when users edit a list item they don’t create a duplicate item too! So to do this we need to add some validation.
First you need to download and install a copy of SharePoint Designer.
Once installed, run it up and connect to your SharePoint site (you will need the appropriate permissions to do this). You will simply click ‘Open Site’ and enter the URL. As an example, if the URL for your list is:
You will open the site:
Once opened, click on Lists and Libraries. Then click on your list. Under the Forms section click on the form you wish to edit.
- NewForm.aspx is the form you see when you create a new entry.
- EditForm.aspx is the form you see when you edit a record.
- DispForm.aspx is usually the read-only form view of the record. We shouldn’t need to edit this for now.
In our example, we’d probably want to make changes to both the NewForm.aspx and the EditForm.aspx.
Select NewForm.aspx and put the SharePoint form into Advanced Mode.
Find the tag called
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server"> and just before its closing
</asp:Content> tag we can start adding the following code:
Firstly add a link to the external jQuery and SPServices libraries hosted on a CDN:
And below this we add the validation code – I have commented inline so you can understand the logic:
That should be pretty much it for our basic example, so save your form and try it out. You’ll also want to paste the same code into EditForm.aspx too.