Don’t Script in the wrong Web Part!
Don't Script in the Wrong Web Part - SharePoint 2013 OOB Script Editor Web Part

Don’t Script in the wrong Web Part!

Posted by on Wednesday, March 26th, 2014  

 

This blog will serve as a helpful introduction to the new Out of the Box Script Editor Web Part for SharePoint 2013/ Office 365.  I stumbled across this Web Part recently after trying to use the Content Editor Web Part and realizing that it does not work as expected in certain scenarios. The new Script Editor Web Part makes it very easy to add HTML or JavaScript to your site.

The Content Editor Web Part still seems to work fine for HTML or XHTML. However, if you attempt to add JavaScript to your page using the Content Editor Web Part in SharePoint 2013, the script tag entries will be removed. In SharePoint 2013/ Office 365, any script should to be entered into the Script Editor Web Part.

The following is a simple step-by-step guide of how to use the Script Editor Web Part to add some client side logic to your page. This example will place a button on a page and call JavaScript from a mouse click to open a newform.aspx page in a modal dialog. The site I’m working with is an internal SharePoint site where users can click on a button titled ‘Leave a Comment’ to submit comments or feedback.

Note: For this scenario, since I was simply using an XHTML input tag with the onclick client-side event attribute to call the JavaScript, the Content Editor Web Part would have likely worked fine. However, I wanted to document an example I thought other users might find helpful (opening a NewForm.aspx page in a modal dialog from a button).

Step 1) Edit your page, select the Web Part option from the Insert tab in the ribbon, then select the Script Editor Web Part:

SharePoint 2013 OOB Script Editor Web Part

Select Add to insert the Web Part onto your page.

Step 2) Click the EDIT SNIPPET link to insert your HTML or JavaScript code:

SharePoint 2013 OOB Script Editor Web Part

SharePoint 2013 OOB Script Editor Web Part

Notice that as soon as you place your code snippet into the box, it will show you a preview in the lower left corner.  Select Insert when you are finished, then save your page.

You’ll need to be sure that you have a Custom List created ahead of time to link to. Also be sure to set the Chrome Type to None in the Web Part settings to remove the title and border.

From there, click on the ‘Leave a Comment’ button and your NewForm.aspx page will open up in a modal dialog:

SharePoint 2013 OOB Script Editor Web Part

You can of course always add some pretty styling to make it look much nicer. You can accomplish this with the Script Editor Web Part as well to add CSS inside of <style> tags. This is probably the best option if you are only wanting to make styling changes to a single element on your page.

In summary, if you are needing to add HTML or JavaScript to your SharePoint site, you can do just that with the easy to use Script Editor Web Part. Thanks for reading. I welcome any feedback!

Subscribe to RSS Feed

Sign Up for Newsletter

3

3

comments

    Aug 28
    2014

    Bobbie Cordle

    My original code didn’t work when we upgraded sites from SharePoint 2010 to 2013, and this is my solution! Thank you!

    Reply
      Aug 28
      2014

      Jessica Criner

      You’re welcome!

      Reply
    May 18
    2015

    Bryan

    Hello Jessica, When I add JQuery onto my page using the Script Editor the code fires and works as intended HOWEVER, my tabs on the top of the page (default SP navigation of Files and Library). What am I missing on this? Is there a specific jQuery lib call I need to do to prevent this type of event? I am currently calling https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js

    Reply

Leave a Reply