SPUtility.js

Installation

This requires access to upload documents into a document library and the possibly Design rights to the list/library you are adding SPUtility to.

Step 0: Download Prototype.js, SPUtility.js and SPUtility-example.js (hint: check out the Downloads tab)

Step 1: Upload prototype.js, SPUtility.js, and SPUtility-example.js to a Document library in your site

Step 2: Navigate to form (EditForm.aspx or NewForm.aspx)

In SharePoint 2010, you can choose Form Web Parts -> Default whatever Form.



In SharePoint 2007, you can just create/edit/view any item in the list to get to the right form.

Alternatively, navigate directly to the page using a direct URL. For example: https://example.sharepoint.com/Lists/Test%20List/NewForm.aspx
https://example.sharepoint.com/Lists/Test%20List/EditForm.aspx
https://example.sharepoint.com/Lists/Test%20List/DispForm.aspx

Step 3: Edit the page

Click Site Actions -> Edit Page.

If the Edit Page option is missing, use the ToolPaneView=2 URL parameter. For example, https://example.sharepoint.com/Lists/Test%20List/EditForm.aspx?ToolPaneView=2)

Step 4: Add a Content Editor Web Part to the page

Step 5: Edit the web part

In SharePoint 2010, click the arrow -> Edit Web Part.

In SharePoint 2007, click Edit -> Modify shared web part

Step 6: Edit the content editor's HTML to add some JavaScript

In SharePoint 2010, under Editing Tools -> Format Text click the HTML button -> Edit HTML Source

In SharePoint 2007, click Source Editor and paste in your code.

<script type="text/javascript" src="/Shared%20Documents/prototype.js"></script>
<script type="text/javascript" src="/Shared%20Documents/SPUtility.js"></script>
<script type="text/javascript" src="/Shared%20Documents/SPUtility-example.js"></script>

Step 7: You're done! Save the page / stop editing.

Now, when you go back to the form, it should set your Title field to "Hello world!". You can get started by just editing SPUtility-example.js in the document library (SharePoint Designer is handy for editing the file directly in SharePoint).

Don't forget to include Prototype.js and SPUtility.js on every page you need to use them on!

Alternative Installation Options

If you don't want to add a content editor to each form, you can also edit the pages using SharePoint Designer and include your scripts that way.

Advanced Options for Running SPUtility.js

After the whole page has loaded

You can use a SharePoint JavaScript function to run your code:

function MyCustomExecuteFunction()
{
    // your code here...
}
_spBodyOnLoadFunctionNames.push("MyCustomExecuteFunction");

Alternatively, you can use a Prototype.js feature to load your script when the page loads:

<script type="text/javascript">
Event.observe(window,'load',function(){
    // your code here...
});
</script>

Using either of the above methods will run your code once the whole page has finished loading.

After the Form as loaded

If you have a lot of JavaScript code, you may notice the page changing after it loads (as SPUtility works its magic). If you don't want users to see this, you can do the following:

1. Move your Content Editor Web Part below the form (it must be immediately below)
2. Put your code directly in between the script tags:

<script type="text/javascript">
// your code here...
</script>

This will force your JavaScript to run immediately. If you don't put the Content Editor below the form, the JavaScript will load before the form has loaded and you will get JavaScript errors.