SharePoint 2013: How to Add JavaScript to Format Content on your Page

In this example, I am taking a look at changing the default text that comes with a Discussion List in a SharePoint 2013 page for a new Community site collection. The Discussion list in SharePoint comes pre-packaged with a number of controls, including a hyperlink at the top that is used to add a new discussion. Naturally I wanted to customize the text to be more tailored to the content of the new page, and this included updating the text for the Add Discussion hyperlink.

So in this case I was wondering: what’s the simplest way to customize text for SharePoint controls on a Web page?

Setting up the SharePoint Page

The first step is to add the Web Part (i.e.: the Discussion List) to one of your SharePoint pages. As I mentioned above, part of the package generated from adding a Discussion List includes getting a clickable link at the top of the list with the text saying: Add Discussion

After adding the Discussion to the site page, my next question was naturally: how is one supposed to change this text to something more tailored to the purpose of the site?

The surprising answer was that the only clear way to update text in a SharePoint control on a Web page is to add JavaScript to the page that will do the job. Easier said than done… my next question was: how does one add JavaScript to a SharePoint page?

What (Surprisingly) Didn’t Work:

I tried editing the source template of the Web page directly in SharePoint Designer, adding some JavaScript directly into the asp:Content ContentPlaceHolderId=”PlaceHolderMain” section. Doing this seems to have been supported in prior versions of SharePoint, so I was expecting this to be a simple thing to do until I clicked the Save button and the server removed my script entirely and complained about unsafe code.

For example, to try this out for yourself, try adding a simple script like:

<script>alert('hello');</script>

When you click the save button in SharePoint Designer you will see the following error:

Content in the embedded form field may be changed by the server to remove unsafe content. Do you want to reload your page to see the results of the save?

Not a very helpful error message, to say the least

What Worked:

I was finally able to add the necessary script to my Web page in the regular SharePoint 2013 Web interface as an administrative user. Here are the steps that I took:

1. I browsed to the SharePoint Web page that I wanted to edit and clicked the Edit option
2. I selected the top tab labeled Insert
3. Then I clicked the Embed Code option. Here is what the interface looked like at this point:

   

4. Finally, I added my script including the start and end script tags into the Embed Code popup window. Here is what the popup window looked like while I was adding my custom JavaScript:

   

I needed to re-try clicking the process several (2) times before SharePoint finally embedded my custom JavaScript in a Script Editor Web part. The image below shows you what the web part looked like on the page while it was in edit mode:

 

Once the Script Editor was added, it showed up as a Web part at the top of the SharePoint Web page above my Discussion List Web Part. Annoyingly I couldn’t see how to move the Script Editor part below the Discussion List, though I suspect there might be a simple solution to this that I’ve overlooked so far. Not having the JavaScript near the end of the Web page would cause problems since the script would execute before the HTML that it needed to check was rendered. So to get things working correctly, I needed to update my JavaScript to execute after the page was loaded. I was able to get this to work using:

window.onload = function () { }

Finally, I added a check inside of my JavaScript function to only do the text change to the Add Discussion link if it is actually found on the page. The simplest way to do this is to find the element using document.getElementById, and then to do a null check on that element… ie: only try to update the text if the element is not null.

If you are wondering how I identified the element to do the document.getElementById( on, I did this by viewing the source of the SharePoint page and grabbing the id directly from the source. In my case, the Id ended up being: forum1-NewPostLink, but I suggest checking this for yourself since it will possibly be a different id based on what you are doing in SharePoint.

Here is a simple HTML example page that shows you the script text change in action. I used this as a prototype to test my script before trying to use it on my SharePoint Web page:

<html>
<head></head>
<body>
<script type="text/javascript">
window.onload = function () {
var tmpDiscussionElement = document.getElementById('forum1-NewPostLink');
if (tmpDiscussionElement != null) {
tmpDiscussionElement.innerText = 'ALTERED TEXT';
}
}
</script>
some text here
<br>
<a href="#" id="forum1-NewPostLink">new discussion</a>
<br>
<input type="button" id="testBtn" value="clicking this button does nothing"/>
</body>
</html>