SPUtility.js SharePoint 2013 tutorial and Examples

by

In this SharePoint 2013 tutorial I will explain to you how to use effectively SPUtility.js in SharePoint 2013. How you can make SharePoint list columns or fields read-only, hidden in a new form or edit form in SharePoint 2013 list.

What is SPUtility.js in SharePoint 2013?

What is SPUtility.js in SharePoint 2013? SPUtility.js is a JavaScript library which can be used to make modifications to SharePoint’s list forms like NewForm.aspx, EditForm.aspx or DispForm.aspx. The list can be a custom list, task list, survey list or library etc.

This works for SharePoint versions like MOSS 2007, SharePoint 2010, SharePoint 2013, SharePoint Online or Office 365.

Some key feature of this .js file is that we can achieve a few things like:

  • We can set or get field values from a list or document library.
  • Make a field read-only or hide fields from the view etc.

But this will not work for external list forms.

Download and Install SPUtility.js in SharePoint 2013/Online

To work with SPUtility, we have to give reference of the jQuery and SPUtility.min.js in our form. So fo,r this we can download jQuery and SPUtility.min.js and upload into a document library like Site Assets from where we can give the reference.

Different ways to add SPUtility.js code in SharePoint 2013

You can put the code in the page itself if you have access or you can put the code in a content editor web part or inside a script editor web part. Below are some approaches to use:

Approach-1:

<script type=”text/javascript”>
function MyCustomExecuteFunction()
{
// our sputility js code will go here
}
_spBodyOnLoadFunctionNames.push(“MyCustomExecuteFunction”);
</script>

Approach-2:

By using jQuery approach we can call like below:

$(document).ready(function() {

// our sputility js code will go here
});

Approach-3:

We can use on button click through jQuery:

$(document).ready(function() {
$(#btnClick).click(function(){
// our sputility js code will go here
});

});

SPUtility.js Examples in SharePoint 2013

Here I will show a few examples of what you can do using SPUtility.js in SharePoint 2013/Online.

sputility set field value (set default value in SharePoint list column)

Here is an example where we are setting default value in a SharePoint 2013 list form. Here the list has 3  columns like Title, FirstName, and LastName. Below is the approach you can set default value in the SharePoint list form.

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>
<script src=”http://SiteURL/SiteAssets/Bijay/sputility_min.js”></script>

<script>
$(document).ready(function(){
SPUtility.GetSPField(‘Title’).SetValue(‘My Title’);
SPUtility.GetSPField(‘FirstName’).SetValue(‘My First Name’);
SPUtility.GetSPField(‘LastName’).SetValue(‘My Last Name’);
});
</script>

As a result, it will appear like below:

SPUtility js SharePoint 2013 tutorial
SPUtility js SharePoint 2013 tutorial

SharePoint show hide fields dynamically using SPUtility.js

Similarly, if you want to hide or show SharePoint list columns or fields then you can write like below:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>
<script src=”http://SiteURL/SiteAssets/Bijay/sputility_min.js”></script>

<script>
$(document).ready(function(){
SPUtility.GetSPField(‘Title’).Hide();
SPUtility.GetSPField(‘Title’).Show();
});
</script>

SharePoint make column read only using SPUtility.js

We can easily make SharePoint columns read-only using SPUtility.js. You can make field read-only in edit form or in new form using SPUtility.js. Below the example, you can see I have made DateOfJoining column read-only.

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>
<script src=”http://SiteURL/SiteAssets/Bijay/sputility_min.js”></script>

<script>
$(document).ready(function(){
SPUtility.GetSPField(‘DateOfJoining’).MakeReadOnly();
});
</script>

You may like following SharePoint tutorials

Conclusion

In this SharePoint SPUtility.js tutorial, we discussed how we can use SPUtility.js file in SharePoint 2013/Online. Also, I explained how to show hide fields dynamically using SPUtility.js and how to make column read-only using SPUtility.js in list edit form or new form in SharePoint 2013 or SharePoint Online.

    • >