Personnaliser un type de champ à l’aide du rendu côté clientCustomize a field type using client-side rendering

Découvrez comment personnaliser un type de champ à l'aide de la technologie de rendu côté client de SharePoint. Le rendu côté client propose un mécanisme qui vous permet de produire votre propre destination pour un jeu de contrôles hébergés sur une page SharePoint. Vous pouvez également utiliser des technologies connues, telles que le HTML et JavaScript, afin de définir la logique de rendu des types de champs personnalisés. 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 pour vos solution de batterie de serveurs, par exemple dans le dossier _Layouts.Learn how to customize a field type by using the client-side rendering technology in SharePoint. Client-side rendering provides a mechanism that you can use to produce your own output for a set of controls that are hosted in a SharePoint page. This mechanism enables you to use well-known technologies, such as HTML and JavaScript, to define the rendering logic of custom field types. In client-side rendering you can specify your own JavaScript resources and host them in the data storage options available to your farm solution, such as the _layouts folder.

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:

  • Microsoft Visual Studio 2012Microsoft Visual Studio 2012

  • Outils de développement Office pour Visual Studio 2012Office Developer Tools for Visual Studio 2012

  • Un environnement de développement SharePointA SharePoint development environment

Pour plus d'informations sur la configuration de votre environnement de développement SharePoint, consultez Configurer un environnement de développement général pour SharePoint.For information about setting up your SharePoint development environment, see Set up a general development environment for SharePoint.

Concepts de base pour vous aider à comprendre le rendu côté client des types de champCore concepts to help you understand client-side rendering for field types

Le tableau suivant fournit une liste d’articles permettant de comprendre les concepts et les procédures liées à un scénario d’action personnalisée.The following table lists useful articles that can help you understand the concepts and steps that are involved in a custom action scenario.

Tableau 1. Concepts de base du rendu côté client des types de champTable 1. Core concepts for client-side rendering for field types

Titre d’articleArticle title DescriptionDescription
Créer des solutions de batterie dans SharePointBuild farm solutions in SharePoint
En savoir plus sur le développement, la mise en package et le déploiement des extensions d'administration pour SharePoint à l'aide de solutions de batterie de serveurs.Learn about developing, packaging, and deploying administrative extensions to SharePoint using farm solutions.
Type de champ personnaliséCustom Field Types
Obtenez plus d'informations sur la création des types de champ personnalisé. Si vous stockez vos informations professionnelles dans SharePoint, il peut arriver que vos données ne soient pas conformes aux types de champ disponibles dans SharePoint Foundation, ou que vous souhaiterez peut-être seulement personnaliser ces types de champ. Les champs personnalisés peuvent inclure une fonctionnalité de validation personnalisée des données et de rendu de champ personnalisé.Learn about creating custom field types. As you store your business information in SharePoint, there may be times when your data does not conform to the field types that are available in SharePoint FoundationOr, you might just want to customize those field types. Custom fields can include custom data validation and custom field rendering.

Exemple de code : Personnaliser le processus de rendu d'un type de champ personnalisé dans un formulaire d'affichageCode example: Customize the rendering process for a custom field type in a view form

Procédez comme suit pour personnaliser le processus de génération d’un type de champ personnalisé :Follow these steps to customize the rendering process for a custom field type:

  1. Créez le projet solution de batterie de serveurs.Create the farm solution project.

  2. Ajoutez une classe pour le type de champ personnalisé.Add a class for the custom field type.

  3. Ajoutez une définition XML pour le type de champ personnalisé.Add an XML definition for the custom field type.

  4. Ajoutez un fichier JavaScript pour la logique de rendu du type de champ personnalisé.Add a JavaScript file for the rendering logic of the custom field type.

La figure 1 présente un formulaire d’affichage contenant le rendu d’un type de champ personnalisé.Figure 1 shows a view form with a custom-rendered field type.

Figure 1. Rendu de champ personnalisé côté client dans un formulaire d'affichageFigure 1. Custom client-side rendered field in a view form

Champ personnalisé affiché côté client dans un formulaire d’affichage

Pour créer le projet solution de batterie de serveursTo create the farm solution project

  1. Ouvrez Visual Studio 2012 en tant qu’administrateur (cliquez avec le bouton droit de la souris sur l’icône Visual Studio 2012 dans le menu Démarrer, puis choisissez Exécuter en tant qu’administrateur.)Open Visual Studio 2012 as administrator (right-click the Visual Studio 2012 icon in the Start menu, and then choose Run as administrator ).

  2. Créez un projet à l’aide du modèle Projet SharePoint.Create a new project using the SharePoint Project template

    La figure 2 indique l’emplacement du modèle Projet SharePoint dans Visual Studio 2012, sous Modèles, Visual C#, Office SharePoint, Solutions SharePoint.Figure 2 shows the location of the SharePoint Project template in Visual Studio 2012, under Templates, Visual C#, Office SharePoint, SharePoint Solutions.

Figure 2. Modèle Visual Studio de projet SharePointFigure 2. SharePoint project Visual Studio template

Modèle SharePoint Project Visual Studio

  1. 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.

  2. Sélectionnez l'option Déployer en tant que solution de batterie.Select the Deploy as a farm solution option.

Pour ajouter une classe au type de champ personnaliséTo add a class for the custom field type

  1. Cliquez avec le bouton droit sur le projet solution de batterie de serveurs et ajoutez une nouvelle classe. Nommez le fichier de classe FavoriteColorFieldType.cs.Right-click the farm solution project and add a new class. Name the class file FavoriteColorFieldType.cs.

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

    • Il déclare une classe FavoriteColorField qui hérite de SPFieldText.Declares a FavoriteColorField class that inherits from SPFieldText.
  • Il fournit deux constructeurs pour la classe FavoriteColorField.Provides two constructors for the FavoriteColorField class.

  • Remplace la propriété JSLink.Overrides the JSLink property.

    Note

    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.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

// Additional references for this sample.
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;

namespace Microsoft.SDK.SharePoint.Samples.WebControls
{
    /// <summary>
    /// The FavoriteColorField custom field type 
    /// inherits from SPFieldText.
    /// Users can input the color in the field 
    /// just like in any other text field.
    /// But the field will provide additional 
    /// rendering logic when displaying 
    /// the field in a view form.
    /// </summary>
    public class FavoriteColorField : SPFieldText
    {
        // The solution deploys the JavaScript 
        // file to the CSRAssets folder 
        // in the WFE's layouts folder.
        private const string JSLinkUrl = 
            "~site/_layouts/15/CSRAssets/CSRFieldType.js";

        // You have to provide constructors for SPFieldText.
        public FavoriteColorField(
            SPFieldCollection fields, 
            string name) :
            base(fields, name)
        {

        }
        public FavoriteColorField(
            SPFieldCollection fields, 
            string typename, 
            string name) :
            base(fields, typename, name)
        {

        }

        /// <summary>
        /// Override the JSLink property to return the 
        /// value of our custom JavaScript file.
        /// </summary>
        public override string JSLink
        {
            get
            {
                return JSLinkUrl;
            }
            set
            {
                base.JSLink = value;
            }
        }
    }
}            

Procédure d’ajout d’une définition XML au type de champ personnaliséTo add an XML definition for the custom field type

  1. Cliquez avec le bouton droit sur le projet solution de batterie de serveurs, puis ajoutez un dossier mappé vers SharePoint. Dans la boîte de dialogue, sélectionnez le dossier {RacineSharePoint}\Template\XML.Right-click the farm solution project, and add a SharePoint mapped folder. In the dialog box, select the {SharePointRoot}\Template\XML folder.

  2. Cliquez avec le bouton droit sur le dossier XML créé lors de l'étape précédente, puis ajoutez un nouveau fichier XML. Nommez le fichier XML fldtypes_FavoriteColorFieldType.xml.Right-click the XML folder created in the last step, and add a new XML file. Name the XML file fldtypes_FavoriteColorFieldType.xml.

  3. Copiez le balisage suivant et collez-le dans le fichier XML. Le balisage effectue les tâches suivantes :Copy the following markup, and paste it in the XML file. The markup performs the following tasks:

    • Il nomme le type de champ.Provides type name for the field type.
  • Il indique le nom complet de la classe du type de champ. Il s'agit de la classe que vous avez créée dans la procédure précédente.Specifies the full class name for the field type. This is the class you created in the previous procedure.

  • Il fournit des attributs supplémentaires au type de champ.Provides additional attributes for the field type.

    <?xml version="1.0" encoding="utf-8" ?>
    <FieldTypes>
      <FieldType>
        <Field Name="TypeName">FavoriteColorField</Field>
        <Field Name="TypeDisplayName">Favorite color field</Field>
        <Field Name="TypeShortDescription">Favorite color field</Field>
        <Field Name="FieldTypeClass">Microsoft.SDK.SharePoint.Samples.WebControls.FavoriteColorField, $SharePoint.Project.AssemblyFullName$</Field>
        <Field Name="ParentType">Text</Field>
        <Field Name="Sortable">TRUE</Field>
        <Field Name="Filterable">TRUE</Field>
        <Field Name="UserCreatable">TRUE</Field>
        <Field Name="ShowOnListCreate">TRUE</Field>
        <Field Name="ShowOnSurveyCreate">TRUE</Field>
        <Field Name="ShowOnDocumentLibrary">TRUE</Field>
        <Field Name="ShowOnColumnTemplateCreate">TRUE</Field>
      </FieldType>
    </FieldTypes>

Pour ajouter un fichier JavaScript à la logique de rendu du type de champ personnaliséTo add a JavaScript file for the rendering logic of the custom field type

  1. Cliquez avec le bouton droit sur le projet solution de batterie de serveurs, puis ajoutez le dossier mappé « Dispositions » SharePoint. Ajoutez un nouveau dossier CSRAssets au dossier « Dispositions » récemment ajouté.Right-click the farm solution project, and add the SharePoint Layouts mapped folder. Add a new CSRAssets folder to the recently added Layouts folder.

  2. Cliquez avec le bouton droit sur le dossier CSRAssets que vous avez créé lors de l'étape précédente, puis ajoutez un nouveau fichier JavaScript. Nommez le fichier JavaScriptCSRFieldType.js.Right-click the CSRAssets folder that you created in the last step, and add a new JavaScript file. Name the JavaScript file CSRFieldType.js.

  3. Copiez le code suivant et collez-le dans le fichier JavaScript. Le code effectue les tâches suivantes :Copy the following code and paste it in the JavaScript file. The code performs the following tasks:

    • Il crée un modèle pour le champ lorsqu’il est affiché dans un formulaire d’affichage.Creates a template for the field when it is displayed in a view form.
  • Il enregistre le modèle.Registers the template.

  • Il fournit la logique de rendu du type de champ lorsqu’il est utilisé dans un formulaire affichage.Provides the rendering logic for the field type when used displayed in a view form.

(function () {
    var favoriteColorContext = {};

    // You can provide templates for:
    // View, DisplayForm, EditForm and NewForm
    favoriteColorContext.Templates = {};
    favoriteColorContext.Templates.Fields = {
        "FavoriteColorField": {
            "View": favoriteColorViewTemplate
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(
        favoriteColorContext
        );
})();

// The favoriteColorViewTemplate provides the rendering logic
// the custom field type when it is displayed in the view form.
function favoriteColorViewTemplate(ctx) {
    var color = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    return "<span style='background-color : " + color +
        "' >&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;</span>&amp;nbsp;" + color;
}

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

  1. Appuyez sur la touche F5.Press the F5 key.

    Note

    Quand vous appuyez sur F5, Visual Studio génère et déploie la solution, puis ouvre le site web SharePoint où la solution est déployée.When you press F5, Visual Studio builds the solution, deploys the solution, and opens the SharePoint website where the solution is deployed.

  2. Créez une liste personnalisée et ajoutez une nouvelle colonne Champ de couleur favorite.Create a custom list and add a new Favorite color field column.

  3. Ajoutez un élément à la liste, puis saisissez une valeur pour la colonne Couleur favorite.Add one item to the list, and provide a value for the favorite color column.

  4. La figure 3 illustre la page Créer une colonne contenant le nouveau type de champ personnalisé.Figure 3 shows the create column page with the new custom field type.

    Figure 3. Création d'une colonne de type de champ personnaliséFigure 3. Creating a new custom field type column

Création d’une colonne de type de champ personnalisé

ProblèmeProblem SolutionSolution
Le type de champ FavoriteColorField n'est pas installé correctement. Accédez à la page Paramètres de la liste pour supprimer ce champ. Field type FavoriteColorField is not installed properly. Go to the list settings page to delete this field.
Exécutez la commande suivante à partir d’une invite de commandes avec élévation de privilèges : iisreset/noforce.Execute the following command from an elevated command prompt: iisreset /noforce.
Attention : si vous déployez la solution dans un environnement de production, attendez le bon moment pour réinitialiser le serveur web à l’aide de iisreset /noforce.Caution: If you are deploying the solution to a production environment, wait for an appropriate time to reset the web server using iisreset /noforce.

Étapes suivantesNext steps

Cet article a expliqué comment personnaliser le processus de rendu d'un type de champ personnalisé. Lors de l'étape suivante, vous pourrez en apprendre davantage sur les types de champ personnalisé. Pour plus d'informations, consultez les rubriques suivantes :This article demonstrated how to customize the rendering process for a custom field type. As a next step, you can learn more details about custom field types. To learn more, see the following:

Voir aussiSee also