Créer votre première extension de personnalisateur de champBuild your first Field Customizer extension

Les extensions sont des composants côté client qui s’exécutent dans le contexte d’une page SharePoint.Extensions are client-side components that run inside the context of a SharePoint page. Les extensions peuvent être déployées sur SharePoint Online, et vous pouvez utiliser les bibliothèques et les outils JavaScript modernes pour les créer.Extensions can be deployed to SharePoint Online, and you can use modern JavaScript tools and libraries to build them.

Vous pouvez suivre cette procédure en regardant la vidéo sur la chaîne YouTube SharePoint PnP :You can follow these steps by watching the video on the SharePoint PnP YouTube Channel:

Cr?er un projet d?extensionCreate an extension project

  1. Créez un nouveau répertoire de projet à l’emplacement de votre choix.Create a new project directory in your favorite location.

    md field-extension
    
  2. Accédez au répertoire du projet.Go to the project directory.

    cd field-extension
    
  3. Créez une extension HelloWorld en exécutant le générateur SharePoint Yeoman.Create a new HelloWorld extension by running the Yeoman SharePoint Generator.

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

    • Quel est le nom de votre solution ?: Field-extensionWhat is your solution name?: field-extension
    • Les composants de la solution nécessiteront-ils des autorisations pour accéder aux API Web qui sont uniques et qui ne sont pas partagées avec d’autres composants dans le client ? (o/n) NoWill the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant? (y/n) n
    • 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? HelloWorldHelloWorld
    • Quelle est la description de votre personnalisateur de champ ?What is your Field Customizer description? Description de HelloWorldHelloWorld description
    • Quelle infrastructure voulez-vous utiliser ?  : Aucune infrastructure JavaScriptWhich framework would you like to use?: No JavaScript Framework

    À ce stade, Yeoman installe les dépendances requises et établit la structure des fichiers de la solution avec l’extension HelloWorld.At this point, Yeoman installs the required dependencies and scaffolds the solution files along with the HelloWorld extension. Cette opération peut prendre quelques minutes.This might take a few minutes.

  5. Entrez les informations suivantes dans la console pour démarrer Visual Studio Code.Type the following into the console to start Visual Studio Code.

    code .
    

    Notes

    Étant donné que la solution côté client SharePoint utilise du code HTML/TypeScript, vous pouvez utiliser n’importe quel éditeur de code qui prend en charge le développement côté client pour créer votre extension.Because the SharePoint client-side solution is HTML/TypeScript based, you can use any code editor that supports client-side development to build your extension.

  6. Ouvrez le fichier ./src/extensions/helloWorld/HelloWorldFieldCustomizer.manifest.js .Open the ./src/extensions/helloWorld/HelloWorldFieldCustomizer.manifest.json file.

    Ce fichier définit votre type d’extension et un identificateur unique id pour votre extension.This file defines your extension type and a unique identifier id for your extension. Vous aurez besoin ultérieurement de cet identificateur unique lors du débogage et du déploiement de votre extension sur SharePoint.You need this unique identifier later when debugging and deploying your extension to SharePoint.

Codage de votre personnalisateur de champCode your Field Customizer

Ouvrez le fichier ./SRC/extensions/HelloWorld/HelloWorldFieldCustomizer.TS .Open the ./src/extensions/helloWorld/HelloWorldFieldCustomizer.ts file.

Notez que la classe de base pour le personnalisateur de champ est importée à partir du package sp-listview-extensibility, qui contient le code SharePoint Framework requis par le personnalisateur de champ.Notice that the base class for the Field Customizer is imported from the sp-listview-extensibility package, which contains SharePoint Framework code required by the Field Customizer.

import { Log } from '@microsoft/sp-core-library';
import { override } from '@microsoft/decorators';
import {
  BaseFieldCustomizer,
  IFieldCustomizerCellEventParameters
} from '@microsoft/sp-listview-extensibility';

La logique de votre personnalisateur de champ est contenue dans les onInit() onRenderCell() méthodes, et onDisposeCell() .The logic for your Field Customizer is contained in the onInit(), onRenderCell(), and onDisposeCell() methods.

  • onInit() est l’emplacement où vous allez exécuter le programme d’installation nécessaire pour votre extension.onInit() is where you'll execute the setup needed for your extension. Cet événement se produit après que this.context et this.properties ont été attribués, mais avant que la page DOM ne soit prête.This event occurs after this.context and this.properties are assigned, but before the page DOM is ready. Comme pour les composants WebPart, onInit() renvoie une promesse que vous pouvez utiliser pour effectuer des opérations asynchrones ; non onRenderCell() appelé jusqu’à ce que votre promesse soit résolue.As with web parts, onInit() returns a promise that you can use to do asynchronous operations; onRenderCell() isn't called until your promise has resolved. Si vous n’en avez pas besoin, renvoyez simplement Promise.resolve<void>();.If you don’t need that, simply return Promise.resolve<void>();.
  • onRenderCell() se produit lorsque chaque cellule est affichée.onRenderCell() occurs when each cell is rendered. Il fournit un élément HTML event.domElement où votre code peut écrire son contenu.It provides an event.domElement HTML element where your code can write its content.
  • onDisposeCell() se produit immédiatement avant la suppression de la event.cellDiv .onDisposeCell() occurs immediately before the event.cellDiv is deleted. Il peut être utilisé pour libérer des ressources qui ont été allouées pendant le rendu du champ.It can be used to free any resources that were allocated during field rendering. Par exemple, si onRenderCell() a monté un élément React, onDisposeCell() doit être utilisé pour le libérer ; sinon, une perte de ressource se produit.For example, if onRenderCell() mounted a React element, onDisposeCell() must be used to free it; otherwise, a resource leak would occur.

Vous trouverez ci-dessous le contenu de onRenderCell() et onDisposeCell() dans la solution par défaut :The following are the contents of onRenderCell() and onDisposeCell() in the default solution:

@override
public onRenderCell(event: IFieldCustomizerCellEventParameters): void {
  // Use this method to perform your custom cell rendering.
  const text: string = `${this.properties.sampleText}: ${event.fieldValue}`;

  event.domElement.innerText = text;

  event.domElement.classList.add(styles.cell);
}

@override
public onDisposeCell(event: IFieldCustomizerCellEventParameters): void {
  super.onDisposeCell(event);
}

Débogage de votre personnalisateur de champDebug your Field Customizer

Vous ne pouvez pas utiliser le Workbench local pour tester les extensions SharePoint Framework.You can't use the local Workbench to test SharePoint Framework Extensions. Vous devez les tester et les développer directement auprès d’un site SharePoint Online activé.You need to test and develop them directly against a live SharePoint Online site. Pour ce faire, vous n’êtes pas obligé de déployer votre personnalisation dans le catalogue d’applications. Ainsi, l’expérience de débogage est simple et efficace.You don't have to deploy your customization to the app catalog to do this, which makes the debugging experience simple and efficient.

  1. Pour tester votre extension, vous devez d’abord créer le champ pour tester le Personnalisateur dans.To test your extension, you'll need to first create the field to test the customizer in. Accédez au site dans votre client SharePoint Online où tester le personnalisateur de champ.So move to the site in your SharePoint Online tenant where you want to test the field customizer.

  2. Accédez à la page Contenu du site.Navigate to the Site Contents page.

  3. Dans la barre d’outils, sélectionnez Nouveau, puis Liste.On the toolbar, select New, and then select List.

    Création d’une liste

  4. Créez une liste nommée Commandes, puis sélectionnez Créer.Create a new list named Orders, and then select Create.

    Création d’une liste avec le nom des commandes

  5. Sélectionnez le + signe, puis sélectionnez numéro pour créer un champ de numéro pour la liste.Select the + sign, and then select Number to create a new Number field for the list.

    Création d’un champ Nombre

  6. Définissez le nom du champ sur pourcentage, puis sélectionnez Enregistrer.Set the name of the field to Percent, and then select Save.

    Création d’un champ appelé Pourcentage

  7. Ajoutez quelques éléments avec différents nombres dans le champ Pourcentage. Nous modifierons le rendu ultérieurement dans ce didacticiel, donc les différents nombres seront affichés différemment en fonction de votre implémentation personnalisée.Add a few items with different numbers in the percent field. We'll modify the rendering later in this tutorial, so the different numbers will be presented differently based on your custom implementation.

    Création d’éléments dans la liste nouvellement créée avec des valeurs différentes dans le champ Pourcentage

  8. Dans Visual Studio code, ouvrez le fichier . dossier/config/serve.js .Within Visual Studio Code, open the ./config/serve.json file.

    Définissez l' InternalFieldName attribut sur Percent pour le nom de champ que nous avons créé.Set the InternalFieldName attribute to Percent for the field name, which we created. Mettez à jour les pageUrl attributs pour qu’ils correspondent à une URL de la liste que nous avons créée dans les étapes d’aperçu.Update the pageUrl attributes to match a URL of the list which we created in the preview steps. Une fois les modifications apportées, votre serve.jssur doit ressembler au code suivant :After the changes, your serve.json should look like the following code:

    {
      "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
      "port": 4321,
      "https": true,
      "serveConfigurations": {
        "default": {
          "pageUrl": "https://sppnp.sharepoint.com/sites/Group/Lists/Orders/AllItems.aspx",
          "fieldCustomizers": {
            "Percent": {
              "id": "b909e395-f714-421f-94e0-d638dafeb210",
                "properties": {
                "sampleText": "Value"
              }
            }
          }
        },
        "helloWorld": {
          "pageUrl": "https://sppnp.sharepoint.com/sites/Group/Lists/Orders/AllItems.aspx",
          "fieldCustomizers": {
            "Percent": {
              "id": "b909e395-f714-421f-94e0-d638dafeb210",
              "properties": {
                "sampleText": "Value"
              }
            }
          }
        }
      }
    }
    

    Notes

    Le GUID dans l’extrait JSON ci-dessus est l’ID unique du composant d’extension SPFx.The GUID in the above JSON excerpt is the unique ID of the SPFx extension component. Cette définition est définie dans le manifeste du composant.This is defined in the component's manifest. Le GUID de votre solution sera différent, car chaque ID de composant est unique.The GUID in your solution will be different as every component ID is unique.

  9. Compilez votre code et hébergez les fichiers compilés à partir de l’ordinateur local en exécutant la commande suivante :Compile your code and host the compiled files from the local machine by running this command:

    gulp serve
    

    Lorsque le code se compile sans erreur, il sert le manifeste obtenu à partir de https://localhost:4321 .When the code compiles without errors, it serves the resulting manifest from https://localhost:4321.

    gulp serve

    Cela permet de démarrer votre navigateur par défaut et de charger la page définie dans serve.jssur le fichier.This will start your default browser and load the page defined in serve.json file.

  10. Acceptez le chargement des manifestes de débogage en sélectionnant Charger les scripts de débogage lorsque vous y êtes invité.Accept the loading of debug manifests by selecting Load debug scripts when prompted.

    Accepter le chargement des scripts de débogage

    Notez comment les valeurs de colonne de pourcentage sont maintenant présentées avec une chaîne de préfixe supplémentaire en tant que valeur :, qui est fournie en tant que propriété pour le Personnalisateur de champ.Notice how the Percent column values are now presented with an additional prefix string as Value:, which is provided as a property for the Field Customizer.

    Affichage de liste avec personnalisateur de champ rendu pour le champ Pourcentage

Amélioration du rendu du personnalisateur de champEnhance the Field Customizer rendering

Maintenant que nous avons testé le point de départ prêt à l’emploi du Personnalisateur de champ, nous allons modifier légèrement la logique pour obtenir un rendu plus soignable de la valeur de champ.Now that we've successfully tested the out-of-the-box starting point of the Field Customizer, let's modify the logic slightly to have a more polished rendering of the field value.

  1. Ouvrez le fichier ./SRC/extensions/HelloWorld/HelloWorldFieldCustomizer.module.SCSS et mettez à jour la définition de style comme suit.Open the ./src/extensions/helloWorld/HelloWorldFieldCustomizer.module.scss file, and update the styling definition as follows.

    .HelloWorld {
      .cell {
        display: inline-block;
      }
      .full {
        background-color: #e5e5e5;
        width: 100px;
      }
    }
    
  2. Ouvrez le fichier ./SRC/extensions/HelloWorld/HelloWorldFieldCustomizer.TS et mettez à jour la onRenderCell() méthode comme suit.Open the file ./src/extensions/helloWorld/HelloWorldFieldCustomizer.ts and update the onRenderCell() method as follows.

    @override
    public onRenderCell(event: IFieldCustomizerCellEventParameters): void {
      event.domElement.classList.add(styles.cell);
      event.domElement.innerHTML = `
        <div class='${styles.HelloWorld}'>
            <div class='${styles.full}'>
            <div style='width: ${event.fieldValue}px; background:#0094ff; color:#c0c0c0'>
                &nbsp; ${event.fieldValue}
            </div>
            </div>
        </div>`;
    }
    
  3. Dans la fenêtre de la console, vérifiez que vous n’avez pas d’erreurs.In the console window, ensure that you don't have any errors. Si la solution n’est pas en cours d’exécution, exécutez la tâche suivante :If the solution isn't running, execute the following task:

    gulp serve
    
  4. Dans la liste créée précédemment, actualisez la fenêtre du navigateur avec les paramètres de requête de débogage ou redémarrez le navigateur avec Gulp serve.In your previously created list, refresh the browser window with the debugging query parameters or restart the browser with gulp serve.

  5. Acceptez le chargement des manifestes de débogage en sélectionnant Charger les scripts de débogage lorsque vous y êtes invité.Accept the loading of debug manifests by selecting Load debug scripts when prompted.

    Accepter le chargement des scripts de débogage

    Notez la façon dont nous avons modifié le style du rendu du champ complètement.Note how we changed the field rendering style completely. La valeur du champ est indiquée à l’aide d’une représentation graphique de la valeur.The field value is indicated by using a graphical representation of the value.

    Représentation graphique du pourcentage

Ajouter la définition du champ au package de solution pour le déploiementAdd the field definition to the solution package for deployment

Maintenant que nous avons testé correctement notre solution en mode de débogage, nous pouvons la configurer pour qu’elle soit déployée automatiquement dans le cadre du package de solution déployé sur les sites.Now that we've tested our solution properly in debug mode, we can package this to be deployed automatically as part of the solution package deployed to the sites.

  1. Installez le package de solution sur le site où il doit être installé, afin que le manifeste d’extension soit sur la liste approuvée pour l’exécution.Install the solution package to the site where it should be installed, so that the extension manifest is white listed for execution.

  2. Associez le personnalisateur de champ à un champ existant dans le site.Associate the Field Customizer to an existing field in the site. Vous pouvez effectuer cette opération par programme à l’aide de l’API REST ou CSOM SharePoint, ou à l’aide de l’infrastructure de fonctionnalité dans le package de solution SharePoint Framework.You can do this programmatically using the SharePoint REST or CSOM API, or by using the Feature Framework in of the SharePoint Framework solution package. Dans ce didacticiel, nous allons utiliser les fichiers XML de Feature Framework.In this tutorial, we'll use the Feature Framework's xml files. Vous devez associer les propriétés suivantes dans l’objet SPField au niveau du site ou de la liste.You need to associate the following properties in the SPField object at the site or list level.

    • ClientSiteComponentId: il s’agit de l’identificateur (GUID) du Personnalisateur de champ qui a été installé dans le catalogue d’applications.ClientSiteComponentId: this is the identifier (GUID) of the Field Customizer that has been installed in the app catalog.
    • ClientSideComponentProperties: il s’agit d’un paramètre facultatif qui peut être utilisé pour fournir des propriétés pour l’instance du Personnalisateur de champ.ClientSideComponentProperties: this is an optional parameter that can be used to provide properties for the Field Customizer instance.

    Vous pouvez contrôler la nécessité d’ajouter une solution contenant votre extension sur le site avec la skipFeatureDeployment propriété dans . dossier/config/package-solution.jssur le fichier.You can control the requirement to add a solution containing your extension to the site with the skipFeatureDeployment property in ./config/package-solution.json file. Même si vous ne souhaitez pas que la solution soit installée sur le site, vous devez l’associer ClientSideComponentId à des objets spécifiques pour que l’extension soit visible.Even though you wouldn't require the solution to be installed on the site, you'd need to associate ClientSideComponentId to specific objects for the extension to be visible.

    Vous pouvez utiliser, par exemple, l’applet de commande Set-PnPField à partir des applets de commande PowerShell PNP pour associer par programmation une extension à des champs existants dans vos sites.You can use, for example, Set-PnPField cmdlet from PnP PowerShell cmdlets to programatically associate an extension to existing fields in your sites.

    Notes

    PnP PowerShell est une solution open source pour laquelle un support est assuré par la communauté active.PnP PowerShell is an open-source solution with active community providing support for it. Il n’existe pas de contrat SLA Microsoft pour le support technique relatif à cet outil open source.There is no SLA for the open-source tool support from Microsoft.

Vérification du fichier elements.xmlReview the elements.xml file

Dans les étapes suivantes, nous allons vérifier la définition de champ par défaut, qui a été automatiquement créée et sera ensuite utilisée pour déployer automatiquement les configurations nécessaires lorsque le package de solution sera installé sur un site.In the following steps, we review the default field definition, which was automatically created and will then be used to automatically deploy needed configurations when the solution package is installed on a site.

  1. Revenez à votre solution dans Visual Studio Code (ou dans votre éditeur favori).Return to your solution in Visual Studio Code (or to your preferred editor).

  2. Ouvrez le fichier ./sharepoint/assets/elements.xml.Open the file ./sharepoint/assets/elements.xml.

    dossier assets dans la structure de la solution

Examinez le code XML dans ce fichier.Look at the XML in this file. La ClientSideComponentId propriété a été automatiquement mise à jour avec l’ID unique de votre personnalisateur de champ disponible dans le fichier ./SRC/extensions/HelloWorld/HelloWorldFieldCustomizer.manifest.js .The ClientSideComponentId property has been automatically updated to the unique ID of your Field Customizer available in the ./src/extensions/helloWorld/HelloWorldFieldCustomizer.manifest.json file. Vous devrez ajuster ce fichier correspondant sur le type de champ et les détails.You'll need to adjust this file matching on your field type and details.

Notes

Pour plus d’informations sur le schéma XML de l’infrastructure de fonctionnalité, voir : référence de schéma SharePoint.For more information on the Feature Framework XML schema, see: SharePoint schema reference.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Field ID="{060E50AC-E9C1-3D3C-B1F9-DE0BCAC200F6}"
          Name="SPFxPercentage"
          DisplayName="Percentage"
          Type="Number"
          Min="0"
          Required="FALSE"
          Group="SPFx Columns"
          ClientSideComponentId="7e7a4262-d02b-49bf-bfcb-e6ef1716aaef">
  </Field>
</Elements>

S’assurer que les définitions sont prises en compte dans le pipeline de buildEnsure that definitions are taken into account within the build pipeline

Ouvrez le fichier ./config/package-solution.json.Open the ./config/package-solution.json file.

Le fichier package-solution.json définit les métadonnées de package, comme illustré dans le code suivant :The package-solution.json file defines the package metadata as shown in the following code. Pour vous assurer que le fichier element.xml est pris en compte lors de la création du package de solution, la structure par défaut de ce fichier est mise à jour pour inclure les détails supplémentaires d’une définition de fonctionnalité.To ensure that the element.xml file is taken into account while the solution package is created, the default scaffolding of this file is updated to include additional details for a feature definition. Cette définition de fonctionnalité est utilisée pour mettre en service et exécuter le fichier elements.xml .This feature definition is used to provision and execute the elements.xml file.

Notez également que l' includeClientSideAssets attribut est défini sur true .Also notice that the includeClientSideAssets attribute is set to true. Cela signifie que les ressources JavaScript seront incluses dans le fichier ** * . sppkg** :This means the JavaScript assets will be included in the *.sppkg file:

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "field-extension-client-side-solution",
    "id": "80c04d1b-dca7-4d0a-86c0-9aedf904704f",
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    "isDomainIsolated": false,
    "features": [
      {
        "title": "Application Extension - Deployment of custom action.",
        "description": "Deploys a custom action with ClientSideComponentId association",
        "id": "b27507b9-7c2a-4398-8946-7438571f16f6",
        "version": "1.0.0.0",
        "assets": {
          "elementManifests": [
            "elements.xml"
          ]
        }
      }
    ]
  },
  "paths": {
    "zippedPackage": "solution/field-extension.sppkg"
  }
}

Déployer le champ sur SharePoint Online et héberger JavaScript à partir de l’hôte localDeploy the field to SharePoint Online and host JavaScript from local host

Vous êtes maintenant prêt à déployer la solution sur un site SharePoint et à obtenir l’Association de champ automatiquement incluse dans un champ.Now you're ready to deploy the solution to a SharePoint site and get the field association automatically included in a field. Nous allons utiliser l’option --Ship avec cet empaquetage afin que toutes les ressources soient automatiquement empaquetées dans le package de solution.We'll use the --ship option with this packaging so all assets are packaged automatically in the solution package.

  1. Dans la fenêtre de la console, entrez la commande suivante pour intégrer votre solution côté client qui contient l’extension dans un package, afin que la structure de base soit prête pour la création de package :In the console window, enter the following command to package your client-side solution that contains the extension so that we get the basic structure ready for packaging:

    gulp bundle --ship
    
  2. Exécutez la commande suivante afin de créer le package de solutions :Execute the following command so that the solution package is created:

    gulp package-solution --ship
    

    La commande crée le package : ./SharePoint/solution/Field-extension.sppkg:The command creates the package: ./sharepoint/solution/field-extension.sppkg:

  3. Vous devez maintenant déployer le package qui a été généré dans le catalogue d’applications.You now need to deploy the package that was generated to the app catalog. Pour ce faire, accédez au catalogue d’applications de votre client et ouvrez la bibliothèque Applications pour SharePoint.To do this, go to your tenant's app catalog and open the Apps for SharePoint library.

  4. Téléchargez le fichier ./SharePoint/solution/Field-extension.sppkg dans le catalogue d’applications.Upload the file ./sharepoint/solution/field-extension.sppkg to the app catalog.

    Notez que SharePoint affiche la boîte de dialogue d’approbation et vous demande d’approuver la solution côté client avec SharePoint Online en tant que domaine.Notice that SharePoint displays the trust dialog and asks you to trust the client-side solution with SharePoint Online as the domain. Vos biens seront automatiquement hébergés soit à partir de l’URL du catalogue d’applications, soit à partir du CDN public Microsoft 365, selon vos paramètres de client.Your assets will be automatically hosted either from app catalog URL or from Microsoft 365 public CDN, depending on your tenant settings.

  5. Sélectionnez le bouton Déployer.Select the Deploy button.

    Boîte de dialogue Déployer

  6. Accédez au site sur lequel vous souhaitez tester la mise en service de composants SharePoint. Il peut s’agir d’une collection de sites dans le client où vous avez déployé ce package de solutions.Go to the site where you want to test SharePoint asset provisioning. This could be any site collection in the tenant where you deployed this solution package.

  7. Sélectionnez l’icône représentant un engrenage sur la barre de navigation supérieure, à droite, puis sélectionnez Ajouter une application.Select the gears icon on the top navigation bar on the right, and then select Add an app.

  8. Dans la zone de recherche , entrez champ, puis appuyez sur entrée pour filtrer vos applications.In the Search box, enter field, and then select ENTER to filter your apps.

    installation du personnalisateur de champ sur le site

  9. Sélectionnez l’application field-extension-client-side-solution pour installer la solution sur le site.Select the field-extension-client-side-solution app to install the solution on the site. Une fois l’installation terminée, actualisez la page.After the installation is complete, refresh the page.

  10. Une fois que la solution est installée, sélectionnez Nouveau dans la barre d’outils sur la page Contenu du site et sélectionnez Liste.When the solution has been installed, select New from the toolbar on the Site Contents page, and then select List.

    Création d’une liste

  11. Créez une liste appelée Factures.Create a list named Invoices.

  12. Lorsque la nouvelle liste est créée, sur la page Contenu du site, sélectionnez Paramètres dans le menu de la liste nouvellement créée.When the new list is created, on the Site Contents page, select Settings from the menu of the newly created list.

    Paramètres de la nouvelle liste

  13. Sélectionnez colonnes > Ajouter à partir de colonnes de site existantes.Select Columns > Add from existing site columns.

  14. Sélectionnez le champ de pourcentage SPFx Columns > Percentage qui a été mis en service à partir du package de solution, puis sélectionnez OK.Select the SPFx Columns > Percentage field that was provisioned from the solution package, and then select OK.

    Ajout du champ Pourcentage à la liste

  15. Accédez à la liste Factures nouvellement créée.Go to the newly created Invoices list. Ajoutez quelques nouveaux éléments à la liste avec des valeurs différentes dans la colonne Pourcentage pour voir comment le champ est rendu sans les paramètres de requête de débogage.Add a few items to the list with different values in the Percentage column to determine how the field is rendering without the debug query parameters.

Rendu du champ sans paramètres de requête de débogage

Le processus de publication de votre application est identique quel que soit le type d’extension.The process for publishing your app is identical among the different extension types.

Notes

Il s’agissait d’un Personnalisateur de champ relativement simple doté de fonctionnalités qui pouvaient également être réalisées avec la fonctionnalité de mise en forme de colonne.This was a relatively simple field customizer with functionality that could also have been achieved with column formatting capability. Toutefois, la mise en forme de colonne ne prend pas en charge le code personnalisé réel.Column formatting however does not support actual custom code. Notez que les personnalisateurs de champ ne peuvent pas être modifiés par les utilisateurs finaux à partir de l’interface utilisateur qui active des cas d’utilisation supplémentaires.Notice that field customizers cannot be modified by end users from the user interface which enables additional use cases.

Voir aussiSee also