Embedding CoffeeScript into a SharePoint 2013 development environment can be done with two web parts. In this post, we assume you are a Site Collection Administrator and that you are familiar with the process of adding web parts to a page.

Where Is My CoffeeScript?

Start by editing a page, you will need to add a Content Editor web part and a Script Editor web part to the page. Insert the following HTML code within the Content Editor web part.

The Boxes

Box 1
Box 2

Insert the following code to the Script Editor web part.

Finally, save the page and test. The expected behavior is when a user clicks on the light blue box, it will turn to blue, click on it again it will turn back to light blue. The light green box will change to green when you click it.

The image shows the page before any user actions are taken.

This image shows what happens after the user clicks the light green box.

To wrap up, this method of using two parts works but it is not ideal. I would recommend writing the CoffeeScript and HTML in a tool like JSFiddle or Visual Studio and then copying the code into the web parts. I would limit the use of the method to just a development environment.

Next Steps

Review our case studies and engagements where we helped companies just like yours solve a variety of business needs.

About Oakwood

Since 1981, Oakwood has been helping companies of all sizes, across all industries, solve their business problems.  We bring world-class consultants to architect, design and deploy technology solutions to move your company forward.   Our proven approach guarantees better business outcomes.  With flexible engagement options, your project is delivered on-time and on budget.  11,000 satisfied clients can’t be wrong.