Utiliser le widget Affichage de liste du bureau expérimental dans les compléments SharePoint
Vous pouvez utiliser le widget Affichage de liste du bureau sur une page web, même si la page n’est pas hébergée dans SharePoint. Utiliser le widget Affichage de liste dans vos compléments pour afficher les données des listes hébergées sur un site SharePoint.
Avertissement
Les widgets web Office expérimentaux sont proposés pour simplifier les recherches et le partage de commentaires. Ne les utilisez pas en phase de production. Le comportement des widgets web Office peut considérablement changer dans les prochaines versions. Lisez les termes du contrat de licence des widgets web Office expérimentaux.
Comme le widget d’affichage de liste standard, le widget d’affichage de liste vous permet d’afficher les données dans une liste SharePoint. Il n’est en outre pas limité aux compléments et sites web hébergés par SharePoint.
Widget Affichage de liste de bureau affichant des données dans une liste
Vous pouvez spécifier l'affichage à utiliser pour afficher les données dans la liste SharePoint. Le widget d'affichage de liste affiche les colonnes et les éléments dans l'ordre spécifié par l'affichage.
Le widget d'affichage de liste utilise la bibliothèque inter-domaines pour obtenir les données de la liste. Pour cette raison, la communication s'effectue au niveau du client.
Remarque
Le widget Affichage de liste du bureau n’active pas tous les scénarios de l’affichage de liste natif.
Les scénarios suivants n’ont pas été activés dans la version actuelle du widget :
- Utilisation du widget dans des schémas d'authentification non pris en charge nativement par la bibliothèque inter-domaines.
- Utilisation du widget avec des sources de données autres que des listes ou des bibliothèques SharePoint.
- Liaison des données du widget.
- Affichages utilisateur tactiles.
- Édition utilisateur incorporée.
- Affichage des informations de présence.
- Fourniture de modèles de rendu personnalisés.
- Scénarios locaux. Pour le moment, le widget ne fonctionne qu'avec SharePoint Online.
Conditions préalables à l’utilisation des exemples de cet article
Pour suivre les exemples de cet article, vous devez disposer des éléments suivants :
Visual Studio 2013 ou version ultérieure.
Gestionnaire de package NuGet. Pour plus d’informations, consultez Installation des outils clients NuGet.
Un environnement de développement SharePoint (isolation d'application nécessaire pour les scénarios locaux).
Package NuGet des widgets web Office expérimentaux Pour savoir comment installer un package NuGet, consultez l’article Interface utilisateur du Gestionnaire de Package NuGet. Vous pouvez également parcourir la page de la galerie NuGet.
Utiliser le widget d’affichage de liste de bureau dans un complément SharePoint hébergé par un fournisseur
Dans cet exemple, il existe une page simple hébergée à l'extérieur de SharePoint qui déclare un widget d'affichage de liste de bureau.
Pour utiliser le widget d'affichage de liste, vous devez effectuer les opérations suivantes :
Créer un Complément SharePoint et des projets web.
Créer une liste dans le site web de complément. Cette étape garantit également qu’un site web de complément est créé lorsque les utilisateurs déploient le complément.
Remarque
La bibliothèque inter-domaines nécessite l’existence d’un site web de complément. Le widget Affichage de liste du bureau communique avec SharePoint via la bibliothèque inter-domaines.
Créer une page de complément qui déclare une instance de widget d’affichage de liste à l’aide de la balise HTML.
Pour créer un complément SharePoint et des projets web
Ouvrez Visual Studio en tant qu’administrateur. (Pour cela, sélectionnez avec le bouton droit de la souris l’icône Visual Studio dans le menu Démarrer, puis sélectionnez Exécuter en tant qu’administrateur.)
Créez un projet à l’aide du modèle Complément SharePoint. Le modèle de complément SharePoint se trouve sous Modèles>Visual C#>Office/SharePoint>Compléments.
Fournissez l’URL du site web SharePoint que vous souhaitez utiliser pour le débogage.
Sélectionnez Hébergement par le fournisseur comme option d’hébergement pour votre complément.
Remarque
Vous pouvez également utiliser le widget Affichage de liste du bureau avec d’autres options d’hébergement, voire avec des compléments Office ou votre propre site web.
Sélectionnez Application Web Forms ASP.NET comme type de projet d'application web.
Sélectionnez Windows Azure Access Control Service comme option d'authentification.
Pour créer une liste sur le site web de complément
Sélectionnez le projet de complément SharePoint dans l’Explorateur de solutions, puis sélectionnez Ajouter>Nouvel élément.
Sélectionnez Éléments Visual C#>Office/SharePoint>Liste. Entrez Annonces dans la zone de texte Nom, puis sélectionnez Ajouter.
Sélectionnez Créer une instance de liste basée sur un modèle de liste existant. Sélectionnez le modèle Annonces, puis Terminer.
Pour ajouter une nouvelle page qui utilise le widget d’affichage de liste de bureau
Sélectionnez le dossier Pages dans le projet web dans l’Explorateur de solutions.
Copiez le code ci-dessous et collez-le dans un fichier ASPX du projet. Le code effectue les tâches suivantes :
Ajoute des références aux ressources et aux bibliothèques Office requises.
Fournit un espace réservé pour le widget d'affichage de liste.
Initialise le runtime des contrôles.
Exécute la méthode renderAll du runtime des contrôles Office.
<!DOCTYPE html> <html> <head> <!-- IE9 or superior --> <meta http-equiv="x-ua-compatible" content="IE=10"> <title>Desktop List View HTML Markup</title> <!-- Controls Specific CSS File --> <link rel="stylesheet" type="text/css" href="/Scripts/Office.Controls.css" /> <!-- Ajax, jQuery, and utils --> <script src=" https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js.js"> </script> <script src=" https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"> </script> <script type="text/javascript"> // Function to retrieve a query string value. // For production purposes you may want to use // a library to handle the query string. function getQueryStringParameter(paramToRetrieve) { var params = document.URL.split("?")[1].split("&"); var strParams = ""; for (var i = 0; i < params.length; i = i + 1) { var singleParam = params[i].split("="); if (singleParam[0] == paramToRetrieve) return singleParam[1]; } } </script> <!-- Cross-Domain Library and Office controls runtime --> <script type="text/javascript"> //Register namespace and variables used through the sample Type.registerNamespace("Office.Samples.ListViewBasic"); //Retrieve context tokens from the querystring Office.Samples.ListViewBasic.appWebUrl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl")); Office.Samples.ListViewBasic.hostWebUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl")); Office.Samples.ListViewBasic.ctag = decodeURIComponent(getQueryStringParameter("SPClientTag")); //Pattern to dynamically load JSOM and the cross-domain library var scriptbase = Office.Samples.ListViewBasic.hostWebUrl + "/_layouts/15/"; //Get the cross-domain library $.getScript(scriptbase + "SP.RequestExecutor.js", //Get the Office controls runtime and // continue to the createControl function function () { $.getScript("../Scripts/Office.Controls.js", createControl); } ); </script> <!-- List View --> <script src="../Scripts/Office.Controls.ListView.debug.js" type="text/javascript"> </script> <!-- SharePoint CSS --> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function () { // The resource files are in a URL in the form: // web_url/_layouts/15/Resource.ashx var scriptbase = Office.Samples.ListViewBasic.appWebUrl + "/_layouts/15/"; // Dynamically create the invisible iframe. var blankiframe; var blankurl; var body; blankurl = Office.Samples.ListViewBasic.appWebUrl + "/Pages/blank.html"; blankiframe = document.createElement("iframe"); blankiframe.setAttribute("src", blankurl); blankiframe.setAttribute("style", "display: none"); body = document.getElementsByTagName("body"); body[0].appendChild(blankiframe); // Dynamically create the link element. var dclink; var head; dclink = document.createElement("link"); dclink.setAttribute("rel", "stylesheet"); dclink.setAttribute("href", scriptbase + "defaultcss.ashx?ctag=" + Office.Samples.ListViewBasic.ctag ); head = document.getElementsByTagName("head"); head[0].appendChild(dclink); }, false); </script> </head> <body> Basic List View sample (HTML markup declaration): <div id="ListViewDiv" data-office-control="Office.Controls.ListView" data-office-options='{"listUrl" : getListUrl()}'> </div> <script type="text/javascript"> function createControl() { //Initialize Controls Runtime Office.Controls.Runtime.initialize({ sharePointHostUrl: Office.Samples.ListViewBasic.hostWebUrl, appWebUrl: Office.Samples.ListViewBasic.appWebUrl }); //Render the widget, this must be executed after the //placeholder DOM is loaded Office.Controls.Runtime.renderAll(); } function getListUrl() { return Office.Samples.ListViewBasic.appWebUrl + "/_api/web/lists/getbytitle('Announcements')"; } </script> </body> </html>
Remarque
L’exemple de code ci-dessus spécifie explicitement les URL des sites web hôte et de complément pour initialiser le runtime des contrôles Office. Toutefois, si ces URL sont spécifiées respectivement dans les paramètres de chaîne de requête SPAppWebUrl et SPHostUrl, vous pouvez transmettre un objet vide. Le code tentera alors d’obtenir les paramètres automatiquement. Les paramètres SPAppWebUrl et SPHostUrl sont inclus dans la chaîne de requête quand vous utilisez le jeton {StandardTokens}.
L’exemple suivant montre comment transmettre un objet vide à la méthode d’initialisation :
// Initialize with an empty object and the code
// will attempt to get the tokens from the
// query string directly.
Office.Controls.Runtime.initialize({});
Pour créer et exécuter la solution
Sélectionnez la touche F5.
Remarque
Lorsque vous sélectionnez F5, Visual Studio génère la solution, déploie le complément et ouvre la page des autorisations pour le complément.
Sélectionnez le bouton Approuver.
Sélectionnez l’icône de complément de la page de Contenu du site.
Pour télécharger cet exemple à partir de la galerie de code, consultez l’exemple de code relatif à l’utilisation du widget expérimental Affichage de liste du bureau dans un complément.
Étapes suivantes
Cet article montre comment utiliser le widget d'affichage de liste de bureau dans votre complément à l'aide de code HTML. Vous pouvez également explorer les scénarios et détails suivants concernant le widget.
Utiliser JavaScript pour déclarer le widget d'affichage de liste de bureau
Selon vos préférences, vous pouvez utiliser JavaScript au lieu de HTML pour déclarer le widget. Dans ce cas, vous pouvez employer les balises suivantes en tant qu’espace réservé du widget.
<div id="ListViewDiv"></div>
Utiliser le code JavaScript suivant pour instancier l’Affichage Liste.
new Office.Controls.ListView(
document.getElementById("ListViewDiv"), {
listUrl: Office.Samples.ListViewBasic.appWebUrl + "/_api/web/lists/getbytitle('Announcements')"
});
Pour obtenir un exemple qui montre comment effectuer les tâches, voir la page JSSimple.html de l'exemple de code relatif à l' utilisation du widget expérimental d'affichage de liste de bureau dans un complément.
Spécifier un affichage pour afficher les données
Pour spécifier un affichage existant dans votre liste SharePoint, le widget Affichage de liste affiche les données selon les paramètres d’affichage spécifiés.
Si vous utilisez du code HTML pour déclarer le widget, vous pouvez utiliser la syntaxe suivante pour spécifier un affichage.
<div id="ListViewDiv"
data-office-control="Office.Controls.ListView"
data-office-options="{listUrl: 'list URL',
viewID: 'GUID'
}">
</div>
Si vous déclarez le widget avec du code JavaScript, utilisez la syntaxe suivante pour spécifier un affichage.
new Office.Controls.ListView(
document.getElementById("ListViewDiv"), {
listUrl: "list URL",
viewID: "GUID"
});
Vous pouvez utiliser le widget expérimental Affichage de liste du bureau pour afficher les données dans les listes SharePoint. Le widget affiche les données en lecture seule. Faites-nous part de vos idées et commentaires sur le site Office Developer Platform UserVoice.