Utiliser la bibliothèque de code client pour accéder aux données externes dans SharePoint

Découvrez comment utiliser le modèle objet client SharePoint pour utiliser des objets Services Business Connectivity (BCS) dans SharePoint à l’aide de scripts basés sur un navigateur.

Cet article montre comment configurer une liste externe qui récupère des données à partir d’une source de protocole Open Data (OData) à l’aide du modèle objet client dans SharePoint.

Conditions préalables à l’accès aux données externes à l’aide SharePoint modèle objet client

Conditions requises pour être en mesure de développer des applications à l'aide du modèle d'objet client SharePoint sont les suivantes :

Concepts de base à connaître lors de l’accès à des données externes avec le SharePoint objet client

Le SharePoint objet client fournit un moyen d’accéder aux données externes à l’aide d’appels côté client qui imitent les API côté serveur. Pour comprendre comment il fonctionne et comment l'utiliser, voir les articles dans le tableau 1.

Le tableau 1. Concepts de base pour l'utilisation du modèle objet client

Article Description
Effectuer des opérations de base avec du code de bibliothèque client dans SharePoint
Découvrez comment écrire du code pour mettre en forme des opérations de base avec SharePoint .NET Framework modèle objet client (CSOM).

Créer un Complément SharePoint pour accéder aux données externes à l'aide du modèle objet client

Les procédures suivantes montrent comment définir un Complément SharePoint et configurer une page Web pour effectuer des requêtes à l'aide des objets et méthodes du modèle objet client pour récupérer des données à partir d'une source de données externe.

Pour créer un complément SharePoint

  1. Ouvrez Visual Studio 2012.

  2. Créez un projet d’application pour SharePoint.

  3. Spécifier les paramètres d'application, y compris le nom de l'application, l'URL du site pour le débogage de l'application, et comment vous voulez héberger l'application (auto-hébergement, hébergé par le fournisseur, hébergée sur SharePoint). Pour plus d'informations sur les options d'hébergement, voir Choisir les modèles de développement et l'hébergement d'un complément pour SharePoint.

  4. Cliquez sur Terminer pour créer l'application.

Pour générer le type de contenu externe

  1. Dans L'Explorateur de solutions, ouvrez le menu contextuel du projet et choisissez Ajouter, types de contenu pour la source de données externe.

  2. Dans l'Assistant Définir la OData Source, entrez l'URL du service OData que vous souhaitez vous connecter. Dans ce cas, vous utiliserez la source Northwind OData publiée à http://www.odata.org/ecosystem. Définir l'URL du service OData pour http://services.odata.org/Northwind/Northwind.svc/

    Spécifiez un nom pour la source de données, puis choisissez suivant.

  3. Une liste des entités qui sont exposés par le OData Service apparaît. Choisissez l'entité de clients. Vérifiez que la case à cocher créer des instances de liste pour les entités de données sélectionné (à l'exception des opérations de Service) est activée.

  4. Cliquez sur Terminer.

Exemple de code : ajouter des scripts et du code HTML à la page Default.aspx

À ce stade, vous disposez du type de contenu externe et une liste externe qui affiche les données à partir de la source de Netflix OData.

L'objectif suivant consiste à modifier la page default.aspx que vous avez créé lorsque vous avez créé votre application. Vous ajoutez un conteneur qui contiendra les résultats de la requête est exécutée avec le chargement de la page. En exécutant les scripts de l'événement de chargement de page, vous assurez que le script sera exécuté chaque fois que la page est explorée, et les appels de modèle objet client qui en résulte seront effectués à l'origine de Netflix OData pour ajouter des enregistrements à la page.

Pour ajouter le conteneur à la page Default.aspx

  1. Dans L'Explorateur de solutions, ouvrez la page Default.aspx située dans le module de Pages.

  2. Ajoutez l'élément div suivant à la page :

  
<div id="displayDiv"></div>
  1. Enregistrez la page.

Enfin, vous ajoutez le code dans le fichier App.js qui s'exécute lorsque le chargement de la page.

Pour modifier le fichier App.js pour rendre le client appelle modèle objet

  1. Ouvrez le fichier App.js dans le module de Scripts de votre projet SharePoint.

  2. Collez le code suivant à la fin du fichier.

  $(document).ready(function () {

    // Namespace
    window.AppLevelECT = window.AppLevelECT || {};

    // Constructor
    AppLevelECT.Grid = function (hostElement, surlWeb) {
        this.hostElement = hostElement;
        if (surlWeb.length > 0 &amp;&amp; surlWeb.substring(surlWeb.length - 1, surlWeb.length) != "/")
            surlWeb += "/";
        this.surlWeb = surlWeb;
    }

    // Prototype
    AppLevelECT.Grid.prototype = {

        init: function () {

            $.ajax({
                url: this.surlWeb + "_api/lists/getbytitle('Customer')/items?$select=BdcIdentity,CustomerID,ContactName",
                headers: {
                    "accept": "application/json",
                    "X-RequestDigest": $("#__REQUESTDIGEST").val()
                },
                success: this.showItems
            });
        },

        showItems: function (data) {
            var items = [];

            items.push("<table>");
            items.push('<tr><td>Customer ID</td><td>Customer Name</td></tr>');

            $.each(data.d.results, function (key, val) {
                items.push('<tr id="' + val.BdcIdentity + '"><td>' +
                    val.CustomerID + '</td><td>' +
                    val.ContactName + '</td></tr>');
            });

            items.push("</table>");

            $("#displayDiv").html(items.join(''));
        }
    }

    ExecuteOrDelayUntilScriptLoaded(getCustomers, "sp.js");
});

function getCustomers() {
    var grid = new AppLevelECT.Grid($("#displayDiv"), _spPageContextInfo.webServerRelativeUrl);
    grid.init();
}

Appuyez sur F5 pour déployer l'application pour SharePoint. Accédez à la page Default.aspx dans l'application, et une liste de clients s'affiche dans la page.

Voir aussi