Une opération très intéressante réalisable avec l'EcmaScript est la récupération des éléments d'une liste. Effectivement, il peut être très pratique de pouvoir exécuter une requête CAML sur une liste et d'en afficher le résultat sans effectuer de postback. Nous allons voir un exemple simple qui va se baser sur la liste suivante :
 

Nous allons créer une Visual WebPart qui effectuera des requêtes sur cette liste et affichera le résultat. Ouvrez donc Visual Studio 2010 et créez un nouveau projet de type Empty SharePoint Project que vous nommerez AreaProg.EcmaScript.Items :
 

Etant donné que nous allons déployer un fichier js dans le dossier Layouts de SharePoint, déployez notre solution au niveau de la ferme.
 

Cliquez ensuite avec le bouton droit de votre souris sur votre projet et choisissez Add > New Item. Dans la fenêtre qui apparaît, sélectionnez Visual WebPart et nommez-la EcmaItems.
 

Sélectionnez ensuite la feature Feature1 et modifier sa propriété Folder Name sur EcmaItems. Nous allons ensuite ajouter un div dans cette Web Part qui sera destiné à contenir le résultat récupéré en JavaScript. Le code du fichier ascx est donc le suivant :
 

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %> 
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="EcmaItemsUserControl.ascx.cs" Inherits="AreaProg.EcmaScript.Items.EcmaItems.EcmaItemsUserControl" %>

<div id="EcmaList"></div>

L'étape suivante consiste à créer notre fichier JavaScript qui va contenir notre code. Mais avant cela, nous devons ajouter un dossier layouts mappé à SharePoint. Faîtes donc un clic droit sur votre projet et choisissez Add > SharePoint "Layouts" Mapped Folder. Faites ensuite un clic droit sur le dossier créé et choisissez New > Add Item, sélectionnez JScript File et nommez-le core.js.
 

Ouvrez ensuite le fichier EcmaItemsUserControl.ascx.cs. Nous allons modifier ce fichier pour qu'il charge automatiquement le fichier js que nous venons de créer. Remplacez donc la fonction Page_Load par :
 

protected override void OnPreRender(EventArgs e)
{
    ScriptLink.RegisterOnDemand(this.Page, "sp.js", false);
    Page.ClientScript.RegisterClientScriptInclude("EcmaList", "/_layouts/AreaProg.EcmaScript.Items/core.js");
}

En n'oubliant pas d'inclure la clause using suivante :
 

using Microsoft.SharePoint.WebControls;

La première ligne du code permet d'inclure le fichier sp.js à notre page. Nous rappelons que ce fichier contient une grande partie de la déclaration de l'EcmaScript de SharePoint. La seconde ligne permet quant à elle d'ajouter un tag d'inclusion de notre fichier JavaScript. Avant de commencer le code, cliquez avec le bouton droit de votre souris sur votre projet et choisissez Add > SharePont "Images" Mapped Folder et ajoutez-y les deux images suivantes :
 

Rendez-vous maintenant dans votre fichier js et insérez-y la ligne de code suivante :
 

ExecuteOrDelayUntilScriptLoaded(Start, "sp.js");

Cette méthode permet d'attendre que le fichier sp.js soit totalement chargé. Une fois que c'est le cas, la fonction Start est appelée. Déclarons donc cette fonction de cette manière :
 

function Start() {

    this.div = document.getElementById("EcmaList");
    this.context = SP.ClientContext.get_current();
    this.list = context.get_web().get_lists().getByTitle("EcmaList");

    this.context.load(this.list);
    this.context.executeQueryAsync(Function.createDelegate(this, this.onStaturpLoaded), Function.createDelegate(this, this.onError));

}

Nous commençons par récupérer une référence à notre div et la stockons dans la variable div. Nous récupérons également le context JavaScript actuel grâce à la fonction get_current de l'objet SP.ClientContext. L'étape suivante consiste à récupérer une référence à notre liste SharePoint. Nous commençons par récupérer une référence au site web actuel grâce à la méthode get_web. Nous utilisons ensuite get_lists pour récupérer l'ensemble des listes de ce site et enfin, nous appelons la méthode getByTitle pour récupérer celle portant le nom EcmaList. Nous utilisons ensuite la méthode load pour charger cette liste. Enfin, nous appelons la méthode executeQueryAsync pour exécuter la requête. Si celle-ci réussit, la fonction onStartupLoaded est appelée. Dans le cas contraire, c'est la méthode onError qui est appelée. Cette méthode va simplement afficher une erreur :
 

function onError(sender, args) {

    this.div.innerHTML += "<div style="color:red;font-weight:bold">Erreur : " + args.get_message() + "</div>";

}

Pas de secret donc, nous appelons simplement la méthode get_message pour afficher un descriptif de l'erreur rencontrée. Déclarons également la fonction onStartupLoaded de cette manière :
 

function onStaturpLoaded(sender, args) {

    this.div.innerHTML = "<h1>" + this.list.get_title() + " ( " + this.list.get_itemCount() + " item(s) )</h1><br />";

    var query = new SP.CamlQuery();
    query.set_viewXml("<View />");

    this.items = this.list.getItems(query);
    this.context.load(this.items, 'Include(Title, Id, LastName, FirstName, Age, Gender)');
    this.context.executeQueryAsync(Function.createDelegate(this, this.onItemsLoaded), Function.createDelegate(this, this.onError));

}

Pour être sûr que nous avons bien récupéré la liste, nous affichons son nom et le nombre d'élément qu'elle contient dans un h1. Pour ce faire, il suffit d'utiliser les méthodes get_title et get_itemCount. Nous allons ensuite, dans un premier temps, récupérer tous les éléments de la liste et les afficher. Pour cela, il nous faut créer la requête CAML définissant la vue contenant les éléments. Nous créons donc un objet de type SP.CamlQuery. Nous utilisons ensuite sa méthode set_viewXml pour modifier la requête en elle-même. Nous mettons un élément View vide pour récupérer tous les éléments de la liste. Nous utilisons ensuite la méthode getItems pour récupérer les éléments de la vue. Nous utilisons également la méthode load pour charger ces éléments. Ici, nous faisons passer un deuxième paramètre qui va indiquer ce que nous récupérons de ces éléments. Effectivement, il serait inutile de récupérer tous les champs de ces éléments si nous voulons n'en n'afficher que 3. Nous utilisons donc le mot-clé Include pour indiquer les champs à inclure (sorte de ViewFIelds finalement). Enfin, nous exécutons les requêtes en attente. Encore une fois, la méthode onError sera exécutée en cas d'échec de l'exécution de la requête. Dans le cas contraire, la méthode onItemsLoaded le sera. Voici le corps de cette fonction :
 

function onItemsLoaded(sender, args) {

    var itemEnumerator = this.items.getEnumerator();

    while (itemEnumerator.moveNext()) {

        var spitem = itemEnumerator.get_current();

        this.div.innerHTML += "<h2>" + spitem.get_item("Title") + " <img src='/_layouts/images/AreaProg.EcmaScript.Items/" + spitem.get_item("Gender").toLowerCase() + ".png' /></h2><div style="padding-left:20px;" id="item" + spitem.get_id() + "">"
                           + " - " + spitem.get_item("LastName").toUpperCase() + " " + spitem.get_item("FirstName") + "<br />"
                           + " - " + spitem.get_item("Age") + " years old<br />"
                           + "</div><br />";

    }

}

Si cette fonction est exécutée, c'est que this.items a bien été rempli avec les informations des éléments récupérés dans la liste. Nous pouvons donc récupérer un énumérateur sur cette collection grâce à la méthode getEnumerator. Nous utilisons ensuite celui-ci de la même manière qu'en C#. Ainsi, nous bouclons dessus tant que la fonction moveNext renvoi une valeur. Nous récupérons également l'élément courant grâce à la méthode get_current de cet énumérateur. Enfin, nous affichons la valeur des champs de cet élément avec un peu de mise en forme. Pour récupérer la valeur d'un champ, nous devons utiliser la méthode get_item. Il suffit simplement de lui faire passer le nom du champ en paramètre. Bien entendu, ce nom devra être contenu dans la liste des Include passée en paramètre à la fonction Load, sinon une erreur sera générée. Si nous testons cette WebPart, le résultat sera le suivant :
 

Comme vous le voyez, tous nos éléments sont bien récupérés et affichés. Modifions maintenant légèrement notre requête pour ne récupérer que les hommes :
 

query.set_viewXml("<View><Query><Where><Eq><FieldRef Name='Gender' /><Value Type='Text'>Male</Value></Eq></Where></Query></View>");

Cette fois, la WebPart affichera ceci :
 

Nous pouvons également encore complexifier la requête, cela ne pose pas de problème. Ainsi, nous pouvons récupérer tous les garçons de plus de 23 ans de cette manière :
 

query.set_viewXml("<View><Query><Where><And><Eq><FieldRef Name='Gender' /><Value Type='Text'>Male</Value></Eq><Gt><FieldRef Name='Age' /><Value Type='Number'>23</Value></Gt></And></Where></Query></View>");

Le résultat affiché serait :
 

Télécharger les sources