CloudShare Blog

How to insert custom JavaScript code in SharePoint 2013 pages – Part I!

Adding custom JavaScript code to SharePoint 2013 site pages is just one of the many extensibility points available in the platform.

In this article I will show you how to add client logic to your pages by using the new “Script Editor” Web Part. As you can deduce, this Web Part allows you to add custom code (HTML and/or JavaScript) to an existing site page.

The process to add your JavaScript code is quite straightforward:

  • Navigate to your SharePoint 2013 site and create a Wiki Page or a Web Parts page.
  • Edit the page, go to the “Insert” tab in the Ribbon and click the “Web Part” option. In the “Web Parts” picker area, go to the “Media and Content” category, select the “Script Editor” Web Part and press the “Add button”.


  • Once the Web Part is inserted in the page, you will see an “EDIT SNIPPET” link. If you click this link, a modal dialog is shown. You can insert the HTML and/or JavaScript code in the dialog.


  • Notice that as soon as you insert your code, you will see a preview of how it will be displayed in the site page.


  • Once you are done, press the “Insert” button and check your code works as expected.


  • In this case, the HTML + JavaScript code added is the following one:
<span class="lnum"> 1: </span><span class="kwrd">&lt;!</span><span class="html">DOCTYPE</span> <span class="attr">HTML</span> <span class="attr">PUBLIC</span> <span class="kwrd">"-//W3C//DTD HTML 4.0 Transitional//EN"</span><span class="kwrd">&gt;</span>
<span class="lnum"> 2: </span><span class="kwrd">&lt;</span><span class="html">html</span><span class="kwrd">&gt;</span>
<span class="lnum"> 3: </span><span class="kwrd">&lt;</span><span class="html">head</span><span class="kwrd">&gt;</span>
<span class="lnum"> 4: </span><span class="kwrd">&lt;</span><span class="html">script</span> <span class="attr">language</span><span class="kwrd">="javascript"</span><span class="kwrd">&gt;</span>
<span class="lnum"> 5: </span>
<span class="lnum"> 6: </span><span class="rem">//This function reads the digest using /contextinfo.</span>
<span class="lnum"> 7: </span><span class="kwrd">function</span> ShowAlert()
<span class="lnum"> 8: </span>{
<span class="lnum"> 9: </span>    alert(<span class="str">"Hello World from SP 2013 Script"</span>);
<span class="lnum"> 10: </span>}
<span class="lnum"> 11: </span><span class="kwrd">&lt;/</span><span class="html">script</span><span class="kwrd">&gt;</span>
<span class="lnum"> 12: </span><span class="kwrd">&lt;/</span><span class="html">head</span><span class="kwrd">&gt;</span>
<span class="lnum"> 13: </span><span class="kwrd">&lt;</span><span class="html">body</span><span class="kwrd">&gt;</span>
<span class="lnum"> 14: </span>    This is a sample page about how to insert JavaScript code in SharePoint 2013 RTM pages
<span class="lnum"> 15: </span><span class="kwrd">&lt;</span><span class="html">input</span> <span class="attr">type</span><span class="kwrd">="button"</span> <span class="attr">value</span><span class="kwrd">="Show Alert"</span> <span class="attr">onclick</span><span class="kwrd">="ShowAlert()"</span>;<span class="kwrd">/&gt;</span>
<span class="lnum"> 16: </span>
<span class="lnum"> 17: </span><span class="kwrd">&lt;/</span><span class="html">body</span><span class="kwrd">&gt;</span>
<span class="lnum"> 18: </span><span class="kwrd">&lt;/</span><span class="html">html</span><span class="kwrd">&gt;</span>
  • Finally, bellow you can find a screen shot of the page working as expected.


And that’s all about how to insert custom logic in the client side of your SharePoint sites. I recommend you to check how it works in your SharePoint 2013 CloudShare environment.

Happy CloudSharing!

Topics: Dev / Test SharePoint