The steps below are targeted towards installing the jQuery version of SPUtility on a SharePoint site.
SharePoint 2010 / 2013 / SharePoint Online (Office 365)
. Version 1.x is recommend for maximum browser compatibility.Step 2:
. 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.
Click OK and then click Stop Editing in the ribbon. You're done!
You should now be able to go back into your form and see "Hello World" populated
Step 1-3: Steps are the same as aboveStep 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
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 pageStep 7:
Edit the web part. Click Edit -> Modify shared web partStep 8:
into your content editor.Step 9:
You're done! Save the page / stop editing.
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. This is not recommended unless you are already customizing the page for a different reason.
Advanced Options for Running SPUtility.js
After the whole page has loaded
// your code here...
Using either of the above methods will run your code once the whole page has finished loading.
After the Form as loaded
- Move your Content Editor Web Part below the form (it must be immediately below)
- Put your code directly in between the script tags:
// your code here...