Migration de JSLink vers les extensions de SharePoint FrameworkMigrating from JSLink to SharePoint Framework extensions

Depuis Microsoft SharePoint 2013, la plupart des solutions d’entreprise développées en haut de Microsoft 365 et SharePoint Online exploitaient la JSLink propriété des champs et des affichages de liste pour personnaliser le rendu des champs.Since Microsoft SharePoint 2013, most of the enterprise solutions built on top of Microsoft 365 and SharePoint Online leveraged the JSLink property of fields and list views to customize the rendering of fields.

Dans l’interface utilisateur « moderne » de SharePoint Online et SharePoint Server 2019, la plupart de ces personnalisations ne sont plus disponibles.Within the "modern" UI of SharePoint Online and SharePoint Server 2019, most of those customizations are no longer available. Heureusement, les extensions de SharePoint Framework vous permettent de fournir des fonctionnalités similaires dans l’interface utilisateur « moderne ».Fortunately, SharePoint Framework extensions enable you to provide similar functionality in the "modern" UI.

Dans ce didacticiel, vous découvrirez comment migrer des anciennes personnalisations « classiques » vers le nouveau modèle basé sur les extensions de SharePoint Framework.In this tutorial, you learn how to migrate from the old "classic" customizations to the new model based on SharePoint Framework extensions.

Notes

Pour plus d’informations sur la création des extensions de SharePoint Framework, consultez la rubrique vue d’ensemble des extensions de SharePoint Framework.For more information about how to build SharePoint Framework extensions, see Overview of SharePoint Framework extensions.

Tout d’abord, nous allons présenter les options disponibles lors du développement des extensions de SharePoint Framework :First, let's introduce the available options when developing SharePoint Framework extensions:

  • Personnalisateur d’application: étendez l’interface utilisateur « moderne » native de SharePoint en ajoutant des éléments HTML personnalisés et du code côté client à des espaces réservés prédéfinis des pages « modernes ».Application Customizer: Extend the native "modern" UI of SharePoint by adding custom HTML elements and client-side code to pre-defined placeholders of "modern" pages. Pour plus d’informations sur les personnalisateurs d’application, voir créer votre première extension SharePoint Framework (Hello World 1re partie).For more information on application customizers, see Build your first SharePoint Framework Extension (Hello World part 1).
  • Jeu de commandes: ajouter des éléments de menu ou des boutons personnalisés à la barre de commandes d’un affichage de liste pour une liste ou une bibliothèque.Command Set: Add custom Edit Control Block (ECB) menu items or custom buttons to the command bar of a list view for a list or a library. Vous pouvez associer n’importe quelle action côté client à ces commandes.You can associate any client-side action to these commands. Pour plus d’informations sur les jeux de commandes, voir créer votre première extension de jeu de commandes ListView.For more information on command sets, see Build your first ListView Command Set extension.
  • Personnalisateur de champ: personnaliser le rendu d’un champ dans un affichage de liste à l’aide d’éléments HTML personnalisés et de code côté client.Field Customizer: Customize the rendering of a field in a list view by using custom HTML elements and client-side code. Pour plus d’informations sur les personnalisateurs de champ, voir créer votre première extension de personnalisateur de champ.For more information on field customizers, see Build your first Field Customizer extension.

L’option la plus utile dans notre cas est l’extension du personnalisateur de champ.The most useful option in our context is the Field Customizer extension.

Imaginez que vous êtes dans SharePoint Online et que vous avez une liste personnalisée avec un champ personnalisé intitulé « Couleur », qui est de type Choice et qui propose les valeurs suivantes : Rouge, Vert, Bleu, Jaune.Assume that you are in SharePoint Online, and you have a custom list with a custom field called "Color", which is of type Choice and which can assume the following values: Red, Green, Blue, Yellow. Supposons que vous ayez une valeur personnalisée pour la propriété JSLink du composant WebPart chargé du rendu en mode liste de la liste personnalisée.Assume that you have a custom value for the JSLink property of the list view rendering web part of the custom list.

Dans l’extrait de code suivant, vous pouvez voir le code JavaScript référencé par la propriété JSLink (customColorRendering.js).In the following code snippet, you can see the JavaScript code referenced by the JSLink property (customColorRendering.js).

// Define a namespace for the custom rendering code
var customJSLinkRendering = customJSLinkRendering || {};

// Define a function that declare the custom rendering rules for the target list view
customJSLinkRendering.CustomizeFieldRendering = function () {

  // Define a custom object to configure the rendering template overrides
  var customRenderingOverride = {};
  customRenderingOverride.Templates = {};
  customRenderingOverride.Templates.Fields =
  {
    // Declare the custom rendering function for the 'View' of field 'Color'
    'Color':
    {
      'View': customJSLinkRendering.RenderColorField
    }
  };

  // Register the custom rendering template
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(customRenderingOverride);
};

// Declare the custom rendering function for the 'View' of field 'Color'
customJSLinkRendering.RenderColorField = function (context)
{
  var colorField = context.CurrentItem.Color;

  // Declare a local variable to hold the output color
  var color = '';

  // Evaluate the values of the 'Color' field and render it accordingly
  switch (colorField)
  {
    case 'Red':
      color = 'red';
      break;
    case 'Green':
      color = 'green';
      break;
    case 'Blue':
      color = 'blue';
      break;
    case 'Yellow':
      color = 'yellow';
      break;
    default:
      color = 'white';
      break;
  }

  // Render the output for the 'Color' field
  return "<div style='float: left; width: 20px; height: 20px; margin: 5px; border: 1px solid rgba(0,0,0,.2);background:" + color + "' />";
};

// Invoke the custom rendering function
customJSLinkRendering.CustomizeFieldRendering();

Dans la capture d’écran suivante, vous pouvez voir comment la JSLink propriété est configurée dans le composant WebPart d’affichage de liste.In the following screenshot you can see how the JSLink property is configured in the list view web part.

Configuration de la propriété JSLink dans le composant WebPart d’affichage de liste

Si vous avez chargé le fichier JavaScript dans la bibliothèque Éléments du site, la valeur de la propriété JSLink peut être "~site/SiteAssets/customColorRendering.js".If you uploaded the JavaScript file into the Site Assets library, the value for the JSLink property can be "~site/SiteAssets/customColorRendering.js".

Vous pouvez voir comment fonctionne le rendu personnalisé de la liste.You can see how the custom rendering of the list works.

Rendu personnalisé pour le champ « Couleur » de la liste personnalisée

Comme vous pouvez le voir, les champs de couleur restituent une zone colorée remplie avec la couleur sélectionnée au niveau de l’élément.As you can see, Color fields render a colored box filled with the color selected at the item level.

Notes

Pour configurer ce type de solution dans un site « classique », vous pouvez, finalement, utiliser un modèle de configuration de PnP, capable de configurer la liste avec à la fois le champ personnalisé et la propriété JSLink.To provision this kind of solution in a "classic" site you can eventually use a PnP provisioning template, which can provision both the list with the custom field, and the JSLink property at once.

Pour migrer la solution précédente vers SharePoint Framework, suivez les étapes ci-dessous.To migrate the previous solution to the SharePoint Framework, see the following steps.

Créer une nouvelle solution SharePoint FrameworkCreate a new SharePoint Framework solution

  1. À partir de la console, créez un dossier pour votre projet comme suit :From the console, create a new folder for your project:

    md spfx-custom-field-extension
    
  2. Accédez au dossier du projet :Go to the project folder:

    cd spfx-custom-field-extension
    
  3. Dans le dossier du projet, exécutez le générateur Yeoman pour SharePoint Framework afin de structurer un projet SharePoint Framework :In the project folder, run the SharePoint Framework Yeoman generator to scaffold a new SharePoint Framework project:

    yo @microsoft/sharepoint
    
  4. Lorsque vous y êtes invité, entrez les valeurs suivantes (sélectionnez l’option par défaut pour toutes les invites omises ci-dessous) :When prompted, enter the following values (select the default option for all prompts omitted below):

    • Quel est le nom de votre solution ?: SPFX-Custom-Field-extensionWhat is your solution name?: spfx-custom-field-extension
    • Quels packages de base voulez-vous cibler pour votre ou vos composants ?  : SharePoint Online uniquement (dernière version)Which baseline packages do you want to target for your component(s)?: SharePoint Online only (latest)
    • Quel type de composant côté client voulez-vous créer ?  : ExtensionWhich type of client-side component to create?: Extension
    • Quel type d’extension côté client créer ?Which type of client-side extension to create? Personnalisateur de champField Customizer
    • Quel est le nom de votre personnalisateur de champ ?What is your Field Customizer name? CustomColorFieldCustomColorField
    • Quelle infrastructure souhaitez-vous utiliser ?: pas d’infrastructure JavaScriptWhich framework would you like to use?: No JavaScript framework
  5. Démarrez Visual Studio Code (ou l’éditeur de code de votre choix) et commencez à développer la solution.Start Visual Studio Code (or the code editor of your choice) and start developing the solution. Pour démarrer Visual Studio Code, vous pouvez exécuter l’instruction suivante.To start Visual Studio Code, you can execute the following statement.

    code .
    

Définir le nouveau personnalisateur de champ avec JavaScriptDefine the new Field Customizer with JavaScript

Pour reproduire le comportement du rendu de champ personnalisé JSLink, vous devez implémenter la même logique à l’aide du code côté client au sein de la nouvelle solution SharePoint Framework.To reproduce the same behavior of the JSLink custom field rendering, you need to implement the same logic by using client-side code within the new SharePoint Framework solution. Pour accomplir cette tâche, procédez comme suit.To accomplish this task, complete the following steps.

  1. Ouvrez le dossier file ./src/extensions/customColorField/CustomColorFieldFieldCustomizer.manifest.js .Open the file ./src/extensions/customColorField/CustomColorFieldFieldCustomizer.manifest.json folder. Copiez la valeur de la propriété id et stockez-la dans un endroit sûr, car vous en aurez besoin plus tard.Copy the value of the id property and store it in a safe place because you need it later.

  2. Ouvrez le fichier ./SRC/extensions/customColorField/CustomColorFieldFieldCustomizer.TSet modifiez le contenu en fonction de l’extrait de code suivant :Open the file ./src/extensions/customColorField/CustomColorFieldFieldCustomizer.ts, and edit the content according to the following code snippet:

    import { Log } from '@microsoft/sp-core-library';
    import { override } from '@microsoft/decorators';
    import {
      BaseFieldCustomizer,
      IFieldCustomizerCellEventParameters
    } from '@microsoft/sp-listview-extensibility';
    
    import * as strings from 'CustomColorFieldFieldCustomizerStrings';
    import styles from './CustomColorFieldFieldCustomizer.module.scss';
    
    /**
    * If your field customizer uses the ClientSideComponentProperties JSON input,
    * it will be deserialized into the BaseExtension.properties object.
    * You can define an interface to describe it.
    */
    export interface ICustomColorFieldFieldCustomizerProperties {
      // This is an example; replace with your own property
      sampleText?: string;
    }
    
    const LOG_SOURCE: string = 'CustomColorFieldFieldCustomizer';
    
    export default class CustomColorFieldFieldCustomizer
    extends BaseFieldCustomizer<ICustomColorFieldFieldCustomizerProperties> {
    
      @override
      public onInit(): Promise<void> {
        // Add your custom initialization to this method.  The framework will wait
        // for the returned promise to resolve before firing any BaseFieldCustomizer events.
        Log.info(LOG_SOURCE, 'Activated CustomColorFieldFieldCustomizer with properties:');
        Log.info(LOG_SOURCE, JSON.stringify(this.properties, undefined, 2));
        Log.info(LOG_SOURCE, `The following string should be equal: "CustomColorFieldFieldCustomizer" and "${strings.Title}"`);
        return Promise.resolve();
      }
    
      @override
      public onRenderCell(event: IFieldCustomizerCellEventParameters): void {
    
        var colorField = event.fieldValue;
    
        // Declare a local variable to hold the output color
        var color = '';
    
        // Evaluate the values of the 'Color' field and render it accordingly
        switch (colorField)
        {
          case 'Red':
            color = 'red';
            break;
          case 'Green':
            color = 'green';
            break;
          case 'Blue':
            color = 'blue';
            break;
          case 'Yellow':
            color = 'yellow';
            break;
          default:
            color = 'white';
            break;
        }
    
        // Render the output for the 'Color' field
        event.domElement.innerHTML = "<div style='float: left; width: 20px; height: 20px; margin: 5px; border: 1px solid rgba(0,0,0,.2);background:" + color + "' />";
      }
    
      @override
      public onDisposeCell(event: IFieldCustomizerCellEventParameters): void {
        // This method should be used to free any resources that were allocated during rendering.
        // For example, if your onRenderCell() called ReactDOM.render(), then you should
        // call ReactDOM.unmountComponentAtNode() here.
        super.onDisposeCell(event);
      }
    }
    

    Comme vous le voyez, le contenu de la méthode onRenderCell() est presque identique à la méthode RenderColorField() dans l’implémentation des JSLink.As you can see, the content of the method onRenderCell() is almost the same as the previous RenderColorField() method in the JSLink implementation. Les seules différences sont les suivantes :The only differences are:

    • Pour récupérer la valeur de champ active, vous devez impérativement lire la propriété event.fieldValue de l’argument d’entrée de la méthode onRenderCell().To retrieve the current field value, you need to read the event.fieldValue property of the input argument of the onRenderCell() method.
    • Afin de renvoyer le code HTML personnalisé pour afficher le champ, vous devez attribuer une valeur à la propriété innerHTML de l’objet event.domElement, qui représente le conteneur HTML de sortie du rendu du champ.To return the custom HTML code to render the field, you need to assign a value to the innerHTML property of the event.domElement object, which represents the output HTML container of the field rendering.

    Hormis ces modifications mineures, vous pouvez réutiliser le même code JavaScript qu’auparavant.Aside from these small changes, you can reuse almost the same JavaScript code as before.

    Dans l’illustration suivante, vous pouvez voir le résultat obtenu.In the following figure, you can see the resulting output.

    Le personnalisateur de champ dans une liste « moderne »

Tester la solution en mode de débogageTest the solution in debug mode

  1. Revenez à la fenêtre de la console et exécutez la commande suivante pour créer la solution et lancer le serveur local Node.js qui l’hébergera.Go back to the console window and run the following command to build the solution and run the local Node.js server to host it.

    gulp serve --nobrowser
    
  2. Ouvrez votre navigateur préféré et accédez à une liste « moderne » qui comporte un champ personnalisé avec pour nom Couleur et pour type Choice, avec les mêmes options de valeur qu’avant (Rouge, Vert, Bleu, Jaune).Open your favorite browser, and go to a "modern" list, which has a custom field with the name Color and the type Choice with the same value options as before (Red, Green, Blue, Yellow). Vous pouvez utiliser la liste que vous avez créée dans le site « classique », en l’affichant simplement avec la nouvelle expérience « moderne ».You can eventually use the list you created in the "classic" site, just viewing it with the new "modern" experience. À présent, ajoutez les paramètres de chaîne de requête suivants à l’URL de la page AllItems.aspx.Now, append the following query string parameters to the AllItems.aspx page URL.

    ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&fieldCustomizers={"Color":{"id":"c3070978-d85e-4298-8758-70b5b5933076"}}
    

    Dans cette chaîne de requête, remplacez le GUID par la id valeur que vous avez enregistrée à partir de la CustomColorFieldFieldCustomizer.manifest.jssur le fichier, et le nom de la propriété Color fait référence au nom du champ à personnaliser.In this query string, replace the GUID with the id value you saved from the CustomColorFieldFieldCustomizer.manifest.json file, and the Color property name refers to the name of the field to customize. Si vous le souhaitez, vous pouvez également fournir un objet de configuration personnalisé, sérialisé au format JSON, comme paramètre supplémentaire pour la construction du personnalisateur de champ.If you like, you can also provide a custom configuration object, serialized in JSON format, as an additional parameter for the field customizer construction.

    Notez que lors de l’exécution de la demande de page, un message d’avertissement s’affiche avec le titre « autoriser les scripts de débogage ? », qui vous demande votre consentement à exécuter du code à partir de localhost pour des raisons de sécurité.Notice that when executing the page request, you're prompted with a warning message box with the title "Allow debug scripts?", which asks your consent to run code from localhost for security reasons. Si vous souhaitez déboguer localement et tester la solution, vous devez l’autoriser à « charger les scripts de débogage ».If you want to locally debug and test the solution, you have to allow it to "Load debug scripts."

    Notes

    Vous pouvez également créer des entrées de configuration dans le fichier config/serve.json dans votre projet pour automatiser la création des paramètres de chaîne de requête de débogage, comme décrit dans ce document : débogage de solutions SharePoint Framework sur des pages SharePoint modernesAlternatively, you can create serve configuration entries in the config/serve.json file in your project to automate the creation of the debug query string parameters as outlined in this document: Debug SharePoint Framework solutions on modern SharePoint pages

Définir le nouveau personnalisateur de champ avec TypeScriptDefine the new Field Customizer with TypeScript

Vous êtes maintenant prêt à remplacer le code JavaScript par une machine à écrire pour tirer parti de l’approche entièrement typée de la machine à écrire.You're now ready to replace the JavaScript code with TypeScript to benefit from the fully typed approach of TypeScript.

  1. Ouvrez le fichier ./SRC/extensions/customColorField/CustomColorFieldFieldCustomizer.module.SCSS.Open the file ./src/extensions/customColorField/CustomColorFieldFieldCustomizer.module.scss. Ce fichier est de type CSS SASS qui représente le style de l’interface utilisateur pour le personnalisateur de champ.This file, which is a Sass CSS, represents the UI style for the field customizer. Remplacez le contenu du fichier SCSS par le contenu suivant.Replace the content of the SCSS file with the following.

    .CustomColorField {
      .cell {
        float: left;
        width: 20px;
        height: 20px;
        margin: 5px;
        border: 1px solid rgba(0,0,0,.2);
      }
    
      .cellRed {
        background: red;
      }
    
      .cellGreen {
        background: green;
      }
    
      .cellBlue {
        background: blue;
      }
    
      .cellYellow {
        background: yellow;
      }
    
      .cellWhite {
        background: white;
      }
    }
    
  2. Remplacez l’implémentation de la méthode onRenderCell() par l’extrait de code suivant.Replace the implementation of the onRenderCell() method with the following code excerpt.

    @override
    public onRenderCell(event: IFieldCustomizerCellEventParameters): void {
      // Read the current field value
      let colorField: String = event.fieldValue;
    
      // Add the main style to the field container element
      event.domElement.classList.add(styles.CustomColorField);
    
      // Get a reference to the output HTML
      let fieldHtml: HTMLDivElement = event.domElement.firstChild as HTMLDivElement;
    
      // Add the standard style
      fieldHtml.classList.add(styles.cell);
    
      // Add the colored style
      switch(colorField)
      {
        case "Red":
          fieldHtml.classList.add(styles.cellRed);
          break;
        case "Green":
          fieldHtml.classList.add(styles.cellGreen);
          break;
        case "Blue":
          fieldHtml.classList.add(styles.cellBlue);
          break;
        case "Yellow":
          fieldHtml.classList.add(styles.cellYellow);
          break;
        default:
          fieldHtml.classList.add(styles.cellWhite);
          break;
      }
    }
    

    Notez que la nouvelle implémentation de la méthode utilise une approche entièrement saisie et affecte la classe CSS cell à l’élément enfant DIV de l’élément de champ actuel, avec une autre classe CSS personnalisée définissant la couleur cible du DIV, basée sur la valeur du champ sélectionnée.Notice that the new method implementation uses a fully typed approach, and assigns the cell CSS class to the DIV element child of the current field element, together with another custom CSS class to define the target color of the DIV based on the currently selected value for the field.

  3. Exécutez une fois de plus le personnalisateur de champ en mode de débogage et observez le résultat.Run the Field Customizer one more time in debug mode and view the results.

Empaqueter et héberger la solutionPackage and host the solution

Si vous êtes satisfait du résultat, vous êtes maintenant prêt à empaqueter la solution et à l’héberger dans une infrastructure d’hébergement réelle.If you're happy with the result, you're now ready to package the solution and host it in a real hosting infrastructure. Avant de générer l’offre groupée et le package, vous devez déclarer un fichier XML d’infrastructure de fonctionnalité afin de configurer l’extension.Before building the bundle and the package, you need to declare an XML Feature Framework file to provision the extension.

Vérification des éléments d’infrastructure de fonctionnalitéReview Feature Framework elements

  1. Dans l’éditeur de code, ouvrez le fichier /sharepoint/assets/elements.xml .In the code editor, open the /sharepoint/assets/elements.xml file. Dans l’extrait de code suivant, vous pouvez voir à quoi le fichier doit ressembler.In the following code excerpt, you can see how the file should look.

    <?xml version="1.0" encoding="utf-8"?>
    <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
        <Field ID="{40475661-efaf-447a-a220-c992b20ec1c3}"
               Name="SPFxColor"
               DisplayName="Color"
               Title="Color"
               Type="Choice"
               Required="FALSE"
               Group="SPFx Columns"
               ClientSideComponentId="c3070978-d85e-4298-8758-70b5b5933076">
        </Field>
    </Elements>
    

    Comme vous le voyez, il rappelle un fichier SharePoint Feature Framework, mais il définit un élément Field personnalisé avec un type de champ Choice, qui utilise l’attribut ClientSideComponentId pour faire référence à l’id du personnalisateur de champ, et il peut y avoir un attribut ClientSideComponentProperties pour configurer les propriétés de configuration personnalisées requises par l’extension.As you can see, it reminds us of a SharePoint Feature Framework file, but it defines a custom Field element with a field type Choice, which uses the ClientSideComponentId attribute to reference the id of the Field Customizer, and there could be a ClientSideComponentProperties attribute to configure the custom configuration properties required by the extension.

  2. Ouvrez le fichier . dossier/config/package-solution.js.Open the file ./config/package-solution.json. Dans le fichier, vous pouvez voir qu’il existe une référence au fichier elements.xml dans la assets section.Within the file, you can see that there's a reference to the elements.xml file in the assets section.

    {
      "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
      "solution": {
        "name": "spfx-custom-field-extension-client-side-solution",
        "id": "ab0fbbf8-01ba-4633-8498-46cfd5652619",
        "version": "1.0.0.0",
        "features": [{
          "title": "Application Extension - Deployment of custom action.",
          "description": "Deploys a custom action with ClientSideComponentId association",
          "id": "090dc976-878d-44fe-8f8e-ac603d094aa1",
          "version": "1.0.0.0",
          "assets": {
            "elementManifests": [
              "elements.xml"
            ]
          }
        }]
      },
      "paths": {
        "zippedPackage": "solution/spfx-custom-field-extension.sppkg"
      }
    }
    

Regrouper, empaqueter et déployer la solutionBundle, package and deploy the solution

Ensuite, vous devez regrouper et empaqueter un package de solution dans le catalogue d’applications.Next, you need to bundle and package solution bundle to the app catalog. Pour réaliser cette tâche, procédez comme suit :To accomplish this task, follow these steps.

Préparez et déployez la solution pour le client SharePoint Online :Prepare and deploy the solution for SharePoint Online tenant:

  1. Exécutez la tâche suivante pour regrouper votre solution.Execute the following task to bundle your solution. Cela crée une version Release de votre projet :This creates a release build of your project:

    gulp bundle --ship
    
  2. Exécutez la tâche suivante pour créer un package pour votre solution.Execute the following task to package your solution. Cette commande crée un package ** * . sppkg** dans le dossier SharePoint/solution .This command creates an *.sppkg package in the sharepoint/solution folder.

    gulp package-solution --ship
    
  3. Chargez ou glissez-déplacez le nouveau package de solution côté client dans le catalogue d’applications de votre client, puis sélectionnez le bouton Déployer.Upload or drag-and-drop the newly created client-side solution package to the app catalog in your tenant, and then select the Deploy button.

Installer et exécuter la solutionInstall and run the solution

  1. Ouvrez le navigateur et accédez à n’importe quel site cible « moderne ».Open the browser and navigate to any target "modern" site.

  2. Accédez à la page Contenu du site, puis ajoutez une nouvelle application.Go to the Site Contents page and select to add a new App.

  3. Installez une nouvelle application De votre organisation pour parcourir les solutions disponibles dans le catalogue des applications.Select to install a new app From Your Organization to browse the solutions available in the app catalog.

  4. Sélectionnez la solution nommée spfx-custom-field-extension-client-side-solution et installez-la sur le site cible.Select the solution called spfx-custom-field-extension-client-side-solution and install it on the target site.

    Ajouter une application d’interface utilisateur pour ajouter la solution à un site

  5. Une fois l’installation de l’application terminée, créez une liste personnalisée, modifiez les paramètres de liste et ajoutez une nouvelle colonne aux colonnes de site existantes.After the application installation is completed, create a new custom list, edit the list settings, and add a new column from already existing site columns. Sélectionnez le groupe de colonnes appelé Colonnes SPFx et ajoutez le champ Couleur.Select the group of columns called SPFx Columns and add the Color field.

    Personnalisateur de champ en action

  6. Modifiez le champ ajouté et configurez des valeurs de couleur (par exemple, rouge, vert, bleu, jaune), puis enregistrez les paramètres de champ.Edit the added field and configure some color values (such as Red, Green, Blue, Yellow), and then save the field settings.

  7. Ajoutez des éléments à la liste et observez le résultat dans l’affichage de liste.Add some items to the list and see the output in the list view. Il doit ressembler à l’une des captures d’écran suivantes.It should look like the one in the following screenshot.

    Personnalisateur de champ en action

Profitez de votre personnalisateur de champ créé à l’aide des extensions de SharePoint Framework !Enjoy your new Field Customizer built by using the SharePoint Framework extensions!

Voir aussiSee also