Didacticiel pour créer une extension Outlook Web Access à l’aide de SharePoint Framework
À partir de la version SharePoint Framework 1.10, vous pouvez implémenter vos compléments Office à l’aide de SharePoint Framework. Cela simplifie considérablement le processus de développement de compléments, car les composants WebPart SharePoint Framework sont automatiquement hébergés dans SharePoint sans passer par des services externes. Pendant la période d’aperçu, ce modèle est uniquement pris en charge pour Outlook Web Access, mais il est étendu sur tous les clients Office Web et de bureau.
- Créer votre premier composant WebPart
- Connecter votre composant WebPart à SharePoint
- Déployer votre composant WebPart côté client sur une page SharePoint
Important
Cet exercice pratique nécessite que vous utilisiez au moins la version 1,10 de SharePoint Framework, car ces fonctionnalités ne sont pas disponibles dans les versions antérieures.
Notes
Cette fonctionnalité est actuellement partagée comme expérimentale. Cela signifie que l’étendue et la prise en charge de cette fonctionnalité sont limitées & ne sont pas recommandées pour les environnements de production. En outre, il n’y a pas de calendrier ni d’engagement sur l’avenir de cette fonctionnalité.
Notes
Pour utiliser les fonctionnalités de la version préliminaire pour développeurs, assurez-vous d’utiliser la --plusbetaversion de la bibliothèque (consultez Essayer les fonctionnalités de prévisualisation de SharePoint Frameworkpour plus d’informations).
Créer une solution
Créez un nouveau répertoire de projet à l’emplacement de votre choix :
md outlook-add-inAccédez au répertoire du projet :
cd outlook-add-inCréer une solution de composant WebPart côté client en exécutant le générateur SharePoint Yeoman :
yo @microsoft/sharepoint --plusbetaLe Yeoman Microsoft Office SharePoint Online Generator vous posera une série de questions. Pour toutes les questions, acceptez les options par défaut à l'exception des questions suivantes :
- Choisissez WebPart comme type de composant côté client à créer.
- Saisissez MonPremierComplémentOW comme nom de composant WebPart, puis sélectionnez Entrée.
- Saisissez Mon premier complément Outlook comme description du composant WebPart, puis sélectionnez Entrée.
- Acceptez l’option par défaut Aucune infrastructure web JavaScript pour l’infrastructure, puis sélectionnez Entrée pour continuer.
À ce stade, Yeoman installe les dépendances requises et crée la structure des fichiers de la solution. La création de la solution peut prendre quelques minutes. Yeoman échafaud le projet pour inclure votre composant WebPart MonPremierComplémentOW, lequel fera office de complément dans Outlook Web App.
Ensuite, saisissez les informations suivantes pour ouvrir le projet de composant WebPart dans Visual Studio Code :
code .
Depuis SharePoint Framework v 1.10, l’échafaudage inclut également d’autres ./officeAddin dossier dans la structure de la solution, avec un fichier manifeste par défaut pour votre solution à publier en tant que complément Outlook Web App.

officeAddin dossier contient le fichier suivant :
- [componentId] _outlookManifest. xml-définition de manifeste par défaut pour votre solution
Le fichier manifeste contient par défaut la définition pour exposer votre complément sous la forme d’un complément de volet d’outils Outlook Web App avec des valeurs par défaut. Vous pouvez modifier la structure en fonction des besoins de votre entreprise.
Installer des types Office dans votre solution
Dans la console, entrez les informations suivantes pour installer les types du kit de développement logiciel (SDK) Office JavaScript à partir de NPM :
npm install @types/office-js --save-dev
Ceci ajoute les renseignements nécessaires pour les types de SDK Office JavaScript lorsque vous développez votre solution dans la machine à écrire.
Sensibiliser la solution au contexte Office
Ouvrez src\webparts\myFirstOwAaddin\MyFirstOwAaddinWebPart.ts.
Mettez à jour la méthode render() comme suit.
Notez que la restitution du contenu diffère selon que le code est rendu sous la forme d’un complément Outlook Web App ou d’un composant WebPart dans SharePoint. Nous pouvons détecter si une solution est hébergée dans Outlook Web App en vérifiant la propriété
this.context.sdks.office.public render(): void { let title: string = ''; let subTitle: string = ''; let contextDetail: string = ''; if (this.context.sdks.office) { // We have Office context for the solution title = "Welcome to Office!"; subTitle = "Extending Office with custom business extensions."; contextDetail = "We are in the context of following email: " + this.context.sdks.office.context.mailbox.userProfile.emailAddress; } else { // We are rendered in normal SharePoint context title = "Welcome to SharePoint!"; subTitle = "Customize SharePoint experiences using Web Parts."; contextDetail = "We are in the context of following site: " + this.context.pageContext.web.title; } this.domElement.innerHTML = ` <div class="${ styles.myFirstOwAaddin }"> <div class="${ styles.container }"> <div class="${ styles.row }"> <div class="${ styles.column }"> <span class="${ styles.title }">${title}</span> <p class="${ styles.subTitle }">${subTitle}</p> <p class="${ styles.description }">${contextDetail}</p> <p class="${ styles.description }">${escape(this.properties.description)}</p> <a href="https://aka.ms/spfx" class="${ styles.button }"> <span class="${ styles.label }">Learn more</span> </a> </div> </div> </div> </div>`; }Notes
Pour plus d’informations sur les fonctionnalités de l’API JavaScript Office, voir la documentation de référence de l’API.
Empaqueter et déployer votre solution sur SharePoint
Vérifiez que la console est activée dans le dossier racine de la solution que vous venez de créer.
Exécutez ces commandes pour créer votre package de solutions. Cette opération exécute une version de votre projet à l’aide d’une étiquette dynamique comme l’URL hôte pour vos ressources.
gulp bundle --shipExécutez la tâche suivante pour créer un package pour votre solution. Cette opération crée un package toutlook-add-in.sppkg mis à jour dans le dossier sharepoint/solution.
gulp package-solution --ship
Vous devez ensuite déployer le package qui a été généré dans le catalogue d’applications du client.
Notes
Si vous n’avez pas de catalogue d’applications, un administrateur SharePoint Online peut en créer un en suivant les instructions de ce guide : Utilisation du catalogue d’applications pour rendre des applications métier disponibles pour votre environnement SharePoint Online.
Accédez au catalogue de l’application SharePoint de votre client.
Chargez ou faites glisser le fichier outlook-add-in.sppkg dans le catalogue d’applications.

Cette action déploie le package de solutions côté client. Dans la mesure où il s’agit d’une solution côté client entièrement fiable, SharePoint affiche une boîte de dialogue et vous demande d’approuver la solution côté client à déployer.
La liste des domaines dans l’invite indique SharePoint Online. Cela est dû au fait que le contenu est mis en service à partir du CDN Office 365 ou du catalogue d’applications, selon les paramètres du client.
Vérifiez que l’option Rendre cette solution disponible sur tous les sites de l’organisation est sélectionnée afin que le composant puisse être utilisé du côté Outlook Web Access.

Sélectionnez Déployer.
Vous pouvez voir si le package contient des problèmes ou des exceptions à l’aide de la colonne Message d’erreur du package d’application dans le catalogue d’applications.
Le composant WebPart est désormais déployé et sera automatiquement disponible dans les sites SharePoint Online.
Notes
Dans ce cas didacticiel, nous utilisons l’option de déploiement à l’échelle du client de la solution SharePoint Framework. Cette option garantit que l’expérience de développement et l’utilisation sont aussi simples que possible. Vous pouvez également déployer la solution dans l’étendue de site, mais dans ce cas, vous devez vous assurer que la solution est déployée sur le site SharePoint en arrière-plan de Microsoft Teams pour pouvoir l’utiliser.
Installer la solution dans Outlook Web Access
La procédure suivante consiste à activer le complément Outlook Web Access.
Activer l’un des courriers existants dans votre boîte de réception
Sélectionnez [...] puis sélectionnez Obtenir des compléments

Sélectionnez Mes compléments dans le menu de gauche.

Sélectionnez *Ajouter à partir d’un fichier... sous le Compléments personnalisés

Téléchargez le fichier XML manifest à partir de votre solution Project sous le dossier officeAddin
Cliquez sur installer sur le message d’avertissement pour que votre complément soit disponible sur le client.

Fermez la fenêtre du complément en cliquant sur X dans le coin supérieur droit
Activez de nouveau le menu contextuel de [...] _ puis sélectionnez_ modèle SPFx pour activer le complément dans votre boîte de réception
- Le nom peut être ajusté dans le fichier manifeste au besoin
Important
Le processus de déploiement inclut différentes étapes lorsque d’autres applications et de la version de bureau seront prises en charge.