Web Development Tools & Reference

Just a list of tools and reference material which I think is really useful for Web Development:

JavaScript:

1) jslint : http://www.jslint.com/

JSLint is a JavaScript program that looks for problems in JavaScript programs. It is a code quality tool. JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems.

2) jsperf : http://jsperf.com/

jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.

3) jsfiddle: http://jsfiddle.net/

Test and share JavaScript, CSS, HTML or CoffeeScript online.

4) JavaScript Garden : http://bonsaiden.github.com/JavaScript-Garden/

JavaScript Garden is a growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert JavaScript programmers may encounter on their endeavours into the depths of the language.

Tools

1) Postman REST Client: https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm?hl=en

2) REST Client for Firefox: https://addons.mozilla.org/en-US/firefox/addon/restclient/

3) Firebug: https://getfirebug.com/

4) JSON Pretty Print: http://jsonprettyprint.com/

Reference:

1) Mozilla Developer Network : https://developer.mozilla.org/en-US/

Performance:

1) Browser Diet : http://browserdiet.com/

2) Yahoo Best Practices for Speeding up your WebSite: https://developer.yahoo.com/performance/rules.html

3) Google Web Development Best Practices: https://developers.google.com/speed/docs/best-practices/rules_intro?hl=sv

4) Why you should always host jQuery on the Google CDN: http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/

Using the SharePoint 2013 Workflow Interop Service in CSOM

In my previous post, I briefly introduced the SharePoint 2013 Workflow Architecture and also showed how to programmatically manage the SharePoint 2013 Workflows via the Workflow Services in the Client Site Object Model (CSOM). I will recommend to read that post before this one.

You can find the previous post here: Managing SharePoint 2013 Workflows with CSOM

As a follow up to that post, in this post I will show how to start a Workflow authored with the SharePoint 2010 Engine.

The Workflow Services in the CSOM contain an InteropService which is a hook in the SharePoint 2010 Windows Workflow Foundation runtime engine.

This code works with SharePoint 2013 On-Premises as well as with SharePoint Online. I have created my sample code against SharePoint Online.

Before you run this code, you will need to create a SharePoint 2010 Workflow (Definition) either via SharePoint Designer 2010/2013 or through Visual Studio 2012/2013 and deploy it to your SharePoint 2013 target site. You can then use this code to start the Workflow

You will need to reference the following Assemblies:
Microsoft.SharePoint.Client.dll
Microsoft.SharePoint.Client.Runtime.dll
Microsoft.SharePoint.Client.WorkflowServices.dll

1) Start a SharePoint 2010 Site Workflow with CSOM:

2) Start a SharePoint 2010 List Workflow with CSOM:

Managing SharePoint 2013 Workflows with CSOM

As you might have heard many times, the Workflow Architecture in SharePoint 2013 was entirely changed from what it was in SharePoint 2010. Instead of the Workflows running on the SharePoint server, they now have to run on a separate Workflow Manager.

On top of that, only declarative custom Workflow's are allowed to be deployed to the Workflow Manager. If there has to be any custom code, it has to be hosted in an external service and then consumed from the declarative workflow.

The Workflow Manager has certain activities and types which come predefined with it. This is called the Trusted Surface. Workflow Authors can consume these activities in their declarative workflows. A whole list of types and activities available under the trusted surface is here: http://msdn.microsoft.com/en-us/library/jj193509(v=azure.10).aspx and here: http://msdn.microsoft.com/en-us/library/jj193474(v=azure.10).aspx

This architecture is very much inline with Microsoft's strategy to move code execution away from the SharePoint server.

SharePoint 2013 supports two methods of workflow authoring. Authoring Workflows in the SharePoint 2013 engine and also authoring them in the SharePoint 2010 engine. Workflows which are authored in the SharePoint 2010 engine run on the SharePoint server and are allowed to execute code there. That architecture has not been changed and is available for backwards compatibility.

In the SharePoint 2013 Workflow platform, a Workflow definition is a Service Bus Topic and a Workflow Association is a Subscription to the topic. Topics and Subscriptions are used by the Service Bus to decouple message publishers from message subscribers. More about the Workflow Manager and Service Bus Pub/Sub architecture here: http://msdn.microsoft.com/en-us/library/office/jj163181(v=office.15).aspx#bkm_Subscriptions

Microsoft has also very recently added Workflow Management services to the Client Side Object Model (CSOM). The entire range of Workflow services available in the CSOM is published here: http://msdn.microsoft.com/en-us/library/office/dn481315(v=office.15).aspx. In this post, and the following posts, I will show you how to manage workflows with CSOM.

This is code works with SharePoint 2013 On-Premises as well as with SharePoint Online. I have created my sample code against SharePoint Online. Also, this code only works with Workflows which are authored on the SharePoint 2013 Workflow Engine. I will be writing another post on the CSOM Interop Service in which I will show how to start SharePoint 2010 Workflow Engine authored Workflows.

Before you run this code, you will need to create a Workflow (Definition) either via SharePoint Designer 2013 or through Visual Studio 2012/2013 and deploy it to your target site. You can then use this code to dynamically create associations of the Workflow, and also to start those associations.

You will need to reference the following Assemblies:
Microsoft.SharePoint.Client.dll
Microsoft.SharePoint.Client.Runtime.dll
Microsoft.SharePoint.Client.WorkflowServices.dll

1) Create a new Subscription (Association) from a Workflow Definition with CSOM:

2) Start a SharePoint 2013 Site Workflow with CSOM:

3) Start a SharePoint 2013 List Workflow with CSOM:

View Tenant (ULS) Logs in SharePoint Online using CSOM

Update (14th Sep 2014): Even though the classes exist in the CSOM, the Microsoft Office 365 Engineering team has confirmed that this is something which is not possible right now. It is also something which is not currently on their road map. They have said that if there is high demand for this feature, they will look into implementing it. Please go to the Office 365 UserVoice site and vote this feature up if you are interested: http://officespdev.uservoice.com/forums/224641-general/suggestions/4578386-provide-a-way-to-view-uls-logs-on-sharepoint-onlin

----------------------------------------------------------X-------------------------------------------------

A while ago, I came across the Office365 UserVoice site. It was a good way to give feedback and let the SharePoint/Office365 team know which features could make the life of SharePoint Developers easy.

I decided to post on it a feature request, which I felt was desperately needed and would really help me as a SharePoint Developer: A way to view ULS Logs on SharePoint Online
http://officespdev.uservoice.com/forums/224641-general/suggestions/4578386-provide-a-way-to-view-uls-logs-on-sharepoint-onlin

It seems this was a shared opinion among many people and the request went on to become one of the top voted on the site:
http://officespdev.uservoice.com/forums/224641-general/filters/top

Fast Forward to today and I was really excited about the SharePoint Conference 2014! I saw a lot of code samples and articles being published as a result of the new features introduced by the SharePoint Team. While exploring the Office App Model Samples (http://officeams.codeplex.com/) I came across the following DLL: Microsoft.Online.SharePoint.Client.Tenant.dll

You can refer to my previous post about using this DLL to create Site Collections in SharePoint Online:
http://www.vrdmn.com/2014/03/create-site-collections-with-csom-in.html

I opened up the DLL in ILSpy and immediately noticed the TenantLog class:
http://msdn.microsoft.com/en-us/library/microsoft.online.sharepoint.tenantadministration.tenantlog_members(v=office.15).aspx

After playing around it a bit, I was able to retrieve Log messages from my Tenant. This seems to be a preview feature still in development and was not working on all the tenants on which I tested. In fact, it was working only on a newly created Tenant! That too only for the Developer Site.

Having a look at the MSDN docs for the SPO PowerShell cmdlet:
http://technet.microsoft.com/en-us/library/fp161369(v=office.15).aspx

"This function cannot retrieve all SharePoint Online errors. It retrieves a subset of errors that happen due to external systems.
For Beta 2, the only logs available are for Business Connectivity Services (BCS)."

I will keep this post updated with any new information which comes along.

You will need the following DLLs for this code to work:
Microsoft.SharePoint.Client.dll
Microsoft.SharePoint.Client.Runtime.dll
Microsoft.Online.SharePoint.Client.Tenant.dll

The first two assemblies can be found in the ISAPI folder of your SharePoint 2013 Server Box. The Microsoft.Online.SharePoint.Client.Tenant.dll is a part of  the SharePoint Server 2013 Client Components SDK which can downloaded from here: http://www.microsoft.com/en-in/download/details.aspx?id=35585

So without much further ado, here is the code:
And here is the output I got after running the code:

I think the SharePoint team has done a really great job of listening to the community to add new features to SharePoint/Office365 and I am really happy!

Create Site Collections with CSOM in SharePoint Online

With the SharePoint Conference 2014, a lot of code samples and articles where recently released. I was most impressed by the Office App Model Samples found here: http://officeams.codeplex.com/

Within that, there is some really good code of which my favorite is Creating Site Collections in SharePoint Online with CSOM. Previously this was only possible via Powershell and the SharePoint Online (SPO) Commandlets. I have modified the code provided in the samples to make it a bit less complex and you can also use it outside of an app e.g. in console applications.

You will need the following DLLs for this code to work:
Microsoft.SharePoint.Client.dll
Microsoft.SharePoint.Client.Runtime.dll
Microsoft.Online.SharePoint.Client.Tenant.dll

The first two assemblies can be found in the ISAPI folder of your SharePoint 2013 Server Box. The Microsoft.Online.SharePoint.Client.Tenant.dll is a part of  the SharePoint Server 2013 Client Components SDK which can downloaded from here: http://www.microsoft.com/en-in/download/details.aspx?id=35585

So without much further ado, here is the code:

Set UserProfile Picture using Client APIs in SharePoint 2013

With the SharePoint 2013 Client APIs, you can only read the User Profile Properties but not modify them. However the only property you can modify is the Current User's profile picture. Source article: http://msdn.microsoft.com/en-us/library/jj920104.aspx

The REST API expects the image to be in the arraybuffer format in order to be set. To convert an image to arraybuffer, we will be using the XMLHttpRequest object

The XMLHttpRequest object allows us to specify the format in which we want the content to be downloaded. The available options are: arraybuffer, blob, json, text, document and some other browser specific formats.

Complete documentation for the XMLHttpRequest object:
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

Also a very good article on how to use the XMLHttpRequest object:
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

A very important point to note is that XMLHttpRequest will work with cross domain images only if the server which is hosting the images allows cross domain requests to be made.

Modern browsers support cross-site requests by implementing the web applications working group's Access Control for Cross-Site Requests standard.  As long as the server is configured to allow requests from your web application's origin, XMLHttpRequest will work.  Otherwise, an INVALID_ACCESS_ERR exception is thrown.

For the sake of simplicity, we will be using the images hosted in the same domain as SharePoint itself so we do not have to worry about cross domain requests.

1) Set Current User's UserProfile Picture using the REST API:

2) Set Current User's UserProfile Picture using the .NET Managed Client Object Model:

This is relatively easy as the SetMyProfilePicture managed method expects the image to be a System.IO.Stream. 

This code assumes you are working with SharePoint Online/Office 365. If you are working with an On-Premise deployment, you do not need to use the SharePointOnlineCredentials class. You can simply create an instance of the NetworkCredentials class for the authentication.

Knockout.js Simplified

Knockout is a fantastic JS library for data binding and dynamically generating complex HTML. It helps a lot in developing applications which are loosely coupled and where there is minimum dependency between the data and the views.

Before I knew knockout, I used to generate all my repetitive HTML right from my JavaScript file. This had significant disadvantages:
1) Every time I had to change my display code, I had to modify the JavaScript file.
2) The JavaScript file contained the business logic as well as the display logic of my application. This used to make the file very complicated to maintain.
3) If a UI designer had to change the HTML, he would have to consult me in order to look for where to make the changes so that the generated HTML would be according to his requirements.

With knockout, we can keep all the display logic (HTML) in the .html file while all the data logic (and business logic) can be separated in the JavaScript file.

Knockout JS implements the MVVM pattern for developing applications. Now if you are a beginner, all these acronyms like MVC/MVP/MVVM might get confusing. So let me try to explain what exactly is meant by the MVVM pattern.

MVVM stands for Model-View-ViewModel. I know this does not help you at all so let me go in a bit of detail:

Model : Your data. Typically a JSON or XML object which contains data fetched from different data sources like Web Services, SQL Tables, SharePoint Lists etc.

ViewModel: The component which aggregates the data into a format which the View expects. ViewModel also manages combining data from multiple Models. It also handles formatting, sorting, filtering of the data based on custom business logic.

View: HTML Structure which will display data to the user.

Hope that was helpful.

Now lets get into the code right away! We will be looking into a simple example where we will be getting data from an JavaScript Array (Model), filling that data into a ViewModel and then binding that ViewModel to the View (HTML).

Since this article is just introduction to KnockoutJS, I have kept it really simple. I have included the JS code as well as the HTML code in the same file so that it is easier to understand. You will want to separate out the JS code in a different file.

Here is the code:



For more details and tutorials, please see the Knockout.JS documentation which is really nice and detailed: http://knockoutjs.com/documentation/introduction.html