The steps below are targeted towards installing the jQuery version of SPUtility on a SharePoint site.
SharePoint 2013 Note: SPUtility.js will not work with Minimal Download Strategy (MDS) enabled in SharePoint 2013 (if you see start.aspx it is currently enabled). To disable, go to Site Settings -> Manage Site Features -> Deactivate Minimal Download Strategy.
For more troubleshooting information see Troubleshooting
Step 1: Download jQuery. Version 1.x is recommend for maximum browser compatibility.
Step 2: Download sputility.min.js. For development, you can use sputility.js instead (uncompressed version for easier debugging).
Step 3: Upload both files into a document library in your SharePoint site.
Step 4: Create a new HTML file with your SPUtility.js script. For example, helloworld.html and upload that to your document library as well.
Step 5: Navigate to the list form you want to modify. In the ribbon, click on List then Form Web Parts and choose the form you want to edit (ex: New Form, Edit Form).
Step 6: Add a Content Editor web part to the page.
Step 7: Edit Content Editor's web part properties:
- For Content Link, paste in the URL to your HTML file. Ex: /kitsite/Files/helloworld.html
- Under the Appearance section, you will probably also want to set Chrome Type to None so your end users won't see an empty web part.
Step 8: Click the OK button and then click Stop Editing in the ribbon. You're done!
Note: +Do NOT click the Apply button+, you must click the OK button!
You should now be able to go back into your form and see "Hello World" populated
Step 1-3: Steps are the same as above
Step 4: Navigate to form (EditForm.aspx or NewForm.aspx)
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 5: 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 6: Add a Content Editor Web Part to the page
Step 7: Edit the web part. Click Edit -> Modify shared web part
Step 8: Edit the content editor's HTML to add some JavaScript. Click Source Editor and paste in your code. For example, you can paste the contents of helloworld.html into your content editor.
Step 9: You're done! Save the page / stop editing.
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. This is not recommended unless you are already customizing the page for a different reason.
You can use a SharePoint JavaScript function to run your code: {{ function MyCustomExecuteFunction() { // your code here... } _spBodyOnLoadFunctionNames.push("MyCustomExecuteFunction"); }}
You can use jQuery to wait until the entire page has loaded: {{ $(window).load(function () { // your code here... }); }}
A slightly faster option, is using $(document).ready(..). This executes as soon as the DOM is ready (before the window loads). http://learn.jquery.com/using-jquery-core/document-ready/. {{ $(document).ready(function() { // your code here... }); }}
This is the fastest and most advanced method.
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:
{{
<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.