Le Post de MCNEXT

Les articles des consultants de MCNEXT

Bienvenue sur le Post de MCNEXT !

  • MCNEXT, la Build 2014 et la SharePoint Conference

Chaque année, MCNEXT propose à des collaborateurs de l’entreprise de se rendre aux grandes conférences de Microsoft aux Etats Unis. L’objectif est de découvrir les nouveautés et de nous permettre de mieux appréhender les grandes évolutions technologiques. Chez MCNEXT, nous aimons partager et les comptes rendus de toutes les sessions auxquelles ils participent sont publiés sur mcnextpost.com .

Retrouvez ici tous les post pour la Microsoft Build 2014 et ici tous ceux de la SharePoint Conference 2014

[TFS] Supprimer définitivement une build

Dans cet article j’aimerai expliquer comment supprimer définitivement une build, que ce soit:

  • pour libérer de l’espace dans la base de TFS (comme expliqué dans mon autre article)
  • pour résoudre un problème que je rencontre souvent, c’est celui auquel une build échoue , lorsque je la relance , celle ci echoue directement car son numéro existe déjà. La solution consiste à supprimer la 1ere build échouée (soit manuellement soit par la rétention), puis à la supprimer définitivement.

Voici donc le détails des étapes pour effectuer cette suppression définitive

Etape 1 : La suppression

Par la rétention

Dans la configuration de la définition de la build, le dernier onglet permet de configurer la rétention, c’est-à-dire le nombre de builds à conserver selon leurs statuts.

Lire la suite


A year ago I had the opportunity to work on an executive dashboard re-design project. The current dashboard was developed few years back using SSRS 2005; it was quiet basic and only included small tables to show KPIs without any nice layout. The project was therefore to keep the existing KPIs but produce a “modern design” dashboard using SSRS 2012.

Before starting I’d like to mention that this article is not meant to be technical; it’s mostly my thoughts about report design after working on this project.

I must say that I was skeptical about being able to produce good looking dashboard with SSRS – I am talking here not only about showing a fancy gauge and a graph, but being able to see the whole report as a smooth and modern design layout. Ok we are developers, design is not our job but when working on a dashboard project, I think that is becoming part of the job.
I also often hear these days that SSRS is a dying tool as there is no much development made by Microsoft in the last year(s); the focus being mostly on Power BI. I agree with the fact that SSRS needs a bit of a refresh but having worked with it for a while I know that with a bit of work you can archive a lot.

So I started to look around SSRS blogs to see what actually people can archive visually with this technology. There are a lot of SSRS Blogs out there with good examples. Going through the reading I found a great article from Jason Thomas on how he managed to reproduce a Dundas dashboard. I must say that this article was a relief for me, seeing that you can reproduce all those Dundas chart convinced me that “modern” design dashboard with SSRS was feasible!
So I downloaded the .rdl file from his article, I realized that all the charts were somehow complex or needed lots of expressions to be managed properly, nevertheless it was still possible.


I first started to draft with my client how they wanted the dashboard to look like. This is a crucial step in order to get a good visualization of what is expected from the customers / users. Very often the customers don’t really know what they want until this step is done so it does help to get an overall picture for both the client and the developer.

We came up with this result:

  • 6 different parts, each of them including a main KPI (with an arrow for value trend comparing to last year value
  • Couple of graph to show the value trend for the last 4 years, all charts must use the same Vertical axis range, not starting from 0.
  • Maximum of 4 seconds for rendering
  • Good looking report and easily readable
  • Readable on Ipad

1st draft of the Dashboard


What I mostly realized when working on the design of this report is that you should change most of the default SSRS layout setting. And first of all, do not use black color, use a nice gray. I know that this seems like a detail but black color is aggressive for the eye and you will not have a smooth report with black in it (unless it’s your main color like using a black background). So go to properties and change all the text color, font color, line color, border color, etc… to Dim Gray + Bold instead of Black. This is also/mostly valuable for chart: change the label, data label, Axis line, background line, Tick Marks color, etc… to Dim Gray or even Silver color. You can also use report properties custom code in order to write a function to assign a default color.
For colors, use light colors and colors that match, I know that seems logical but how many reports I have seen that looks sooo terrible only because of wrong colors chosen. You can go on internet and check for colors on website you like and you can get the color code using some of the nice and free tools on the internet like instant Eye dropper or ColorZilla. This will save you a bit of time to find the right colors. I’m sure you have already some websites in mind!


Instant Eye dropper selecting a green color on a webpage

Then in order to make the report easily readable, I started removing all the visual pollutions => exit the huge logo, decorative lines or background color “for decoration”. The actual trend for website design is “flat design” so we should also use this technique, and it makes a dashboard much more readable! Take a minute and read the Top 10 web design trends 2014, especially the number 1.
Therefore exit also the 3D chart that looks like 1995… It is better to use a nice flat 2D chart. No, SSRS cannot render properly 3D …
I found a lot of nice dashboards on the internet very complicated or with black background, I definitely think that when working daily with numbers you need an as clean as possible visualization. Demos are one thing, daily work is another… (The wow effect does not work every day…


I do not like the default KPI box in SSRS so I used Jason’s article way to build my own box. It does take a bit of time but it looks better at the end. Simply draw something first and then reproduce it inside a table by hiding the unnecessary lines and borders. Hide as much lines as possible, keep only the necessary.

Here is an example of KPI boxes created from a table:

Design View
Rendering :
For the trend arrow I use my own image and added a custom code property to display the correct image depending on the percent increased vs. last year (Percent already calculated in the query).




You can also implement the logic directly as an expression for the Image value, however for good practice and future references it is better to add all code in one place so the custom code window is a good candidate.


One of the requirements was to use the same vertical axis range for all charts in order to compare them easily. The best way I found was to calculate the Min, Max and intervals in advance in the T-SQL query using this logic:
Take the Max value +20% and round it up: 3012621 + 20%= 3615146, rounded up= 4000000
Take the Min value -20% and round it down: 1087495 – 20%= 906246, rounded down= 900000
Take the difference divided by 4 (for 4 intervals) then round it up: 4000000 – 900000 =3100000 / 4 = 775000, rounded up = 800000.
So the interval will have a value of 800000.

,ROUND( (MaxTotalModifiedRound – MinTotalModifiedRound) /4 , – (LEN((MaxTotalModifiedRound – MinTotalModifiedRound) /4)-1)) as interval — Dif Min and Max value then divided by 4 then rounded up

id, YearNum, Total

,CAST( Min(Total) OVER() as int) as MinTotal
,CAST( MAX(Total) OVER() as int) as MaxTotal

,CAST( Min(Total) OVER() / 1.2 as int) as MinTotalModified
,CAST( MAX(Total) OVER() * 1.2 as int) as MaxTotalModified

,ROUND( CAST( Min(Total) OVER() / 1.2 as int) , -(len( CAST((Min(Total) OVER())/1.2 as int))-1) ) as MinTotalModifiedRound — Min Total rounded : Total – 20% then rounded down
,ROUND( CAST( MAX(Total) OVER() * 1.2 as int) , -(len( CAST((MAX(Total) OVER())*1.2 as int))-1) ) as MaxTotalModifiedRound — Max Total rounded : Total + 20% then rounded up



You can then add these values into the vertical axis properties of the charts:


It will then display like this:



The goal was a maximum of 4 seconds for rendering. Having lots of dataset and going back until 4 years of data, I decided to create Indexed views that will include only the grouping level necessary for the report.
There are 2 parameters in the report to choose the team and the date of analyze, I have therefore grouped my data this way in the indexed view. You can get a very high increase of performance with indexed views (x10+) ; however there is a lot of drawback with these particular views. See recommendation here.


One of the goals of the dashboard was to be able to visualize it from an Ipad. With SQL Server 2012 SP1, you can now view SSRS reports on the Ipad and Windows surface device, however the report will not necessary be resized correctly. One of the options is to use a command in the URL which will resize the report: &rc:Zoom=Whole%20Page. Using this command the report will render in full page weather you use your Ipad vertically or horizontally. "Whole Page" will attempt to zoom the report to such a level that the entire page is displayed at once in your report viewing frame – whether than means scaling it up or down.
Being able to visualize report from an Ipad is a great improvement, however it is still not easy to navigate or change parameters in small devises. I did a bit or research on internet and found that there are a lot of app. or tools to help visualized SSRS reports on mobile devises.

Here are my best 3:

  • Forerunners, they basically redeveloped the Report Manager in HTML5 so you can visualize SSRS reports on all devises. It is also much easier to use the parameters on small screen. It has been created by Jason Carlson, previous SSRS architect in MS (read interview here) and the new V3 seems promising:
    – Allowing designers to add client side JavaScript on text boxes or images
    – Define fixed size tables and matrixes
    – Scroll within a fixed region instead of expanding the page size
    – Enable editing of data with updatable controls
    – Easily post data to another application using HTML forms in your reports
    – Include information from other applications in your report via an IFrame
  • MobiWave, This App display SSRS report and also SharePoint documents
  • SSRS Report Viewer, This App display SSRS report and also SharePoint documents

My best bet is Forerunners so far as the license cost is low comparing to other products, and implementation very simple – no need to install any app. on each devises. There is also lots of other good tools, maybe better, but usually much more expensive. My goal here was only to display existing reports on mobile devises without any extra development.
Please let me know if you tried other / better tools!


Finally here is a screenshot of the dashboard:



Overall it is not a complicated dashboard to produce, it only takes some time to build the table/boxes for your KPIs (and make them rendering correctly and in-line once deployed!). I also add to work with the requirement of the customer which does not seem logical to me sometimes… like using histograms instead of line chart for sales trend…

What I mostly wanted to show here is that you can show data that does not look like simple tables with only few tricks in SSRS.

You will find the .rdl file here for VS 2010, I have modified and hardcoded all values so simply point the DataSource to the master db and you should be able to execute the report.

Let me know what you think and if you have other ideas please share with me!

[TFS] Accessibilité à Team Foundation Server

Lorsque l’on veut accéder à une fonctionnalité de Team Foundation Server (TFS), on se demande quel est l’outil le mieux adapté.

Je vous propose une liste des différents outils disponibles ainsi que leurs fonctionnalités.

Visual Studio

L’accès à TFS se fait via la fenêtre Team Explorer

Cette fenêtre donnes accès à toutes les fonctionnalités nécessaires à un développeur :

  • Accès aux Work items (My Works)
  • Ces modifications en attentes
  • Les reports
  • Les Builds
  • Et le Control de sources

Lire la suite

Intégrer Beyond Compare à Visual Studio

L’outil de comparaison et de fusion de fichiers fourni de base avec TFS est vraiment très basique et ne permet pas d’être efficace.

« Beyond Compare » est beaucoup plus convivial et complet que l’outil de base de TFS.

Il est disponible sur www.scootersoftware.com mais une licence est nécessaire à son utilisation.

C’est un outil recommandé à tous ceux qui ont besoin de :

  • Comparer le contenu d’un fichier, d’un dossier ou d’une arborescence
  • Synchroniser des dossiers avec une mise à jour en miroir, une mise à jour uni ou bidirectionnelle

Nous allons donc remplacer l’outil de comparaison et de fusion de TFS par Beyond Compare 3 qui propose beaucoup plus de fonctionnalités :

  • Utilisation des couleurs pour un meilleur suivi
  • Mise en valeur uniquement du texte qui a changé sur la ligne (et non toute la ligne)
  • Suivi évolué des modifications en superposant toutes les versions d’une même ligne
  • Et plein d’autres fonctionnalités

Lire la suite

Comment réduire la taille de la base de données de TFS

Lorsque l’on est administrateur TFS (Team foundation server), il convient de s’assurer d’une bonne maintenance des bases de données TFS.

Je vous propose dans cet article quelques bonnes pratiques et la procédure pour réduire et optimiser la taille de la base de données de Team foundation server.

En effet, j’ai récemment été confronté à ce problème, la taille de la base étant de 23 Go elle était donc difficile de maintenir.

Voici les propriétés de la base Tfs_DefaultCollection:

Le principe est de supprimer tout ce qui est de type : workspace , shelvset,et builds, puis les résultats de test et enfin de libérer l’espace disponible à la fin.
Pour commencer nous allons supprimer les workspaces inutiles, les shelvest, les builds, et les éléments du contrôle de sources qui sont en état de suppression. Lire la suite

Build 2014 – Migration d’une application Windows Phone et Windows 8 vers les Universal Apps (Channel 9) : Stéphanie Hertrich, expert technique Microsoft France, reçoit John Thiriet, MVP client dev chez MCNEXT – via @ch9

Build 2014 – Applications Windows Phone 8.1 en HTML et en Javascript (Channel 9) : David Rousset, Microsoft France, reçoit Guillaume Leborgne, MCNEXT – http://bit.ly/1pX4SDs via @ch9

Best practices for WinJS applications

It’s a very exciting time for writing HTML5 native apps for Windows 8, and now for Windows Phone 8.1. WinJS is a very powerful framework but when you start using it, you may experience some trouble. This article will try to give you some advices on how to design your code, and how to avoid the most common pitfalls.

it’s HTML5 and javascript, but it’s not web

This is my first advice and you should take it very seriously ! You are using HTML5 to build native apps. It requires a different mindset, both in coding and user experience. If you are a web veteran, you might have some habits that you will have to lose. In such an application things are stateful, and you are composing screens based on fragments of html/javascript/CSS that should be independant. If you are familiar with single page applications, you are probably familiar with this mindset.
Another point to keep in mind is the security context. In a Windows application, you will not have to deal with CORS concerns, but you will have to be aware of other security or platform restrictions. Let’s name a few :

  • you are not able to use "alert" or "confirm", use system dialogs instead.
  • you are not allowed to inject anything through "innerHTML", HTML is fine, but adding scripts may trigger an error.

learn javascript

Many developpers, especially in the .NET world, tends to consider javascript as a 2nd rank language, something dirty. Others may think they know it because it ressemble C# or java (look, it has curly brackets…), and because they have used a jQuery plugin long ago.
The truth is that javascript is a very powerful language, and that it’s totally different from languages like C# or java (static, strongly typed, object oriented). Javascript is ascripting, functional, prototyped language.
There is beauty and horsepower in this language, but you also have some horrible things. A book like "javascript the good parts" from Douglas Crockford may help you understand which parts to use and why.

learn promises

If you enter Windows 8 and/or Windows Phone 8.1 application, you enter a world of asynchronous programming. In javascript asynchronous means callbacks and promises, at least until EXCMAScript 6 (which should introduce an equivalent of C# async/await). Many libraries uses promises to manage asynchronous calls, it is a very common pattern (jQuery, Angular, Node.js, …).

The principle is dead simple. When you call for an asynchronous operation, you don’t get a direct result like you would in an arythmetic operation :

var a = 12 + 42;

Instead, when calling an asynchronous operation you will get a promise that you will be notified for the result when it becomes available. To get notified, you will have to tell that promise what you want to do when the operation will succeed, or what to do if it fails. You will end up with something like this :

myFunkyAsynchronousCall().done(function successCallback(result){
  //what to do when successfull
}, function errorCallback(error){
  //what to do on error

In WinJS you can build promises with "done" or with "then". Both functions has the same parameters (complete, error, and progress callbacks). The difference is that "then" is returning a promise, it’s a continuation operation, while "done" returns nothing and it’s the end of the asynchronous pipeline. The "then" is pipelining errors but not "done". Be mindfull that pipelining errors make them hard to debug…

Generally speaking use "then" for chaining promises. Otherwise, use "done". Just like this :

myFunkyAsynchronousCall().then(function successCallback(result){
  return anotherFunkyAsyncCall();
}).done(function secondSuccessCallback(2ndAsyncCallResult){
  //pipeline success
}, function pipelineErrorCallback(error){
  //what to do on error

benefit from HTML5, CSS3, and ECMAScript 5

You are in a place where you know which features you can use. Embrace it ! this is especially true for CSS3 layouts capabilities like flexbox, CSS grid, and properties like "box-sizing". If all that does not sound familiar, go learn the benefits of CSS3. CSS grid alone can saves you hours of margin+padding nightmares.

you have fragments, use them to store your variables

If you look at what you get when you create a new WinJS project with Visual Studio, you will see a bunch of variables floating around. The Windows 8 samples are no better for that matter. Remember that those code portions are there to demonstrate Windows or WinJS capabilities, not javascript best practices.

You will compose your UI through independent peaces of HTML and javascript. With "WinJS.UI.Pages.define" or WinJS controls, you will define controllers attached to a fragment of HTML. If a variable belongs to a piece of UI, put it inside the code of this fragment.

For exemple, please, please, DON’T write code like this :

(function () {
    "use strict";
    var myvariable;

    WinJS.UI.Pages.define("/pages/home/home.html", {
        ready: function(element, options){
        	myvariable = options.someNavigationParameter;

In the exemple above "myvariable" clearly belongs to the page itself but it is static. Using it like this is bad for several reasons. I will just detail two of them :

  • if you have closure relying on this variable, you may end up with memory leaks because the variable will retain the whole page in memory.
  • you may end up with strange behaviors when you will navigate back and forth to this page, because the variable will still exist with a previous value. Combined with a few asynchronous calls, you will have a very exciting time debugging this kind of issues.

Avoiding those troubles is as easy as this :

(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        ready: function(element, options){
        	this.myvariable = options.someNavigationParameter;

scope your DOM selectors

This one is also related to the fragment based approach. Imagine that you have a page called "detail". From this "detail" page you navigate to the same "detail" page but with different parameters. If you are using DOM selectors based on document like "document.getElementById" you will end up with strange behaviors.
The reason is quite simple. When navigating to the second page, getElementById will return the first node with that Id. Depending on your code, the first instance of the page may still be in DOM at that point in time, so your selector will give you a soon to die DOM element. Another case when non-scoping DOM selectors can hurt you is when you are navigating fast in the application. For example opening a page and clicking as fast as possible on the back button. If your page use asynchronous call, and you leave the page before the asynchronous call returns, all your global selectors will return nothing.

Scoping your selector is very easy. First, the "init", "load" and "ready" functions are taking the fragment element as an argument. Secondly, the page object itself has a property called "element" that points to the DOM element of that specific page. Just call "page.element.querySelector(‘#myDomElement’)". If you are using jQuery for your selectors, remember that jQuery allows you to use scope : "$(‘#myDomElement’, page.element).css(‘display’, ‘none’);

scope your CSS

For better maintainability, we tend to have a CSS document for each fragment. Those CSS are loaded on the fly when WinJS loads each fragment, but they are loaded only once. If you don’t scope your CSS selectors, you may end up with naming collisions. Let’s take an example : fragment A define a CSS class ".myButton" with color red, and fragment B define a CSS class ".myButton" with color green. You navigate to fragment A, the engine loads the associated CSS and the button is red. Now you navigate to fragment B. The engine loads the corresponding CSS and the button green. So far so good. Now if you return to fragment A, the button will stay green because the CSS for fragment A is already loaded and overriden with the one from fragment B. What is funny with this problems is that the resulting behavior will come after some time, and it will depends on the order in which you navigate. Fortunately, the DOM explorer in Visual Studio will help you to find out because you could see the file owning the styles applyed to an element.

As well as what we described for javascript selectors, the best thing to do is to scope your CSS. If you use something like ".fragmentA .myButton { background-color: red }", you lower considerably the risk for namespace collisions.
Using a CSS preprocessor like ".less" may help a lot because you will be able to nest elements instead of cloning selectors. For example, you will write :

.fragmentA {
  .myButton {
    background-color: red

The good news is that you could use less today within Visual Studio, and enforce it with Visual Studio extensions like "Web essentials"

use javascript’s bind

The "this" context in javascript is something that is not always fun. Fortunately there are helpers that could help a lot, and the "bind" function is among the most interesting. It’s a function of the function object, that returns a function bound to a specific "this" context.
Well… it’s probably better to take an example :

(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        ready: function(element, options){
        	var page = this;
        	page.myButton = element.querySelector('#myButton');
        	page.myButton.addEventListener('click', page.buttonClicked.bind(page));

        buttonClicked: function(arg){
        	var page = this;
        	//do something with your page

The ".bind(page)" used when registering the event forces the "this" context to the page object inside the "buttonClicked" function. Without it, the "this" variable Inside "buttonClicked" would correspond to the button itselt.

use libraries

A Windows or Windows Phone apps written with WinJS is not web but it is still HTML / CSS / javascript. There are tons of libraries and jQuery plugins out there that will help you make great apps. There are also some librairies dedicated to WinJS, like WinJS Contrib that could help you a lot.

have fun !

WinJS is not perfect but I have a lot of fun writing applications with it, I hope you will have too.

Retour sur la conférence NCRAFTS 2014

Pendant que certains de mes collègues participaient au hackaton organisé par Microsoft pour l’évènement //publish, j’ai pour ma part eu le plaisir de me rendre à la première édition de la conférence NCRAFTS organisée le 16 mai dernier par l’association ALT.NET. Cette association promeut les solutions alternatives en .NET et une vision du développement informatique axée autant sur l’artisanat que sur l’ingénierie. Je vous propose donc un compte-rendu de ce que j’ai pu glaner au cours des session auxquelles j’ai pu assister. Lire la suite

Et c’est parti pour le hackathon //publish en direct de MCNEXT Centre-Est !!!!


Recevez les nouvelles publications par mail.

Rejoignez 27 autres abonnés