Personnaliser le mode Liste dans les compléments pour SharePoint à l’aide du rendu côté clientCustomize a list view in SharePoint Add-ins using client-side rendering

Dans SharePoint, le rendu côté client vous permet de produire votre propre sortie pour un jeu de contrôles hébergés sur une page SharePoint.In SharePoint, client-side rendering provides a way for you to produce your own output for a set of controls that are hosted on a SharePoint page. Vous pouvez également utiliser des technologies connues, telles que le HTML et JavaScript, pour définir la logique de rendu des affichages de liste SharePoint.It enables you to use well-known technologies, such as HTML and JavaScript, to define the rendering logic of SharePoint list views. Avec le rendu côté client, vous pouvez spécifier vos propres ressources JavaScript et les héberger dans les options de stockage de données disponibles dans vos compléments, par exemple dans une bibliothèque de documents.With client-side rendering, you can specify your own JavaScript resources and host them in the data storage options that are available to your add-ins, such as in a document library. Un complément hébergé par SharePoint inclut uniquement des composants SharePoint.A SharePoint-hosted add-in includes only SharePoint components. Ses ressources se trouvent dans un sous-site isolé du site web hôte, appelé « site web de complément ».A SharePoint-hosted add-in has its resources in an isolated subsite of the host web, called the add-in web.

Conditions préalables à l’utilisation des exemples de cet articlePrerequisites for using the examples in this article

Pour suivre les étapes de cet exemple, vous avez besoin des éléments suivants :To follow the steps in this example, you need the following:

Pour savoir comment configurer un environnement de développement adapté à vos besoins, consultez la section relative aux deux types de compléments SharePoint.For guidance about how to set up a development environment that fits your needs, see Two types of SharePoint Add-ins: SharePoint-hosted and provider-hosted.

Concepts fondamentaux pour vous aider à comprendre la personnalisation de l’affichage de liste avec rendu côté clientCore concepts to help you understand list view customization with client-side rendering

La table suivante reprend des articles utiles vous aidant à comprendre les concepts impliqués dans le scénario de personnalisation d’un affichage de liste.The following table lists useful articles that can help you understand the concepts that are involved in a list view customization scenario.

Titre d’articleArticle title DescriptionDescription
ComplémentsSharePoint Add-ins Découvrez le nouveau modèle de complément Microsoft SharePoint qui vous permet de créer des compléments, qui sont des solutions faciles à utiliser et de taille réduite destinées aux utilisateurs finaux.Learn about the new add-in model in Microsoft SharePoint that enables you to create add-ins, which are small, easy-to-use solutions for end users.
Conception de l’expérience utilisateur pour les compléments SharePointUX design for SharePoint Add-ins Découvrez les options d’expérience utilisateur dont vous disposez lors de la création de compléments SharePoint.Learn about the UX options that you have when you are building SharePoint Add-ins.
Héberger des sites web, des sites web de complément et des composants SharePoint dans SharePointHost webs, add-in webs, and SharePoint components in SharePoint Découvrez la différence entre les sites web hôtes et les sites web de complément. Découvrez les composants SharePoint pouvant être inclus dans un Complément SharePoint, les composants déployés sur le site web hôte, les composants déployés sur le site web de complément et la façon dont le site web de complément est déployé dans un domaine isolé.Learn about the difference between host webs and add-in webs. Find out which SharePoint components can be included in a SharePoint Add-in, which components are deployed to the host web, which components are deployed to the add-in web, and how the add-in web is deployed in an isolated domain.

Exemple de code : personnaliser un affichage de liste en utilisant le rendu côté clientCode example: Customize a list view by using client-side rendering

Pour personnaliser un affichage de liste déployé sur le site web de complément en utilisant le rendu côté client, suivez les étapes ci-dessous :The following steps show you how to customize a list view that is deployed to the add-in web by using client-side rendering.

  1. Créer le projet de Complément SharePoint ;Create the SharePoint Add-in project.

  2. Créer une nouvelle définition de liste avec un affichage personnalisé ;Create a new list definition with a custom view.

  3. Fournir la logique de rendu personnalisée dans un fichier JavaScript.Provide the custom rendering logic in a JavaScript file.

La figure suivante montre un affichage rendu côté client d’une liste d’annonces.The following figure shows a client-side rendered view of an announcements list.

Affichage personnalisé d’une liste d’annoncesCustom view of an announcements list

Affichage personnalisé d’une liste d’annonces

Création d’un projet de complément SharePointTo create the SharePoint Add-in project

  1. Ouvrez Visual Studio 2015 en tant qu’administrateur.Open Visual Studio 2015 as administrator. (Pour cela, cliquez avec le bouton droit de la souris sur l’icône Visual Studio dans le menu Démarrer, puis sélectionnez Exécuter en tant qu’administrateur.)(To do this, right-click the Visual Studio icon on the Start menu, and select Run as administrator.)

  2. Créez un projet à l'aide du modèle Complément SharePoint.Create a new project using the SharePoint Add-in template.

    La figure suivante montre l’emplacement du modèle Complément SharePoint dans Visual Studio 2015, sous Modèles > Visual C# > Office/SharePoint > Compléments Office.The following figure shows the location of the SharePoint Add-in template in Visual Studio 2015, under Templates > Visual C# > Office/SharePoint > Office Add-ins.

    Modèle Complément pour SharePoint Visual StudioAdd-in for SharePoint Visual Studio template

    Modèle d’application pour SharePoint de Visual Studio

  3. Indiquez l’URL du site web SharePoint que vous souhaitez utiliser pour le débogage.Provide the URL of the SharePoint website that you want to use for debugging.

  4. Sélectionnez Hébergé par SharePoint comme option d'hébergement pour votre complément.Select SharePoint-hosted as the hosting option for your add-in.

Créer une nouvelle définition de listeTo create a new list definition

  1. Cliquez avec le bouton droit sur le projet de Complément SharePoint et ajoutez un nouvel élément Liste. Créez une liste personnalisable basée sur les Annonces.Right-click the SharePoint Add-in project, and add a new List item. Create a customizable list based on Announcements.

  2. Copiez le balisage suivant et collez-le dans l'élément Views dans le fichier Schema.xml de votre fonction de liste. Le balisage réalise les tâches suivantes :Copy the following markup and paste it in the Views element in the Schema.xml file of your list feature. The markup performs the following tasks:

    • Il déclare un nouvel affichage nommé Remplaçable par une IDAffichageBase=2.Declares a new view named Overridable with a BaseViewID=2.

    • Il indique une valeur pour l'élément JSLink renvoyant à un fichier JavaScript mis en service avec le complément.Provides a value for the JSLink element that points to a JavaScript file that is provisioned with the add-in.

    Notes

    La propriété JSLink n’est pas prise en charge sur la liste d’enquête ou d’événements. Un calendrier SharePoint correspond à une liste d’événements.The JSLink property is not supported on Survey or Events lists. A SharePoint calendar is an Events list.

    <View BaseViewID="2" 
        Name="8d2719f3-c3c3-415b-989d-33840d8e2ddb" 
        DisplayName="Overridable" 
        Type="HTML" 
        WebPartZoneID="Main" 
        SetupPath="pages\viewpage.aspx" 
        Url="Overridable.aspx"
        DefaultView="TRUE">
    <ViewFields>
        <FieldRef Name="Title" />
    </ViewFields>
    <Query />
    <Toolbar Type="Standard" />
    <XslLink>main.xsl</XslLink>
    <JSLink Default="TRUE">~site/Scripts/CSRListView.js</JSLink>
    </View>
    

Pour fournir une logique de rendu personnalisée dans un fichier JavaScriptTo provide the custom rendering logic in a JavaScript file

  1. Cliquez avec le bouton droit de la souris sur le dossier Scripts et ajoutez un nouveau fichier JavaScript.Right-click the Scripts folder, and add a new JavaScript file. Nommez le fichier CSRListView.js.Name the file CSRListView.js.

  2. Copiez le code suivant et collez-le dans le fichier CSRListView.js. Le code réalise les tâches suivantes :Copy the following code and paste it in the CSRListView.js file. The code performs the following tasks:

    • Il fournit les gestionnaires d'événements pour les événements PreRender et PostRender.Provides event handlers for the PreRender and PostRender events.

    • Il fournit les modèles pour les ensembles de modèle d’en-têtes, de pieds de page et d’éléments.Provides templates for the Header, Footer, and Item template sets.

    • Il enregistre les modèles.Registers the templates.

    
    (function () {
        // Initialize the variable that stores the objects.
        var overrideCtx = {};
        overrideCtx.Templates = {};
    
        // Assign functions or plain html strings to the templateset objects:
        // header, footer and item.
        overrideCtx.Templates.Header = "<B><#=ctx.ListTitle#></B>" +
            "<hr><ul id='unorderedlist'>";
    
        // This template is assigned to the CustomItem function.
        overrideCtx.Templates.Item = customItem;
        overrideCtx.Templates.Footer = "</ul>";
    
        // Set the template to the:
        //  Custom list definition ID
        //  Base view ID
        overrideCtx.BaseViewID = 2;
        overrideCtx.ListTemplateType = 10057;
    
        // Assign a function to handle the
        // PreRender and PostRender events
        overrideCtx.OnPreRender = preRenderHandler;
        overrideCtx.OnPostRender = postRenderHandler;
    
        // Register the template overrides.
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
    })();
    
    // This function builds the output for the item template.
    // It uses the context object to access announcement data.
    function customItem(ctx) {
    
        // Build a listitem entry for every announcement in the list.
        var ret = "<li>" + ctx.CurrentItem.Title + "</li>";
        return ret;
    }
    
    // The preRenderHandler attends the OnPreRender event
    function preRenderHandler(ctx) {
    
        // Override the default title with user input.
        ctx.ListTitle = prompt("Type a title", ctx.ListTitle);
    }
    
    // The postRenderHandler attends the OnPostRender event
    function postRenderHandler(ctx) {
    
        // You can manipulate the DOM in the postRender event
        var ulObj;
        var i, j;
    
        ulObj = document.getElementById("unorderedlist");
    
        // Reverse order the list.
        for (i = 1; i < ulObj.children.length; i++) {
            var x = ulObj.children[i];
            for (j = 1; j < ulObj.children.length; j++) {
                var y = ulObj.children[j];
                if(x.innerText<y.innerText){                  
                    ulObj.insertBefore(y, x);
                }
            }
        }
    }
    

Pour créer et exécuter la solutionTo build and run the solution

  1. Sélectionnez la touche F5.Select the F5 key.

    Notes

    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.When you select F5, Visual Studio builds the solution, deploys the add-in, and opens the permissions page for the add-in.

  2. Sélectionnez le bouton Approuver.Select the Trust It button.

  3. Accédez à votre liste personnalisée en entrant l’adresse /Lists/<votre_instance_de_liste> relative à votre répertoire de complément dans le domaine du site web de complément (et non le domaine du site web hôte).Go to your custom List by entering the /Lists/<your_list_instance> address relative to your add-in directory in the add-in web domain (not the host web domain). Ajoutez une ou deux annonces.Add one or two announcements. Dans le ruban, sélectionnez l’affichage Non prioritaire.On the ribbon, select the Overridable view.

Voir aussiSee also