SharePoint List Dao with TypeScript

I am using more and more TypeScript therefore I thought that it would be good to rewrite the old GenericList script that I had provided a year ago.

Before to start, make sure that you’ve added TypeScript support to your Sharepoint solution, in order to do that I would suggest the reading of the following MSDN article by Marat Bakirov: Creating SharePoint solutions with TypeScript

Once this is done, you can find below the TypeScript code of the updated ListDao (previously GenericList).

All what is left to do in order to retrieve all the items of the Funds list (e.g.) is below:

Hope you’ll feel the benefits of TypeScript as much as I do :)

Use the ASP.NET Membership in a SignalR chat (with an ASP.NET MVC 4 Application)

Today, I had a look at a simple tutorial about SignalR which made me create a simple chat using SignalR.

The chat ask the user to give a pseudonym that will be used on the chat, then allows the user to enter messages and to receive other users messages.

After I completed the tutorial, I wished to use the already existing ASP.NET Membership from the Internet ASP.NET Application template which was used to create the chat in the tutorial.

I’ll explain the few steps I’ve done to achieve this.

First of all, follow this tutorial to get the basic chat :
Tutorial: Getting Started with SignalR and MVC 4 (C#)

Once it works, let’s add our changes to use the ASP.NET Membership instead of asking the user to choose his pseudonym.

I opened the HomeController to add a few membership annotations so that the user will still be able to access the basics actions methods without having to be identified, but the Chat action method will require him to be identified.

Add these annotations to the HomeController class :

Then add this annotation to the Index, About and Contact action methods : [AllowAnonymous]

Your HomeController class should look like this :

When it is done, you could try to access the /Home/Chat Url in your browser, it will ask you to register or to login (except if you are already registered) but the Chat is still asking you for a pseudonym to use on it.

So let’s edit the Chat.cshtml view to use the name of the logged user instead of asking him to give one. We will then modify the value of the displayname hidden field like this :
<input type="hidden" id="displayname" value="@User.Identity.Name" />

Then in the JavaScript code below (in Chat.cshtml) we’ll comment the line where the user pseudonym was asked :

If you launch the application, the chat won’t ask you for a pseudonym and will correctly use the name of the logged user. That’s great but yet it is quite easy to edit the value of the displayname hidden field to use another pseudonym (e.g. to speak in the name of somebody else).

Don’t worry about it, we’ll fix it !

To achieve this, I’ve choosen to create some kind of token verification to forbid the user to change his name in the displayname hidden field.

To do this, I’ve created two new classes to help me work with tokens and md5 hashes. So let’s add a new Helpers folder in our projet and add these two classes in it :

So basically, the MD5Helper class will help us to hash a string or to verify if a string matches a given hash. And the TokenHelper class will help us to generate an hash for a user’s name and to verify if a given hash is correct for a given name.

Don’t forget to edit the GetToken method in TokenHelper.cs to use some kind of randomness of your own so that the malicious user won’t know what you are using to generate the hash (otherwise he will be able to generate a new hash for any user’s name that he wants to use.

Now that we can generate a hash for a user name, let’s add this hash to the dynamic variable ViewBag.Token in the Chat action method in HomeController.cs

And to allow JavaScript to give this hash to the server method Send, we’ll add a new hidden field with the id token and edit the JavaScript of the Chat.cshtml view to give this hash to the Send server method.

Add an hidden field which will contain the hash to the Chat.cshtml view (e.g. after the displayname hidden field) :
<input type="hidden" id="token" value="@ViewBag.Token" />

And edit the JavaScript code of the Chat.cshtml view to give a third parameter (the hash) to the Send server method :

Don’t forget to edit the ChatHub.cs Send method signature to accept this new hash parameter :
public void Send(string name, string message, string token)

Test if the chat is still working, if yes, there is one last step to do : verify if the received hash in the Send method of the ChatHub.cs matches the expected hash for the received the name.

Just add theses lines on the top of the Send method in ChatHub.cs :

Great, with this small code, if the received hashed token don’t match the expected hash for the received name, we will print an error message in the user’s chat (only the caller) and we won’t send his message to other users.

Test your chat, everything should be working fine, try to edit the displayname hidden field (hit F12 in Internet Explorer to edit the DOM) and you’ll see that you receive the error message when you try to send a message if you have modified the displayname hidden field.

Just in case, here is the full working Visual Studio 2012 solution :
SignalRChat using ASP.NET Membership user name – Visual Studio 2012 Solution

Update : There is a post on the MSDN Blogs that speak about User Identity and SignalR, follow the link SignalR and user identity (authentication and authorization)

Building an ASP.NET MVC remote web in a Sharepoint Cloud-hosted App

I know there is already a great article on iLove SharePoint about this, but since it is nearly one year old and because the process as been simplified a lot in the latest updates of Visual Studio 2012, I’ll retake this subject here.

For my article, I’ll use an Autohosted App but the process is nearly the same for a Provider-hosted App.

So let’s start by creating a new App for SharePoint 2013 project, I’m not sure wether the remote web is now supporting .NET Framework 4.5, but if you don’t plan to use .NET Framework 4.5 new features, you’d better select the .NET Framework 4 on the top of the new project window (or try with .NET Framework 4.5 and you’ll see if it works) !

2013-06-07-18_08_46-New-Project2

Then you’ll be prompted to specify the name of your App, your SharePoint site, and that is an Autohosted App.

It may take a few seconds to create all that stuff but you should end with something like that (a SharePoint App project and the remote web project).

2013-06-07-18_13_52-GobbeApp-Microsoft-Visual-Studio

Let’s add an ASP.NET MVC 4 Web Application by right clicking on the solution name (highlighted in blue in the screenshot just above), select the Add menu and hit the first entry : New Project…

2013-06-07-18_17_13-Add-New-Project

You’ll be asked to select a project template, to start with something easy but still clean I’ll select the Basic project template with the Razor View Engine (you may create a test project but it isn’t required).

Once the new ASP.NET MVC 4 Web Application project is created, in the Solution Explorer, click on the SharePoint App (cf. red frame in the screenshot below) and change the associated Web Project in the properties window (if you don’t see the properties window, it is the penultimate entry in the View menu) to select our newly created ASP.NET MVC 4 project.

2013-06-07-18_21_36-GobbeApp-Microsoft-Visual-Studio

Visual Studio will prompt you with a dialog box, just answer yes because it will add all the SharePoint stuff we need to work with SharePoint in our ASP.NET MVC 4 remote web !

2013-06-07-18_21_13-Microsoft-Visual-Studio

Now that the new remote web is selected, you may delete the old remote web project (in my case, GobbeAppWeb).

And it’s done ! You may now start by adding a Controller and a View to the ASP.NET MVC 4 remote web project to print something cool. But don’t forget to double click on the AppManifest.xml to edit the Start Page on your remote web (e.g. if you have a Controller named HomeController with an Action method Index(), you may just add /Home/ to the existing Start Page).

2013-06-07-18_35_05-GobbeApp-Microsoft-Visual-Studio

If you need it, here is a basic HomeController sample and the associated Index view.

Final result :

2013-06-07-18_42_52-Index

If you plan to have multiple controllers and/or action methods, I strongly advise you to use the small ContextHelper I’ve wrote in a previous post : ContextHelper post. It will help you to use the ClientContext through multiple pages without having to give the Standard Tokens to every link of every action method.

Finally, if you want to have the SharePoint look and feel (also called the SharePoint Chrome Control), just have a look at the second part (“Add SharePoint Look and Feel to the App”) of this article on the iLove SharePoint blog.

If you want to download the Visual Studio project I created (and tested) to write this post, just hit the link below. If you plan to deploy it, don’t forget to change the Web Project property in the properties window of the SharePoint App project to put your SharePoint site in (hit F4 while the SharePoint App project is selected and enter your SharePoint site URL in the Site URL property, like this : https://mysite.sharepoint.com/ ).
https://dl.dropboxusercontent.com/u/7354651/GobbeApp.zip

Use database tables as SharePoint lists in a SharePoint-hosted App with a BCS (Business Connectivity Service)

Let’s suppose that you want to use an external database table in a SharePoint-hosted App, here is how to achieve this !

This might seem a long process but the truth is that is quite easy.

We’ll have to create a WCF Data Service (OData Protocol) to expose our database. Then the next step is to deploy this Data Service somewhere to be accessible to the SharePoint-hosted App (e.g. on Windows Azure). Once that is done, you’ll be able to add an External Content Type (based on the Data Service previously deployed) in the SharePoint-hosted App (be careful, you can’t add an External Content Type to a Cloud-hosted App).

Let’s start by creating our Data Service (I’ll assume that you already have a database deployed somewhere).

First of all, create a new ASP.NET MVC 4 Web Application project (or any project that can hold an Entity Data Model and expose a WCF Data Service).

2013-06-05-23_43_02-New-Project

As the ASP.NET MVC 4 Application will be useless except for the Data Service, I’ll thus select the Empty template in the next dialog window.

One the project is created, let’s add an Entity Data Model to it. Right click on the ODataService project, then select Add, then hit the New Item entry.

2013-06-05-23_50_38-

There, you’ll search for entity on the top right corner and select ADO.NET Entity Data Model.

2013-06-06-16_20_29-Add-New-Item-ODataService

In the next window, select Generate from database, then create a new connection or use an existing one as below (I’ll use one hosted on Windows Azure for the purpose of this article).

2013-06-06-16_33_51-Entity-Data-Model-Wizard

You’ll arrive on a window allowing you to select which tables you want to include in your model. Just select thoses you want.

2013-06-06-16_38_07-Entity-Data-Model-Wizard

You’ll only have to hit the finish button to get your Data Model created (mine is below).

2013-06-06-16_41_02-Gobbe-Microsoft-Visual-Studio-300x159

Now that we have our Data Model, we’ll add a new Data Service by right clicking on the ODataService project, then select Add, then hit the New Item entry (just as we did to add a new Entity Data Model previously).

2013-06-05-23_55_06-Add-New-Item-ODataService

You’d normally should have a new DataService created which looks like this :

Let’s edit the TODO on the top of it to put our data source class name there. Mine is GobbeEntities.

public class GobbeDataService : DataService<GobbeEntities>

And finally, let’s add some access rules on our entities with the config.SetEntitySetAccessRule() method. I’ll put all the rights on the entity Eleves, and only Read rights on the entity Ecoles

Now if you do a right click on the GobbeDataService.svc then you select View in Browser, it should open a window in your browser showing you a 404 error. That’s normal because ASP.NET MVC have routes and we’ll have to tell him to ignore routes finishing by .svc to make our Data Service available.

Open the file App_Start\RouteConfig.cs in your application and add the line 6 from the code below at the same place (before the MapRoute() call).

Now you can right click on your DataService (mine is GobbeDataService.svc) and select View in Browser, it should open a new page in your browser with XML content just like this :

If it works, you can now publish it by right clicking on the ODataService project, then select Publish. Here I’ll publish it on a free Windows Azure Website. Once it is published, test it in your browser by typing the website URL suffixed by the Data Service file name (e.g. http://gobbe.azurewebsites.net/GobbeDataService.svc/ ). Here is the result expected.

2013-06-06-18_20_15-http___infodidac.azurewebsites.net_ProEcoService.svc_

If everything works fine, your database tables are now exposed through an OData Service which is accessible from everywhere on the Internet (maybe you should put some authentication if you put write rights as I do… but for this article we won’t do it), we can now start using it in our SharePoint-hosted App.

To achieve this, right click on the solution then go in the Add menu and select New Project…

In the New Project window, select the App for SharePoint 2013 template and name it (don’t forget to install the Microsoft Office Developer Tools otherwise you won’t be able to create an App for SharePoint 2013).

2013-06-06-18_26_58-Add-New-Project

Then fill the next window like below (be sure to choose a SharePoint-hosted App) on the bottom.

2013-06-06-18_29_28-New-app-for-SharePoint-1

Wait a few moments and your SharePoint-hosted App should be created ! Next step is to right click on the SharePoint-hosted App project, then select the Add menu, and hit Content Types for an External Data Source.

In the newly opened window, enter the address of the Data Service we just hosted !

2013-06-06-18_38_40-SharePoint-Customization-Wizard

In the next window, just select the tables for which you want to generate an external content type.

2013-06-06-18_41_11-SharePoint-Customization-Wizard

And it is done, you are now able to access your lists (which are actually tables from your database) from within your App (with JSOM or through the REST API, you can use the List.getByTitle access point and give your list name to it).

Just one more point, by default, there is a Limit filter on your External Content Types which limits the result set of queries made on the list to 100 results maximum. To remove it, open the [ListName].ect file in your SharePoint-hosted App project and in the filters list (on the bottom of the .ect file opened), click on the Limit filter, then right click on the green arrow on the left of the filter and hit the Delete action in the context menu.

2013-06-06-18_48_39-Gobbe-Microsoft-Visual-Studio

I hope everything worked fine on your side, if you meet any problem during the set up of something, just leave a comment on this post and I’ll try to help you !

Working with the ClientContext through multiple pages in a SharePoint cloud-hosted App

When I created my first Autohosted-App in SharePoint 2013, it contained only one page. Then I tried to add multiple pages and it was such a pain to work with the ClientContext through all the pages on my website. That’s because you receive the standard tokens only on the start page of your remote web.

To allow me working with the ClientContext on any page of my website, I created a small Helper that will manage the Client Context for me. Thus I don’t have to give the standard tokens in the Url of any links on my remote web.

First, be sure to have the TokenHelper.cs class in your remote web project, then you might add a new class named ContextHelper.cs

In my case the remote web is an ASP.NET MVC4 website, with this ContextHelper, I’m now able to use the ClientContext in every Action method of any Controller and I don’t have to give the Standard Tokens to every ActionLink (SPHostUrl, …) to be able to get the ClientContext.

Having this will store the context token and the host web in the session if the standard tokens are given in the Url. And when you’ll go to another action without giving the standard tokens in the Url, the context token and the host web will just be recovered from the session.

NB : You’ll have to call at least one time the GetClientContext method from the ContextHelper class in your start page Action, otherwise the standard tokens will not be saved in the session.

Using the REST api in a Sharepoint-hosted App

This week-end, I’ve written a small “static class” in JavaScript (it works a bit like a List Generic Dao) to help me make CRUD operations on my lists in Sharepoint-hosted Apps.

Using the code above, it is now easier for me to create/read/update/delete items in any lists.
You’ll find a few samples below :

I know there is still place for improvement but it’s a start !