Partager via

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

  • Article

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

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

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

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 aux données externes avec le modèle objet client SharePoint

Le modèle objet client SharePoint permet 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.

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 effectuer des opérations de base avec le modèle objet client .NET Framework (CSOM) SharePoint.

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. Specify the app settings, including app name, the site URL for debugging the app, and how you want to host the app (Autohosted, Provider-hosted, SharePoint-hosted). Pour plus d’informations sur les options d’hébergement, voir Choisir des modèles pour le développement et l’hébergement de votre complément 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éfinissez l’URL du service OData sur 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