Utiliser React pour créer un complément du volet Office Excel

Cet article décrit le processus de création d’un complément de volet de tâches Excel à l’aide de React et de l’API JavaScript pour Excel.

Conditions préalables

• Node.js (la dernière version LTS active). Visitez le siteNode.js pour télécharger et installer la version adaptée à votre système d’exploitation.

• La dernière version deYeoman et du Générateur Yeoman Générateur de compléments Office. Pour installer ces outils globalement, exécutez la commande suivante via l’invite de commande.

  npm install -g yo generator-office
  

  Remarque

  Même si vous avez précédemment installé le générateur Yeoman, nous vous recommandons de mettre à jour votre package vers la dernière version de npm.

• Office connecté à un abonnement Microsoft 365 (y compris Office on the web).

  Remarque

  Si vous n’avez pas encore Office, vous pouvez peut-être bénéficier d’un abonnement développeur Microsoft 365 E5 via le programme Microsoft 365 pour les développeurs. Pour plus d’informations, consultez le FAQ. Vous pouvez également vous inscrire à un essai gratuit d’un mois ou acheter un plan Microsoft 365.

Création du projet de complément

Exécutez la commande suivante pour créer un projet de complément à l’aide du générateur Yeoman. Un dossier contenant le projet sera ajouté au répertoire actuel.

yo office

Lorsque vous y êtes invité, fournissez les informations suivantes pour créer votre projet de complément.

• Choisissez un type de projet :Office Add-in Task Pane project using React framework
• Choisissez un type de script :TypeScript
• Comment voulez-vous nommer votre complément ?My Office Add-in
• Quelle application cliente Office voulez-vous prendre en charge ?Excel

Après avoir exécuté l’assistant, le générateur crée le projet et installe les composants Node de prise en charge.

Explorer le projet

Le projet de complément que vous avez créé avec le générateur Yeoman contient un exemple de code pour un complément de volet Office de base. Pour explorer les composants clés de votre projet de complément, ouvrez le projet dans votre éditeur de code et passez en revue les fichiers répertoriés ci-dessous. Lorsque vous êtes prêt à tester votre complément, passez à la section suivante.

• Le fichier ./manifest.xml ou manifest.json dans le répertoire racine du projet définit les paramètres et les fonctionnalités du complément.
• Le fichier ./src/taskpane/taskpane.html définit l’infrastructure HTML du volet de tâches et les fichiers du dossier ./src/taskpane/components définissent les différentes parties de l’interface utilisateur du volet de tâches.
• Le fichier ./src/taskpane/taskpane.css contient le style CSS appliqué au contenu du volet de tâches.
• Le fichier ./src/taskpane/component/App.tsx contient le code d’API JavaScript pour Office qui facilite l’interaction entre le volet de tâches et Excel.

Essayez

1. Accédez au dossier racine du projet.

   cd "My Office Add-in"
   

2. Pour démarrer le serveur web local et charger indépendamment votre complément, procédez comme suit.

   Remarque

   • Les compléments Office doivent utiliser le protocole HTTPS, et non HTTP, même pendant le développement. Si vous êtes invité à installer un certificat après avoir exécuté l’une des commandes suivantes, acceptez l’invite pour installer le certificat fourni par le générateur Yeoman. Il se peut également que vous deviez exécuter votre invite de commande ou votre terminal en tant qu'administrateur pour que les modifications soient effectuées.

   • S’il s’agit de votre premier développement d’un complément Office sur votre ordinateur, vous pouvez être invité dans la ligne de commande à accorder à l’affichage web Microsoft Edge une exemption de bouclage (« Autoriser le bouclage localhost pour l’affichage web Microsoft Edge ? »). Lorsque vous y êtes invité, entrez Y pour autoriser l’exemption. Notez que vous aurez besoin de privilèges d’administrateur pour autoriser l’exemption. Une fois autorisé, vous ne devez pas être invité à demander une exemption lorsque vous chargerez une version test de compléments Office à l’avenir (sauf si vous supprimez l’exemption de votre ordinateur). Pour en savoir plus, voir « Impossible d’ouvrir ce complément à partir de localhost » lors du chargement d’un complément Office ou de l’utilisation de Fiddler.

     

   • Lorsque vous utilisez pour la première fois le générateur Yeoman pour développer un complément Office, votre navigateur par défaut ouvre une fenêtre dans laquelle vous êtes invité à vous connecter à votre compte Microsoft 365. Si aucune fenêtre de connexion n’apparaît et que vous rencontrez une erreur de chargement indépendant ou de délai d’expiration de la connexion, exécutez atk auth login m365.

   Conseil

   Si vous testez votre complément sur Mac, exécutez la commande suivante avant de continuer. Lorsque vous exécutez cette commande, le serveur web local démarre.

   npm run dev-server
   

   • Pour tester votre complément dans Excel, exécutez la commande suivante dans le répertoire racine de votre projet. Cela démarre le serveur web local et ouvre Excel avec votre complément chargé.

     npm start
     

   • Pour tester votre complément dans Excel sur le web, exécutez la commande suivante dans le répertoire racine de votre projet. Lorsque vous exécutez cette commande, le serveur web local démarre. Remplacez « {url} » par l’URL d’un document Excel sur votre OneDrive ou une bibliothèque SharePoint sur laquelle vous disposez d’autorisations.

     Remarque

     Si vous développez sur un Mac, placez les guillemets {url} simples. Ne faites pas cela sous Windows.

     npm run start -- web --document {url}
     

     Les éléments suivants sont des exemples.

     • npm run start -- web --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
     • npm run start -- web --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
     • npm run start -- web --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP

     Si votre complément n’effectue pas de chargement indépendant dans le document, chargez-le manuellement en suivant les instructions figurant dans Charger manuellement une version test des compléments vers Office sur le Web.

3. Dans Excel, cliquez sur l’onglet Accueil , puis sur le bouton Afficher le volet des tâches du ruban pour ouvrir le volet des tâches des compléments.

   

4. Sélectionnez une plage de cellules dans la feuille de calcul.

5. En bas du volet Office, cliquez sélectionnez le lien Exécuter pour définir la couleur de la plage sélectionnée sur jaune.

   

6. Lorsque vous souhaitez arrêter le serveur web local et désinstaller le complément, suivez les instructions applicables :

   • Pour arrêter le serveur, exécutez la commande suivante. Si vous avez utilisé npm start, la commande suivante désinstalle également le complément.

     npm stop
     

   • Si vous avez chargé manuellement un complément indépendant, consultez Supprimer un complément chargé d’une version indépendante.

Étapes suivantes

Félicitations, vous avez créé un complément de volet de tâches Excel à l’aide de React ! Ensuite, découvrez les fonctionnalités d’un complément Excel et créez-en un plus complexe en suivant le didacticiel sur les compléments Excel.

Résolution des problèmes

• Assurez-vous que votre environnement est prêt pour le développement Office en suivant les instructions de la rubrique Configurer votre environnement de développement.

• L’étape automatique npm install que Yo Office effectue peut échouer. Si vous voyez des erreurs lors de la tentative d’exécution npm start, accédez au dossier de projet nouvellement créé dans une invite de commande et exécutez npm installmanuellement . Pour plus d’informations sur Yo Office, voir Créer des projets de complément Office à l’aide du générateur Yeoman.

• Vous pouvez voir des avertissements générés lors de l’exécution npm install pour le générateur Yeoman ou le projet. Dans la plupart des cas, vous pouvez ignorer ces avertissements en toute sécurité. Les avertissements de sécurité ou d’audit nécessitent une évaluation distincte ; Résolvez les vulnérabilités dans les dépendances d’exécution, ou les dépendances dont vous ne pouvez pas déterminer l’origine, avant le déploiement en production. Parfois, les dépendances deviennent obsolètes et leurs remplacements ne sont pas pris en charge par les autres packages dont dépend le projet. Pour passer en revue les mises à jour de dépendance disponibles, utilisez l’outil npm-check-updates .

  • Dans l’invite de commande, dans le répertoire du projet racine, exécutez npm i -g npm-check-updates. Cela installe l’outil globalement.
  • Exécuter ncu pour signaler les mises à jour disponibles sans modifier package.json.
  • Vérifiez la compatibilité des versions proposées et mettez à jour uniquement les plages de dépendances appropriées dans package.json, puis exécutez .npm install Notez que ncu -u réécrit les plages de dépendances et peut inclure la rupture des mises à niveau des versions majeures.

  Pour plus d’informations sur les avertissements lors de l’exécution de , consultez Avertissements et dépendances dans le monde Node.js et npm.npm install

• Si vous ne voyez pas le bouton Complément sur le ruban (par exemple, Afficher le volet Office), sélectionnez le bouton Compléments dans l’onglet du ruban Accueil , puis choisissez le complément de test.

Voir aussi

• Didacticiel sur les compléments Excel
• Concepts principaux du modèle objet Excel pour les compléments Office
• Exemples de code pour les compléments Excel
• Référence de l’API JavaScript pour Excel
• Utilisation de Visual Studio Code pour publier