Microsoft Dynamics CRM 2013 HTML5 Task board

I have recently been working on some internal tools that we use at TSG, and thought I would share some of experience with this. The out of the box Task board in TFS 2013 doesn’t allow for it to be used with multiple projects, so I was tasked with creating a drag and drop Task board that would work with multiple projects, all of their backlog items, and the tasks associated with them. As I was creating this, I thought this could also be used with CRM 2013 as a customer services tool to display tasks per case or user, team or customer.

 

The basic layout I needed to replicate was similar to the TFS task board, which is a basic post it note style board, where you move tasks between different stages of a product backlog item or case’s lifecycle.

 

OK, so where do we start?

 

Well it depends really on who needs access, in our example, let’s create an ASP.NET MVC 5 web application. This means we can allow either a public view, or an intranet view of the data we want to publish.

After we have create an ASP.NET MVC application, we need to add a class that will serve as our data model. So we create a POCO class as below within our Models folder:

 

The key thing to note with this data model class are the names of each of the properties as we will use these when we use data binding in Knockout JS later on.

Next we need to modify the default controller that Visual Studio creates for us. Here in our Main Index action we call our GetWorkItems method from the relevant helper class, serialise the class to a JSON object, we push a string array of each of the Stages we want into the ViewBag, grab the current Name of the user we are executing as mainly to check that we are impersonating / passing the correct credentials across to CRM, and finally return the view.

We also create a post back action to update a attribute in CRM when we move the item between the various different stages.

 

Note: We could use Web API 2 here, but as this is a simple example, there is no real need, it just increases the complexity of the application for what is just a one line method call.

 

Now to the Cloud! I mean HTML, JavaScript, and CSS…

 

As part of the MVC application we get the jQuery and Knockout JS libraries included, we don’t however get jQuery UI. We need jQuery UI to be able to drag our post it notes around on the page, so we can simply download that and add it to our project.

 

In our Index razor .cshtml template we add some JavaScript, we could put this in its own .js file which under a normal project conditions you would do for encapsulated separation.

Here we have a couple of variables to hold the item being dragged, and whether we need to cancel the drop. We then declare two functions to handle the drag and drop event binding from Knockout JS. The key thing to note here is that draggable and droppable prototypes are from the jQuery UI library.

 

In drag we simply handle whether we need to revert / cancel the drag and assign the currently selected View Model item to the _dragged variable.

 

In drop we check whether the item has been moved to a different table row, and cancel if so, we then detach the item being dragged from its current parent div collection of items and attach it to the new parent’s div collection of items.

 

The final thing we do as part of the drop is to show the saving message div, update our View Model item to the correct Stage, and make an ajax post to the Home controller to update the status in CRM. If the post fails, i.e. something went wrong on the server, we handle this via an error call back and display an appropriate message.

 

We then need to define our View Model, so we create an object to hold the data items we want to display, an Observable Array of any items we have dragged / dropped, and the last item that was moved. The last item that was moved is assigned to as part of the Knockout JS drop data bind.

 

The final thing we can do as part of the script is to create a View Model based on the JSON serialised data that we generated in our MVC Controller, and get Knockout JS to apply the bindings and format the HTML correctly.

 

So that’s the JS beauty, what about the HTML brains? (I’m sure that’s the wrong way around…)

 

Well the HTML is built up of a table, with a number of rows and columns. We can put a title at the top, and table headers for each of the stages we can move a post it note to.

 

We can then data bind the table body using Knockout JS to our data using the foreach data bind keyword. This means that Knockout JS will render a table row for each item in our data, displaying the Title and Remaining Work involved.

 

We then create table data mark-up for each of the stages, and use data binding in Knockout JS to cause the drop event to update the lastTaskUpdate property of our View Model.

 

 

Now that we have our rows of items, we need to display our tasks. Again we can use the foreach keyword in Knockout JS to create a number of div elements, each of which can contain elements which display the data from our task via data binding. We use the Knockout JS “ko if” mark-up syntax to control the flow of what elements from our task list are displayed in each of the different stages.

 

The key thing to note in the HTML is that the property names we use in our data-bind are the same as the property names in the POCO Model.

 

On the drag data-bind event we pass in the $data object, which is just the item from we are working with within the foreach section of our Knockout JS mark-up.

 

Finally the CSS, I’m not going to explain this cause it’s really just a bunch of styles…

 

So that just about wraps up this example of a HTML 5 task board using jQuery, Knockout JS and ASP.NET MVC.

 

Hopefully you will find this useful and can see the practical use with Microsoft Dynamics CRM 2013…

 

@simonjen1