The other day I was reading about
CoffeeScript and I was rather intrigued by how neat and simple
CoffeeScript makes writing JavaScript. Since
CoffeeScipt compiles down to JavaScript than it should be rather easy to use
CoffeeScript with SharePoint 2013.
I have a simple development environment setup. It contains three servers, one server is the domain controller, one server hosts SharePoint, and the last server is for the SQL Server. I am using Hyper-V to host these virtual servers. Visual Studio 2013 is installed on the SharePoint sever. To make working with HTML, CSS, JavaScript, TypeScript, CoffeeScript or LESS easier the
Web Essentials extension was installed.
My plan is rather simple write a little HTML to created two boxes and when a user clicks on one of the boxes the box should change color.
I will start with setting up a new Visual Studio project using a Empty ASP.NET Web Application template in the Visual C# folder.
Next I will add an HTML Page to the project. The code is really straight-forward.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CoffeeScript Playground</title>
</head>
<body>
<h4>The Boxes </h4>
<div class="holder" style="width: 500px;">
<div id="box1" style="border:1px solid black; width:200px; height:200px; float: left; background-color:lightblue; ">Box 1</div>
<div id="box2" style="border:1px solid black; width:200px; height:200px; float: right; background-color: lightgreen;">Box 2</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src=" mycoffeescript.js"></script>
</body>
</html>
Now to add a CoffeeScript file to the project. Again the code is straight-forward.
# CoffeeScript
$j = jQuery
box1 = $j '#box1'
box2 = $j '#box2'
$j ->
box1.click ->
color= box1.css('background-color')
if color == "rgb(173, 216, 230)"
box1.css('background-color', 'blue')
else
box1.css('background-color', 'lightblue')
box2.click ->
color= box2.css('background-color')
if color == "rgb(144, 238, 144)"
box2.css('background-color', 'green')
else
box2.css('background-color', 'lightgreen')
Once I had everything working it was time to port it over to SharePoint. For this, I wanted a way to quickly setup and test. I began by adding a Content Editor part to a page.
<h4>The Boxes </h4>
<div class="holder" style="width: 500px;">
<div id="box1" style="border: 1px solid black; width: 200px; height: 200px; float: left; background-color: lightblue;">Box 1</div>
<div id="box2" style="border: 1px solid black; width: 200px; height: 200px; float: right; background-color: lightgreen;">Box 2</div>
</div>
My next step was to add a Script Editor part to the page. I simple copied the code JavaScript code from Visual Studio and dropped it in the part.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var $j, box1, box2;
$j = jQuery;
box1 = $j('#box1');
box2 = $j('#box2');
$j(function() {
box1.click(function() {
var color;
color = box1.css('background-color');
if (color === "rgb(173, 216, 230)") {
return box1.css('background-color', 'blue');
} else {
return box1.css('background-color', 'lightblue');
}
});
return box2.click(function() {
var color;
color = box2.css('background-color');
if (color === "rgb(144, 238, 144)") {
return box2.css('background-color', 'green');
} else {
return box2.css('background-color', 'lightgreen');
}
});
});
}).call(this);
</script>
After saving the page, I was ready to test.
It turns out that working with CoffeeScript and SharePoint is fairly straight-forward. It took a few tutorials to get an idea of the syntax and I had to work a few examples. As I wrote this blog post it dawned on me that if I used a different reference in the Script Editor, I could have used the CoffeeScript instead of the JavaScript. Change the Script Editor part to use the following:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
<script src='http://coffeescript.org/extras/coffee-script.js' type='text/javascript'></script>
<script type='text/coffeescript'>
$j = jQuery
box1 = $j '#box1'
box2 = $j '#box2'
$j ->
box1.click ->
color= box1.css('background-color')
if color == "rgb(173, 216, 230)"
box1.css('background-color', 'blue')
else
box1.css('background-color', 'lightblue')
box2.click ->
color= box2.css('background-color')
if color == "rgb(144, 238, 144)"
box2.css('background-color', 'green')
else
box2.css('background-color', 'lightgreen')
</script>
Using the Content Editor and Script Editor web parts makes sense in a development or learning environment to explore a concept or test out an idea.
