Que de belles choses dans ce titre accrocheur : comment est-ce que SharePoint Foundation 2010 nous permet de combiner tout ça.

Quelques définitions dans un premier temps:

ADO.NET Data Services va permettre de consommer des services qui renvoient des données, ces données étant sérialisées en XML, sous le format JSON (JavaScript Object Notation) ou ATOM.

REST (Representational State Transfer) n’est pas un protocole, mais juste une architecture, un moyen de construire une application.

Nous allons dans le billet qui suit voir comment récupérer des données d’une liste SharePoint (ici des tâches) depuis une page ASPX hébergée dans notre site, puis afficher ces infos en manipulant le dom de notre page grâce à JQuery …

Créons une page ASPX simple depuis SharePoint Designer 2010 (et oui, les temps changent, maintenant SharePoint Designer rocks), créons un fichier JavaScript (en effet, nous allons manipuler les données en JavaScript) puis ajoutons la librairie JQuery.

Nous obtenons donc dans notre bibliothèque de pages

Ajoutons une référence vers les deux fichiers JavaScript depuis notre page demo.aspx, puis copions le code suivant :

  1: <asp:ScriptManager runat="server" ID="ScriptManager"></asp:ScriptManager>
  2: <select id="TaskPriority">
  3:  <option value="" default>All</option>
  4:  <option value="(1) High">High</option>
  5:  <option value="(2) Normal">Normal</option>
  6:  <option value="(3) Low">Low</option>
  7: </select> 
  8: <input type="button" value="Go get task" onclick="GetTasks()" /><br /><br />
  9: <span style="color: red;" id="result"/>

Nous positionnons sur la page une liste déroulante contenant quatre valeurs : all, High, Normal et Low. Nous ajoutons ensuite un bouton, qui réagit à l’action d’un clique et fait appel au code client “GetTasks()”. Le dernier élément “span” va permettre d’afficher la liste des tâches récupérées une fois le bouton pressé.

Les code JavaScript nécessaire est:

  1: function GetTasks()
  2: {
  3:  var priority = $("#TaskPriority").val();
  4:  
  5:  var param = "";
  6:  if (priority != "")
  7:   param = "?$filter=(PriorityValue eq '" + priority + "')";
  8:  
  9:  var url = "/_vti_bin/ListData.svc/Tasks" + param;
 10:  Execute(url, OnGetTaskCompleted);
 11: }
 12: 
 13: function OnGetTaskCompleted(result)
 14: {
 15:  var data = result.get_object(); 
 16:  var html = "";
 17:  
 18:  for (var i = 0; i < data.d.results.length; i++)
 19:  {
 20:   var task = data.d.results[i];
 21:   html += task.Title + "<br />";
 22:  }
 23:  
 24:  $("#result").html(html); 
 25: }
 26: 
 27: function Execute(url, callback) 
 28: {
 29:   var req = new Sys.Net.WebRequest();
 30:   req.set_url(url);
 31:   req.get_headers()["accept"] = "application/json";
 32:   req.set_httpVerb("GET");
 33:   req.add_completed(callback);
 34:   req.invoke();
 35: }

La méthode “GetTasks()” construit la requête ADO.NET Data Services sur la syntaxe :

  1: /_vti_bin/ListData.svc/Tasks

Il est ensuite possible d’ajouter un filtre à cette requête pour ne pas tout rapatrier sur le poste client et du coup ne pas surcharger le réseau. Il faut ajouter le paramètre “filter” à l’URL, en ajoutant la requête de filtre en complément. Dans la méthode “GetTasks()”, ce filtre est construit dynamiquement sur le champs “PriorityValue” en prenant la valeur sélectionnée dans la liste déroulante. Une fois l’URL construite, la méthode ”Execute()” est appelée ligne 10. Cette méthode permet d’envoyer une requête Web vers l’URL spécifiée (ligne 29). L’appel est asynchrone, une fois la réponse reçue, la méthode “OnGetTaskCompleted()” passé en paramètre de callback (ligne 27) est appelée. Cette méthode récupère l’objet JSON, le converti et récupère toutes les tâches renvoyées par la requête.

Une fois tout ça mis en place, ouvrez votre navigateur préféré et chargez la page Demo.aspx. Vous pourrez ainsi afficher toutes les tâches, ou les tâches par priorité, et ceci sans refraîchir la page. Je pense que l’on peut tout de suite voir de vraies applications de tout ça, non?

- Julien