Juan Carlos

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

October 29th, 2012 | Author: | Filed under: Dev / Test, SharePoint | Tags: ,


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”.

image

  • 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.

image

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

image

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

image

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

image

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!

About the author:
With more than 10 years of experience in the ICT sector, what best define me is the interest and knowledge of new technologies as a natural way for attending and solving customer problems and needs. My career in the TIC sector, and particularly in the .NET platform started in 2003, just after finishing my studies at the university, in the global worldwide consultancy company Accenture. There, I had the opportunity of working during 3 years in big national and international projects performing different task and roles: development of VB.NET applications, application test and deployment, management of small development teams and so on. In May 2006 I left Accenture and started a new adventure at the Microsoft Innovation Center in Cantabria (CIIN) as a Solutions Architect. In this new stage, I had the opportunity of knowing deeply a variety of Microsoft technologies such as SharePoint, Office 365, Windows Azure, Visual Studio, SQL Server Reporting Services, BizTalk, LINQ, Entity Framework, etc. At the CIIN I haved performed evangelism activities just around these technologies, and I have had the honor of belonging to one of the more specialized organizations in SharePoint in Spain. In October 2013 I joined LKS where I perform a Consultant and Solutions Architect role skilled in SharePoint and Office 365 platforms. My daily work in LKS is focused on providing SharePoint & Office 365 advice and consultancy, specialized training and evangelism in the different projects and LKS customers where I’m involved.

  • Pingback: How-to, SharePoint How-To’s | Chris Riley

  • Jill

    I realize this post is old but hoping you can help… I have a bit of javascript that I used in SP2007 and SP2010 to change the color of certain text items in a choice column. The javascript was inserted into a CEWP, which was placed below the library/list in question. When I insert the same javascript into the Script Editor in SP2013 (or into a CEWP, for that matter), nothing happens. Any ideas?

    • Nolan

      I am also experiencing the same problem. I think it must only allow certain scripts to run. :(

      I can run alert scrips but not href.replace.. Code that works in 2010 doesn’t work in 2013.

  • Andrew

    Script is no longer allowed in the CEWP, you must use the Script Editor WP for it in 2013. As for why it doesn’t work there, it could be changes to the default CSS selectors for 2013 (assuming you are using jQuery or similar approach to change the colors). If not that I recommend firebug or chrome web dev tools to debug.

  • Andrew

    Great article, exactly what I was looking for to get me started!

  • Pingback: MuseSearch™ Integration in SharePoint | edu.Library