Créer votre première extension de jeu de commandes ListViewBuild your first ListView Command Set 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 command-extension
    
  2. Accédez au répertoire du projet.Go to the project directory.

    cd command-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 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 ?: commande-extensionWhat is your solution name?: command-extension
    • Quels packages de base voulez-vous cibler pour vos composants ?Which baseline packages do you want to target for your component(s)? SharePoint Online uniquement (dernière version)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? Jeu de commandes ListViewListView Command Set
    • Quel est le nom de votre jeu de commandes ?What is your Command Set name? HelloWorldHelloWorld
    • Quelle est la description de votre jeu de commandes ?What is your Command Set description? Description de HelloWorldHelloWorld description

    À 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. Cela prend généralement 1-3 minutes.This usually takes 1-3 minutes.

  5. Ensuite, entrez les informations suivantes dans la console pour démarrer Visual Studio Code.Next, type the following into the console to start Visual Studio Code.

    code .
    
  6. Ouvrez le fichier ./src/extensions/helloWorld/HelloWorldCommandSet.manifest.js .Open the ./src/extensions/helloWorld/HelloWorldCommandSet.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.

    {
      "$schema": "https://developer.microsoft.com/json-schemas/spfx/command-set-extension-manifest.schema.json",
    
      "id": "95688e19-faea-4ef1-8394-489bed1de2b4",
      "alias": "HelloWorldCommandSet",
      "componentType": "Extension",
      "extensionType": "ListViewCommandSet",
    
      "version": "*",
      "manifestVersion": 2,
    
      "requiresCustomScript": false,
    
      "items": {
        "COMMAND_1": {
          "title": { "default": "Command One" },
          "iconImageUrl": "icons/request.png",
          "type": "command"
        },
        "COMMAND_2": {
          "title": { "default": "Command Two" },
          "iconImageUrl": "icons/cancel.png",
          "type": "command"
        }
      }
    }
    

    Notez les définitions de commande réelles dans le fichier manifeste.Note the actual command definitions in the manifest file. Voici les boutons réels qui sont exposés en fonction de la cible d’enregistrement.These are the actual buttons that are exposed based on the registration target. Dans le modèle par défaut, deux boutons différents sont disponibles : Commande un et Commande deux.In the default template, you find two different buttons: Command One and Command Two.

Notes

Les images ne sont pas référencées correctement sauf si vous y faites référence à partir d’emplacements absolus dans un CDN au sein de votre manifeste.Images aren't properly referenced unless you're referring to them from absolute locations in a CDN within your manifest.

Codage de votre jeu de commandes ListViewCode your ListView Command Set

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

Notez que la classe de base pour le jeu de commandes ListView est importée à partir du package ** @ Microsoft/SP-ListView-Extensibility** , qui contient le code SharePoint Framework (SPFx) requis par le jeu de commandes ListView.Notice the base class for the ListView Command Set is imported from the @microsoft/sp-listview-extensibility package, which contains SharePoint Framework (SPFx) code required by the ListView Command Set.

import { override } from '@microsoft/decorators';
import { Log } from '@microsoft/sp-core-library';
import {
  BaseListViewCommandSet,
  Command,
  IListViewCommandSetListViewUpdatedParameters,
  IListViewCommandSetExecuteEventParameters
} from '@microsoft/sp-listview-extensibility';
import { Dialog } from '@microsoft/sp-dialog';

Le comportement de vos boutons personnalisés est contenu dans les onListViewUpdated() OnExecute() méthodes et.The behavior for your custom buttons is contained in the onListViewUpdated() and OnExecute() methods.

L' onListViewUpdated() événement se produit séparément pour chaque commande (par exemple, un élément de menu) chaque fois qu’une modification se produit dans ListView, et l’interface utilisateur doit être réaffichée.The onListViewUpdated() event occurs separately for each command (for example, a menu item) whenever a change happens in the ListView, and the UI needs to be re-rendered. Le paramètre de la fonction event représente les informations sur la commande rendue.The event function parameter represents information about the command being rendered. Le gestionnaire peut utiliser ces informations pour personnaliser le titre ou ajuster la visibilité, par exemple, si une commande doit être affichée uniquement lorsqu’un certain nombre d’éléments est sélectionné dans l’affichage de liste.The handler can use this information to customize the title or adjust the visibility, for example, if a command should only be shown when a certain number of items are selected in the list view. Il s’agit de l’implémentation par défaut.This is the default implementation.

Lorsque vous utilisez la méthode tryGetCommand(), vous recevez un objet Command qui est une représentation de la commande affichée dans l’interface utilisateur.When using the method tryGetCommand(), you get a Command object, which is a representation of the command that shows in the UI. Vous pouvez modifier ses valeurs (title ou visible) pour modifier l’élément de l’interface utilisateur.You can modify its values, such as title, or visible, to modify the UI element. SPFx utilise ces informations lorsque le nouveau rendu des commandes est effectué.SPFx uses this information when re-rendering the commands. Ces objets conservent l’état du dernier rendu. Par conséquent, si une commande est définie sur visible = false, elle reste invisible jusqu’à ce qu’elle soit redéfinie sur visible = true.These objects keep the state from the last render, so if a command is set to visible = false, it remains invisible until it is set back to visible = true.

@override
public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters): void {
  const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
  if (compareOneCommand) {
    // This command should be hidden unless exactly one row is selected.
    compareOneCommand.visible = event.selectedRows.length === 1;
  }
}

La onExecute() méthode définit ce qui se passe lors de l’exécution d’une commande (par exemple, l’élément de menu est sélectionné).The onExecute() method defines what happens when a command is executed (for example, the menu item is selected). Dans l’implémentation par défaut, différents messages s’affichent en fonction du bouton sélectionné.In the default implementation, different messages are shown based on which button was selected.

@override
public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
  switch (event.itemId) {
    case 'COMMAND_1':
      Dialog.alert(`${this.properties.sampleTextOne}`);
      break;
    case 'COMMAND_2':
      Dialog.alert(`${this.properties.sampleTextTwo}`);
      break;
    default:
      throw new Error('Unknown command');
  }
}

Débogage de votre jeu de commandes ListViewDebug your ListView Command Set

Vous ne pouvez pas utiliser actuellement le workbench local pour tester les extensions SharePoint Framework.You cannot currently use the local Workbench to test SharePoint Framework Extensions. Vous devez les tester et les développer directement par rapport à un site SharePoint Online actif.You'll 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. Accédez à une liste SharePoint dans votre site SharePoint Online à l’aide de l’expérience moderne ou créez une liste.Go to any SharePoint list in your SharePoint Online site by using the modern experience or create a new list. Copiez l’URL de la liste dans le presse-papiers, car vous en aurez besoin à l’étape suivante.Copy the URL of the list to clipboard as we will be needing that in following step.

    Puisque notre jeu de commandes ListView est hébergé à partir de l’hôte local et est en cours d’exécution, nous pouvons utiliser des paramètres de requête de débogage spécifiques pour exécuter le code dans l’affichage de liste.Because our ListView Command Set is hosted from localhost and is running, we can use specific debug query parameters to execute the code in the list view.

  2. Ouvrez le fichier. dossier/config/serve.js .Open ./config/serve.json file. Mettez à jour les pageUrl attributs pour qu’ils correspondent à une URL de la liste dans laquelle vous souhaitez tester la solution.Update the pageUrl attributes to match a URL of the list where you want to test the solution. Une fois que les modifications apportées à votre serve.jsdoivent ressembler à ce qui suit :After edits your serve.json should look somewhat like:

    {
      "$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",
          "customActions": {
            "bf232d1d-279c-465e-a6e4-359cb4957377": {
              "location": "ClientSideExtension.ListViewCommandSet.CommandBar",
              "properties": {
                "sampleTextOne": "One item is selected in the list",
                "sampleTextTwo": "This command is always visible."
              }
            }
          }
        },
        "helloWorld": {
          "pageUrl": "https://sppnp.sharepoint.com/sites/Group/Lists/Orders/AllItems.aspx",
          "customActions": {
            "bf232d1d-279c-465e-a6e4-359cb4957377": {
              "location": "ClientSideExtension.ListViewCommandSet.CommandBar",
              "properties": {
                "sampleTextOne": "One item is selected in the list",
                "sampleTextTwo": "This command is always visible."
              }
            }
          }
        }
      }
    }
    
  3. 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.

    Cela démarre également votre navigateur par défaut dans l’URL définie dans le fichier . dossier/config/serve.js .This will also start your default browser within the URL defined in ./config/serve.json file. Au moins dans Windows, vous pouvez contrôler la fenêtre du navigateur qui est utilisée en activant la fenêtre de votre choix avant d’exécuter cette commande.Notice that at least in Windows, you can control which browser window is used by activating the preferred one before executing this command.

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

  5. Notez le nouveau bouton Commande deux disponible dans la barre d’outils.Notice the new Command Two button available in the toolbar. Sélectionnez ce bouton pour afficher le texte fourni comme propriété pour la propriété sampleTextTwo.Select that button to see the text provided as property for the sampleTextTwo property.

    Bouton Commande deux visible dans la barre d’outils de la bibliothèque de documents

  6. Le bouton Commande un n’est pas visible selon le code, jusqu'à ce qu’une ligne soit sélectionnée dans la bibliothèque de documents.The Command One button is not visible based on the code, until one row is selected in the document library. Téléchargez ou créez un document dans la bibliothèque et confirmez que le deuxième bouton est visible.Upload or create a document to the library and confirm that the second button is visible.

    Sélection d’un document pour rendre le bouton Commande un visible

  7. Sélectionnez Commande deux pour savoir comment fonctionne la boîte de dialogue, qui est utilisée dans le résultat par défaut de l’établissement de la structure de la solution lorsque le jeu de commandes ListView est sélectionné comme type d’extension.Select Command Two to see how the dialog control works, which is used in the default output from the solution scaffolding when the ListView Command Set is selected as the extension type.

    Sélection d’un document pour rendre visible le bouton Commande un

Plus de détails sur les options de serve.jsMore details about serve.json options

  • customActions: simule une action personnalisée.customActions: simulates a custom action. Vous pouvez définir de nombreuses propriétés sur cet objet CustomAction qui affectent l’apparence et l’emplacement de votre bouton ; nous les décrirons ultérieurement.You can set many properties on this CustomAction object that affect the look, feel, and location of your button; we’ll cover them all later.
    • GUID: GUID de l’extension.GUID: GUID of the extension.
    • Location: Où les commandes sont affichées.Location: Where the commands are displayed. Les valeurs possibles sont les suivantes :The possible values are:
      • ClientSideExtension.ListViewCommandSet.ContextMenu: Le menu contextuel des éléments.ClientSideExtension.ListViewCommandSet.ContextMenu: The context menu of the item(s).
      • ClientSideExtension.ListViewCommandSet.CommandBar: Menu du jeu de commandes supérieur dans une liste ou une bibliothèque.ClientSideExtension.ListViewCommandSet.CommandBar: The top command set menu in a list or library.
      • ClientSideExtension.ListViewCommandSet: Le menu contextuel et la barre de commandes (correspond à SPUserCustomAction. Location = "CommandUI. Ribbon").ClientSideExtension.ListViewCommandSet: Both the context menu and the command bar (corresponds to SPUserCustomAction.Location="CommandUI.Ribbon").
    • Properties: Objet JSON facultatif contenant les propriétés disponibles via le this.properties membre.Properties: An optional JSON object containing properties that are available via the this.properties member.

Amélioration du rendu du jeu de commandes ListViewEnhance the ListView Command Set rendering

La solution par défaut utilise une nouvelle API de boîte de dialogue, qui peut être utilisée pour afficher les boîtes de dialogue modales facilement à partir de votre code.The default solution takes advantage of a new Dialog API, which can be used to show modal dialogs easily from your code. Dans les étapes suivantes, nous allons modifier légèrement l’expérience par défaut pour décrire des exemples d’utilisation de l’API de boîte de dialogue.In the following steps, we'll slightly modify the default experience to demonstrate Dialog API use cases.

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

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

  3. Mettez à jour la onExecute() méthode comme suit :Update the onExecute() method as follows:

    @override
    public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
      switch (event.itemId) {
        case 'COMMAND_1':
          Dialog.alert(`Clicked ${strings.Command1}`);
          break;
        case 'COMMAND_2':
          Dialog.prompt(`Clicked ${strings.Command2}. Enter something to alert:`).then((value: string) => {
            Dialog.alert(value);
          });
          break;
        default:
          throw new Error('Unknown command');
      }
    }
    
  4. Dans la fenêtre de la console, vérifiez que vous n’avez pas d’exceptions.In your console window, ensure that you do not have any exceptions. Si la solution n’est pas déjà exécutée dans localhost, exécutez la commande suivante :If you do not already have the solution running in localhost, execute the following command:

    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

    Nous avons toujours les mêmes boutons dans la barre d’outils, mais vous remarquerez qu’ils se comportent différemment si vous les sélectionnez un par un.We still have the same buttons in the toolbar, but you'll notice they behave differently if you select them one-by-one. Maintenant, nous utilisons la nouvelle API de boîte de dialogue, qui peut être facilement utilisée avec vos solutions, même pour des scénarios complexes.Now we are using the new Dialog API, which can be easily used with your solutions, even for complex scenarios.

    Bouton OK permettant d’accepter le chargement des scripts de débogage

Ajout d’un jeu de commandes ListView dans un package de solution pour le déploiementAdd a ListView Command Set to a solution package for deployment

  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 ./sharepoint/assets/elements.xml file.

Observez la structure XML suivante dans elements.xml.Note the following XML structure in elements.xml. La ClientSideComponentId propriété a été mise à jour avec l’ID unique de votre jeu de commandes ListView disponible dans le fichier ./SRC/extensions/HelloWorld/HelloWorldCommandSet.manifest.js .The ClientSideComponentId property has been updated to the unique ID of your ListView Command Set available in the ./src/extensions/helloWorld/HelloWorldCommandSet.manifest.json file.

Notez que nous utilisons une valeur d’emplacement spécifique de ClientSideExtension.ListViewCommandSet.CommandBar pour définir qu’il s’agit d’un jeu de commandes ListView. Elle doit être affichée dans la barre de commandes.Notice that we use a specific location value of ClientSideExtension.ListViewCommandSet.CommandBar to define that this is a ListView Command Set and it should be displayed in the command bar. Nous définissons également les RegistrationId to 100 et to RegistrationType pour qu’ils List associent automatiquement cette action personnalisée à des listes génériques.We also define the RegistrationId to 100 and the RegistrationType as List to associate this custom action automatically with generic lists. ClientSideComponentProperties peut être utilisé pour fournir des configurations spécifiques d’instance.ClientSideComponentProperties can be used to provide instance specific configurations. Dans ce cas, nous utilisons des propriétés par défaut appelées sampleTextOne et sampleTextTwo.In this case, we are using default properties called sampleTextOne and sampleTextTwo.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <CustomAction
        Title="SPFxListViewCommandSet"
        RegistrationId="100"
        RegistrationType="List"
        Location="ClientSideExtension.ListViewCommandSet.CommandBar"
        ClientSideComponentId="5fc73e12-8085-4a4b-8743-f6d02ffe1240"
        ClientSideComponentProperties="{&quot;sampleTextOne&quot;:&quot;One item is selected in the list.&quot;, &quot;sampleTextTwo&quot;:&quot;This command is always visible.&quot;}">
    </CustomAction>
</Elements>

Notes

Lors de l’exécution à partir de localhost, l’action personnalisée fonctionnera sur les listes et les bibliothèques de documents, mais n’aura pas été déployée sauf si la elements.xml est mise à jour.While running from localhost the custom action will work on both lists and document libraries, but will not once deployed unless the elements.xml is updated. RegistrationId=100 associe l’action personnalisée uniquement avec les listes et PAS avec les bibliothèques de documents.RegistrationId=100 will only associate the custom action with lists and NOT document libraries.

Pour associer l’action personnalisée à des bibliothèques de documents, le RegistrationId doit être défini sur 101 .In order to associate the custom action with document libraries, the RegistrationId must be set to 101. Si vous souhaitez que l’action fonctionne sur les listes et les bibliothèques de documents, une autre CustomAction doit être ajoutée au fichier elements.xmlIf you would like the action to work on both lists and document libraries, another CustomAction must be added to the elements.xml file

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <CustomAction
        Title="SPFxListViewCommandSet"
        RegistrationId="100"
        RegistrationType="List"
        Location="ClientSideExtension.ListViewCommandSet.CommandBar"
        ClientSideComponentId="5fc73e12-8085-4a4b-8743-f6d02ffe1240"
        ClientSideComponentProperties="{&quot;sampleTextOne&quot;:&quot;One item is selected in the list.&quot;, &quot;sampleTextTwo&quot;:&quot;This command is always visible.&quot;}">
    </CustomAction>
    <CustomAction
        Title="SPFxListViewCommandSet"
        RegistrationId="101"
        RegistrationType="List"
        Location="ClientSideExtension.ListViewCommandSet.CommandBar"
        ClientSideComponentId="5fc73e12-8085-4a4b-8743-f6d02ffe1240"
        ClientSideComponentProperties="{&quot;sampleTextOne&quot;:&quot;One item is selected in the list.&quot;, &quot;sampleTextTwo&quot;:&quot;This command is always visible.&quot;}">
    </CustomAction>
</Elements>

Valeurs d’emplacement possibles pouvant être utilisées avec un jeu de commandes ListView :Possible location values that can be used with a ListView Command Set:

  • ClientSideExtension.ListViewCommandSet.CommandBar: Barre d’outils de la liste ou de la bibliothèqueClientSideExtension.ListViewCommandSet.CommandBar: Toolbar of the list or library
  • ClientSideExtension.ListViewCommandSet.ContextMenu: Menu contextuel pour les éléments de liste ou de bibliothèqueClientSideExtension.ListViewCommandSet.ContextMenu: Context menu for list or library items
  • ClientSideExtension.ListViewCommandSet: Inscrire les commandes à la fois à la barre d’outils et au menu contextuelClientSideExtension.ListViewCommandSet: Register commands to both the toolbar and to the context menu

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 . dossier/config/package-solution.js.Open the file ./config/package-solution.json.

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.

Notes

Vous pouvez utiliser ClientSideInstance.xml de sorte à déployer automatiquement vos extensions dans tous les sites sur votre client.You can use ClientSideInstance.xml to automatically deploy your extensions cross all sites in your tenant. Pour obtenir plus d’informations sur cette option, consultez l’article relatif au déploiement à l’échelle du lient des extensions SharePoint Framework.More details around this option from Tenant Wide Deployment of SharePoint Framework Extensions article. Sachant que cette solution est configurée pour ne pas pour utiliser l’option d’étendue client, ce fichier xml est ignoré lorsque la solution est activée dans le catalogue d’applications.As this solution is intended configured not to use tenant-scope option, this xml file is ignored when solution is activated in the app catalog.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "command-extension-client-side-solution",
    "id": "0abe5c73-1655-49d3-922b-7a47dd70e151",
    "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": "25f8df47-61f2-4d75-bfe2-8d614f775219",
        "version": "1.0.0.0",
        "assets": {
          "elementManifests": [
            "elements.xml",
            "clientsideinstance.xml"
          ]
        }
      }
    ]
  },
  "paths": {
    "zippedPackage": "solution/command-extension.sppkg"
  }
}

Déployer l’extension sur SharePoint OnlineDeploy the extension to SharePoint Online

Vous êtes désormais prêt à déployer la solution sur un site SharePoint et à ce que CustomAction soit automatiquement associé au niveau du site.Now you are ready to deploy the solution to a SharePoint site and have the CustomAction automatically associated on the site level.

Étant donné que les solutions utiliseront par défaut la fonctionnalité d’empaquetage des ressources, vos fichiers JavaScript et autres ressources sont automatiquement inclus dans le package à l’intérieur du fichier sppkg, puis hébergés automatiquement à partir du CDN Office 365 ou de la collection de sites du catalogue d’applications.Since solutions will by default use the asset packaging capability, your JavaScript files and other assets will be automatically packaged inside of the sppkg file and then hosted automatically from Office 365 CDN or from the app catalog site collection.

  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 suivant : ./SharePoint/solution/Command-extension.sppkg :The command creates the following package: ./sharepoint/solution/command-extension.sppkg folder:

  3. Déployez le package généré dans le catalogue d’applications.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 dossier ./SharePoint/solution/Command-extension.sppkg dans le catalogue d’applications.Upload the ./sharepoint/solution/command-extension.sppkg folder to the app catalog. SharePoint affiche une boîte de dialogue et vous demande d’approuver la solution côté client.SharePoint displays a dialog and asks you to trust the client-side solution.

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

    Opération d’approbation dans le téléchargement du catalogue d’applications

  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 pour accéder à votre page applications.Select the gears icon on the top navigation bar on the right, and then select Add an app to go to your Apps page.

  8. Dans la zone Rechercher, entrez extension et appuyez sur Entrée pour filtrer vos applications.In the Search box, enter extension, and then select Enter to filter your apps.

    installation du jeu de commandes ListView sur un site

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

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

    Création d’une liste

  11. Indiquez le nom Exemple et sélectionnez Créer.Provide the name as Sample, and then select Create.

    Regardez comment les options Commande un et Commande deux apparaissent dans la barre d’outils en fonction des personnalisations de votre jeu de commandes ListView.Notice how Command One and Command Two are rendering in the toolbar based on your ListView Command Set customizations. L’extension est également affichée automatiquement pour toute liste existante, pas seulement pour les nouvelles listes.Notice that the extension is also rendered automatically for any existing lists, not only for new ones.

    Boutons supplémentaires visibles dans la barre d’outils

Voir aussiSee also