Adding a code snippet to page content on SharePoint 2013
Note: this post is written specifically for SharePoint 2013.
Sometimes it is necessary to add a snippet of code to just one page. Examples could be:
- Alternative CSS for just that page, i.e. to style a specific element
- Add a piece of CSS to hide the left navigation on specific pages
- Add the Open In Explorer Link to a page
There are technically a number of ways to achieve this:
- Paste the code directly into the page contents (does not work)
- Paste the code into the the HTML source of the Content Editor Web Part (can work, depending on SP version and code)
- Use the Embed command (can work, situational)
- Save the code in a text file, save it somewhere on your SharePoint site collection and call the text file via the Content Editor Webpart (my preferred method)
Option #4 is my favorite for a number of good reasons:
- You can save the code centrally and then call it from multiple places without needing to replicate it
- By saving it centrally, you only need to update it once if there are changes or updates
- By saving it in the content database, you can access it from SharePoint Designer or similar, meaning you do not need to keep downloading-updating-uploading
- It works consistently across all versions of SharePoint from SharePoint 2007 up to Office 365
<p>All right reserved © <script> var cur = 2010; var year = new Date(); if(cur == year.getFullYear()) year = year.getFullYear(); else year = cur + ' - ' + year.getFullYear(); document.write(year); </script> </p>
Option 1: Paste the code directly into the page content
You can paste the code directly into the page content.
However, once you save the page and view it, you will see that SharePoint does not realize that it is code it needs to render in some way.
Conclusion: do not place code directly in the page content as it does not work.
Option 2: Edit source in rich text area / CEWP
In most content editor webparts and all rich text areas, there is a button in the ribbon called “Edit source”. This is great for quick fixes when content has gotten out of hand. In older versions of SharePoint, you could also use it to embed extra code.
You can easily paste your code straight into the Edit HTML window.
However, once you save, SharePoint lets you know that the code that it does not approve of has been stripped.
In this case, some of the embedded code has been stripped out.
Sometimes SharePoint will strip out all of it and sometimes it will only strip out parts which can cause an odd result. When it doubt, check back into the HTML source to see what has happened with your code and if it is still 100% intact.
Conclusion: while this used to work under some older SharePoint versions, it is generally not a reliable solution for SharePoint 2013.
Option #3: Using the Embed command
SharePoint 2013 includes an Embed command in the ribbon which can be great for adding code snippets to your page:
After clicking the command, you are prompted to insert your code and given a preview:
SharePoint creates a Script Editor webpart on the page for you. It even includes an “Edit Snippet” button, so you can go back and edit the code later.
Conclusion: in my experience, this works but is dependent on the complexity of the code. Test well before using.
Option 4: save as a text file, call via CEWP
Here is the file in Notepad++:
In this demo, I uploaded the HTML file to the document library on the same site as the page we are working with.
Tip: I tend to use the following rules of thumb as to where to upload these kinds of files:
- Think about if you want to save it in the standard Document library, or if you want to create a dedicated document library called “Scripts” or similar
- If the file will be called from just one single site, save it on the site
- if the file will be used across just one site collection, consider saving it at the root of the site collection or in the Style Library of that site collection (i.e. Styles/Scripts)
- If using across multiple site collections, choose the most logical place for it, i.e. on a root site collection
Next, place a Content Editor Web Part (CEWP) on the page and edit the webpart settings. At the top, add the link to the file and click “Apply” to save the changes.
The content should immediately display in the CEWP on the page.
Tip: if you wish to use the same webpart in many places, you could export the configured CEWP and import it as a custom webpart. You can then place it on a page and it will already be configured for you.
Conclusion: this is my favorite method due to the central storage of the files, ease of editing the files and reusability.
Great article. Thanks so much Hannah.
Thanks! I’m glad you found it useful! :)
You just helped me understand sharepoint a little bit better. So thank you !
Awesome, I’m so glad to hear that! :)
Great article, im trying to make a shortcut to the open with explorer button with method 3 using the code
Open with Explorer
Inside the embed code window it works but when you save it gets converted to
Open with Explorer
I was going to try method 4 the reusable method you described but wasnt sure if this would be applicable for what im trying to acheieve
Hi Jared! Option #4 is definitely the best, as you can control the link better. You’ll see it’s also the approach I used when configuring the solution on https://sharepoint.hannahswain.eu/2013/04/26/using-the-open-in-explorer-link-on-sharepoint-2013/. Good luck!
This isn’t actually junk, in my opinion – it’s a security measure. Admittedly, the behavior has changed a bit from version to version of SharePoint.
As for why your code isn’t working… the only thing I can think of is to test the code outside of SharePoint in pure HTML. Good luck!
In my office 360 E3 trial version license the option of content editor is not visible
This might solve your problem:
Thank you HANNAH for the article.
I have tried option #3 with embedded web part and it didn’t work for SharePoint 2013. I copied the script from your blog exactly into the snippet editor. It only worked as a code snippet because the tag was html escaped. However when I put actual tag, it worked fine exactly as you described. Just wanted to contribute this subtle point.
I also subscribed for your blog as I find it very interesting.
This was perfect, so simple to understand. Thank you! Do you know of a style code that works to set the backgrounds of the content editors to transparent? We aren’t allowed to use designer, so adding code in the script editors is the only way for us to make custom pages. Thanks again!
Hi! I’ve used the content web part for adding a script that sets different background colors for the records in a list (web part). That works when opening the list (the page) because then the content web part is read. However, when sorting or searching in the list the content web part is no longer in action and thereby the background colors disappear. How can I make sure the script is considered also after sorting or searching in the list? Would you know?
Hi Martin! My first thought is to wonder if the sorting and filtering are using a different page which doesn’t include the cewp. Beyond that, I’m not sure.
Hi. Thanks for replying so fast. The url changes with information related to what column has been sorted etc. By that it’s a different page but there’s no way to edit that page. My thought was to either call the script from the list web part and thereby considered no matter what is done regarding sorting or filtering, or somehow make sure the content web part is considered everytime. None of them seem to work out though.
It’s okay if the arguments on the url change, as long as you are still on the same page.
$Text = $(“td .ms-vb2:contains(‘Open’)”);
$Text = $(“td .ms-vb2:contains(‘Closed’)”);
Ok, then I know. Thanks anyway!
Thank you so much this is just what I was after! Solved a problem I have been mulling over for weeks!
Thanks so much for letting me know – I really appreciate it!
Do we have the same for SharePoint 2010