How to insert custom JavaScript code in SharePoint 2013 pages – Part I!
To get articles like this free in your inbox, subscribe to our newsletter.
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.
Spin Up Your SharePoint 2013 Environment in 5 Minutes
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.
Spin Up Your SharePoint 2013 Environment in 5 Minutes
- 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"><!</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">></span>
<span class="lnum"> 2: </span><span class="kwrd"><</span><span class="html">html</span><span class="kwrd">></span>
<span class="lnum"> 3: </span><span class="kwrd"><</span><span class="html">head</span><span class="kwrd">></span>
<span class="lnum"> 4: </span><span class="kwrd"><</span><span class="html">script</span> <span class="attr">language</span><span class="kwrd">="javascript"</span><span class="kwrd">></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"></</span><span class="html">script</span><span class="kwrd">></span>
<span class="lnum"> 12: </span><span class="kwrd"></</span><span class="html">head</span><span class="kwrd">></span>
<span class="lnum"> 13: </span><span class="kwrd"><</span><span class="html">body</span><span class="kwrd">></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"><</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">/></span>
<span class="lnum"> 16: </span>
<span class="lnum"> 17: </span><span class="kwrd"></</span><span class="html">body</span><span class="kwrd">></span>
<span class="lnum"> 18: </span><span class="kwrd"></</span><span class="html">html</span><span class="kwrd">></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.
Give SharePoint 2016 a Try – Create Your Environment in Minutes
You may also be interested in:
What you should do next…
1. Subscribe to our newsletter:
Subscribe to our newsletter below for the latest news, advice and thought-leadership for software professionals. Or visit our blog to browse our most recent articles.
2. Learn how virtual labs can grow your business:
To learn more about how CloudShare helps software organizations grow revenue, increase efficiency and improve quality, visit our resources page. You’ll be able to browser dozens of valuable white papers, eBooks, webinars, case studies, and brochures.
3. Get a FREE, no obligation demo:
Discover just how easy it is to create your cloud environment—in minutes! One of our friendly virtual labs experts will be happy to:
- Show you the platform in action
- Calculate pricing for your business
- Set you up with a 14-day free trial
- Answer any questions you have
- No pressure or obligation