Récupérer les données d’une liste SharePoint avec REST

Depuis SharePoint 2013, Microsoft offre une interface REST (Representational State Transfer) qui permet d’effectuer des opérations CRUD sur son site SharePoint 2013 avec les langages web standards. Jusque là, il était limité au modèle objet client ou alors pas très exploitable comme en 2010 via le web service WCF nommé ListData.svc.

Dans cet article nous verrons comment lire (le ‘R’ de CRUD) des données d’une liste SharePoint 2013 avec du javascript.

Voici les requêtes usuelles les plus basiques :

Récupérer toutes les listes de notre site http://server/site/_api/lists
Récupérer tous les éléments d’une liste par son titre http://server/site/_api/web/lists/getbytitle(‘listname’)/items
Ci-dessous un exemple de résultat où on peut voir le nom interne des colonnes et les données qui y sont stockées

Récupérer les titres et id de tous les éléments d’une liste par son titre : http://server/site/_api/web/lists/getbytitle(‘listname’)/items?$select=Title,Id
Récupérer les éléments d’une liste et les ordonner par leur titre par exemple: http://server/site/_api/lists/getbytitle(‘listname’)/items?$orderby=Title
Vous pouvez tester ces urls en y renseignant votre serveur et nom de liste dans IE Firefox et Chrome. Attention toutefois à IE 10 qui ne rend pas toujours bien le xml généré.

Voyons maintenant comment utiliser ces résultats et les interpréter avec du javascript.

Sous visual sutdio 2012 ou 2013, nous allons créer un projet SharePoint 2013 vide :

On y ajoute une page application :

On a une solution qui ressemble à l’image ci-dessous :

On crée une liste sur notre site avec 3 colonnes : titre, firstname et workphone avec quelques données :

On va utiliser la librairie Jquery qu’on ajoute à notre projet et ne pas oublier de la référencer dans la page application.
Ci-dessous les lignes à ajouter pour notre exemple dans un content place holder « PlaceHolderAdditionalPageHead ».

    <SharePoint:ScriptLink ID="ScriptLink1" Language="javascript" Name="/_layouts/15/js/jquery.min.js" runat="server" Localizable="false" />
    <SharePoint:ScriptLink ID="ScriptLink2" Language="javascript" Name="/_layouts/15/js/jquery-ui.js" runat="server" Localizable="false" />
   <SharePoint:ScriptLink ID="ScriptLink3" Language="javascript" Name="/_Layouts/15/js/JavaScript1.js" runat="server" Localizable="false" /> 

On ajoute un bouton sur notre page suivi d’une div qui va afficher les résultats :

    <input id="cmdGetCustomersList" type="button" value="Get Customers List" /></pre>
<div id="results"></div>
<pre>

Et on prépare l’appel à la fonction javascript au clique du bouton qui a l’ID cmdGetCustomersList :

  <script type="text/javascript"> 
        jQuery(document).ready(function () {
            $("#cmdGetCustomersList").click(onGetCustomersList);
        });
        </script>

On ajoute un fichier Javascript qui contiendra les fonctions d’appel aux requêtes REST, la méthode onGetCustomerList : dans laquelle on commence par vider le div de résultat, ensuite on construit la requête REST. _spPageContextInfo.webAbsoluteUrl nous renvoie le contexte courant. Comme vu plus haut, on va récupérer les éléments de notre liste « customersCellenza » et sélectionner leur titre, firstname et workphone. On exécute la requête ainsi formatée. On récupère les résultat sous forme JSON et on set les fonctions ‘success’ et ‘error ‘.

function onGetCustomersList() {
    // nettoyage de la div de résultat
    $("#results").empty();

    // construction de la requite rest
    var requestUri = _spPageContextInfo.webAbsoluteUrl +
                     "/_api/Web/Lists/GetByTitle('customersCellenza')/Items" +
                     "?$select=Title,firstname,workphone";

    // execution ajax de la requite rest
    $.ajax({
        type: "GET",
        url: requestUri,
        contentType: "application/json",
        headers: { Accept: "application/json;odata=verbose" },
        success: onListDataReturned,
        error: onError
    });
} 

La fonction onListDataReturned de retour qui consomme les données rendues par la requête rest.

function onListDataReturned(data) {
    $("#results").empty();
    var odataResults = data.d.results;
    var i = 0;
    $("<h2>").html("Customers").appendTo("#results");
    while (odataResults[i]) {
        var resultats = "<li>" + odataResults[i].Title + " - " + odataResults[i].firstname + "-" + odataResults[i].workphone + "</li>";
        $("#results").append($("<ul>").append(resultats));
        i++;
    }
}

Et la fonction onError en cas d’erreur :

 function onError(err) {
    $("#results").text("ERROR: " + JSON.stringify(err));
} 

On obtient une page qui ressemble �

Après le clique sur le bouton “get customer list” on a