Working with CoffeeScript on SharePoint : Interacting through jQuery

Now in this next part, lets see how CoffeeScript can be used with jQuery on SharePoint:
Lets start with the most nifty feature first:

$(document).ready(function () { 
    //Code here.
});

is now:

$ ->

    //Code here.  

CoffeeScript makes it extremely easy to iterate over jQuery collections using the for loop:

	#All the hrefs are extracted from all the anchor links on the page and stored in the array 'anchorHrefs'
	anchorHrefs = anchor.href for anchor in $("a")

view raw cffor.coffee hosted with ❤ by GitHub

Simple demo using CoffeeScript with jQuery to create a button, append it after the SP ribbon and assign a click function to it.

	#Create a new Button
	myButton = $("<input id='cfLink' type='button' value='Click Me'/>")
	#Assign a click function to the button which sends the button itself as the first parameter
	myButton.click -> linkClicked (this)
	#Push myLink into the DOM after the ribbon container.
	$("#s4-ribbonrow").after myButton
	#When this function is called, alert the value attribute of the button.
	linkClicked = (button) ->
	alert button.value

view raw jQueryCoffee.coffee hosted with ❤ by GitHub

I hope you have enjoyed the series as much as me. Please feel free to leave me any feedback through comments or email. Happy Exploring!

GitHub Link to the project: https://github.com/vman/SPCoffeeScript

Working with CoffeeScript on SharePoint : ECMAScript Client Object Model

Now, the most interesting part of the series. We will be working with the ECMAScript Client Object Model through CoffeeScript.  The basic Create, Read, Update and Delete operations are done by using the ECOM with CoffeeScript:

Load the Client Object Model:

	#Call the loadCOM function only if the sp.js script is loaded on this page.
	ExecuteOrDelayUntilScriptLoaded loadCOM, "sp.js"

view raw exec.coffee hosted with ❤ by GitHub

Get the Title of the Current Web:

	loadCOM = () ->
	context = new SP.ClientContext.get_current()
	web = context.get_web()
	context.load web
	context.executeQueryAsync ->
	#Success Callback
	alert web.get_title()
	, (sender,args)->
	#Failure CallBack
	alert "Failed. #{args.get_message()} \n #{args.get_stackTrace()}"

view raw loadCOM.coffee hosted with ❤ by GitHub

Add Item to a List:

	AddItem = () ->
	context = new SP.ClientContext.get_current()
	list = context.get_web().get_lists().getByTitle "CoffeeList"
	listItemCreateInfo = new SP.ListItemCreationInformation
	listItem = list.addItem listItemCreateInfo
	listItem.set_item "Title","Mocha"
	listItem.update();
	context.executeQueryAsync ->
	#Success Callback
	alert "Item Added"
	, (sender,args)->
	#Failure CallBack
	alert "Failed. #{args.get_message()} \n #{args.get_stackTrace()}"

view raw additem.coffee hosted with ❤ by GitHub

Update Item from List:

	UpdateItem = () ->
	context = new SP.ClientContext.get_current()
	list = context.get_web().get_lists().getByTitle "CoffeeList"
	listItem = list.getItemById 1
	listItem.set_item "Title", "Latte"
	listItem.update();
	context.executeQueryAsync ->
	#Success Callback
	alert "Item Updated"
	, (sender,args)->
	#Failure CallBack
	alert "Failed. #{args.get_message()} \n #{args.get_stackTrace()}"

view raw updateitem.coffee hosted with ❤ by GitHub

Delete Item from List:

	DeleteItem = () ->
	context = new SP.ClientContext.get_current()
	list = context.get_web().get_lists().getByTitle "CoffeeList"
	listItem = list.getItemById 1
	listItem.deleteObject();
	context.executeQueryAsync ->
	#Success Callback
	alert "Item Deleted"
	, (sender,args)->
	#Failure CallBack
	alert "Failed. #{args.get_message()} \n #{args.get_stackTrace()}"

view raw deleteitem.coffee hosted with ❤ by GitHub

Get All Items from List:

	GetItems = () ->
	context = new SP.ClientContext.get_current()
	list = context.get_web().get_lists().getByTitle "CoffeeList"
	listItems = list.getItems ''
	context.load listItems
	context.executeQueryAsync ->
	#Success CallBack
	itemEnum = listItems.getEnumerator()
	alert itemEnum.get_current().get_item "Title" while itemEnum.moveNext()
	,(sender,args)->
	#Failure CallBack
	alert "Failed. #{args.get_message()} \n #{args.get_stackTrace()}"

view raw getitems.coffee hosted with ❤ by GitHub

In this last piece of code, notice how the while loop in CoffeeScript makes it extremely easy to iterate over a ListItemCollection.

Next:Working with CoffeeScript on SharePoint : Interacting through jQuery
GitHub Link to the project: https://github.com/vman/SPCoffeeScript

Working with CoffeeScript on SharePoint : Setup and Basics

So this new language called CoffeeScript was released recently and the only thing I could read everywhere was how its just JavaScript but only cleaner and more developer friendly. After digging a bit into it, I discovered that indeed the syntax is more friendlier and could boost productivity among JavaScript developers.

Also, being a SharePointer, whenever any new technology comes along, I always think about how it can be used in conjunction with SharePoint. How the technology can be leveraged to make SharePoint a better environment for developers as well as end-users.

So my natural instinct was to go ahead and see how CoffeeScript can be introduced in a SharePoint environment and how it can make life easier for the many SP developers out there. Lets get started then:

Project Setup:
For writing CoffeeScript, I have used the Mindscape Web WorkBench which is a very useful Visual Studio Extension. It lets you write code in CoffeeScript and then automatically produces a JavaScript file which contains the compiled code. This way you get to see your CoffeeScript code as well as the corresponding JavaScript code.

My SharePoint solution for working with CoffeeScript is very simple. I have created a Sandbox solution which contains a script module. Inside the script module, I deploy the MyScript.coffee, MyScript.js and the jQuery 1.7.1 files. I have included the script files on my pages with help of Custom Actions:

<CustomAction Location="ScriptLink" ScriptSrc="~Site/Scripts/jquery-1.7.1.min.js" Sequence="5000"/>
<CustomAction Location="ScriptLink" ScriptSrc="~Site/Scripts/MyScript.coffee" Sequence="5010" />
<CustomAction Location="ScriptLink" ScriptSrc="~Site/Scripts/MyScript.js" Sequence="5020" />

And lastly, I have included all the above elements in a Web Scoped Feature. Here is how my Solution Explorer Looks:

                                  (The GitHub link to my project is at the end of this blog post)

Now lets dive into the actual CoffeeScript code and see what exactly is up. Here are some interesting features of CoffeeScript that I felt are really nifty:

Here, I check the relative url of the current web and the use CoffeeScript's if else statement to modify it if necessary.

	#Check whether the current web is the root web and if its not, append a "/" to the end.
	currentUrl = _spPageContextInfo.webServerRelativeUrl
	currentFormattedUrl = if currentUrl is "/" then currentUrl else currentUrl + "/"
	alert currentFormattedUrl

view raw url.coffee hosted with ❤ by GitHub

Optional parameters can be included in functions. Also, with the #{ } wildcard, parameters can be directly accessed from within a string.

	#The initCoffee function has one required paramter (firstname) and one optional paramter (lastname) whose default valu has been provided.
	initCoffee = (firstname, lastname="deshpande") ->
	#You can include wildcards whithin a string so you dont have to concatenate various strings together.
	alert "Hi #{firstname} #{lastname}! Welcome to CoffeeScript Demo on SharePoint"
	#Call the initCoffee function with passing only one parametre.
	initCoffee("vardhaman")

view raw generalcoffee.coffee hosted with ❤ by GitHub

Next: Working with CoffeeScript on SharePoint : ECMAScript Client Object Model
GitHub link to the project: https://github.com/vman/SPCoffeeScript

Reference CSS files in Sandbox Solution for SharePoint Foundation 2010

Recently I had a requirement where I had to push some custom css files to the page when my SharePoint solution package was deployed. This being a sandbox solution, I could not simply put the files in the /_layouts/ folder and reference it from there.

Also, since the solutions was targeted at a SharePoint 2010 Foundation environment, that meant that I could not use the <% $SPUrl:~sitecollection/Style Library/mystyles.css %> tag because that’s part of the publishing infrastructure which is unfortunately not allowed. If you are developing for the SharePoint Server, then you can use these tokens in sandbox solutions with help of a "hack" mentioned here:
http://msdn.microsoft.com/en-us/library/ee231594.aspx

Now, since I wanted to deploy my CSS file with the solution, I could not just go to the current MasterPage and edit it using SharePoint designer. Also, I figured that there might be times when you don’t have the access to the MasterPage and cannot edit it. So directly editing the current MasterPage was quickly ruled out.

After some thought and some digging around I found out 2 promising methods to include CSS to your Sandbox solution targeted at SharePoint foundation:

1)      Using CustomActions:

Now here is the weird thing about SharePoint 2010: They have provided a separate custom action for pushing the JavaScript to the masterpage  but they have not provided a similar method for the CSS files. So I had to improvise a little in this case. I created an empty elements file and included the following custom action inside it.

<CustomAction Location="ScriptLink" ScriptBlock="document.write('&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/SiteAssets/Styles/mystyles.css&quot;&gt;&lt;/' + 'link&gt;');" Sequence="5000" />

view raw customactioncss.xml hosted with ❤ by GitHub

The Location=”ScriptLink” attribute tells the custom actions to include it in the ScriptLink section on the masterpage. And the ScriptBlock attribute defines what JavaScript code to be included in it. What I did is simply create a HTML link control and gave the appropriate path to of my CSS file in the href attribute.

2)      Using Feature Receiver:

Another way is by using a feature receiver which executes the defined code when a Feature is activated. Here we can use the SPWeb.AlternateCSSUrl property which can be used to give path of a CSS file which will be included in the current Web.

	public override void FeatureActivated(SPFeatureReceiverProperties properties)
	{
	//Add the Css to the current Web
	SPSite site = properties.Feature.Parent as SPSite;
	SPWeb web = site.OpenWeb();
	if (web.ServerRelativeUrl == "/")
	{
	web.AlternateCssUrl = web.ServerRelativeUrl + "SiteAssets/Styles/mystyles.css";
	}
	else
	{
	web.AlternateCssUrl = web.ServerRelativeUrl + "/SiteAssets/Styles/mystyles.css";
	}
	web.Update();
	}

view raw customactioncss.cs hosted with ❤ by GitHub