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.

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

  1. Créez un nouveau répertoire de projet à l’emplacement de votre choix :

     md outlook-add-in
    
  2. Accédez au répertoire du projet :

    cd outlook-add-in
    
  3. Créer une solution de composant WebPart côté client en exécutant le générateur SharePoint Yeoman :

    yo @microsoft/sharepoint --plusbeta
    

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

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

Structure de la solution

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

  1. Ouvrez src\webparts\myFirstOwAaddin\MyFirstOwAaddinWebPart.ts.

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

  1. 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 --ship
    
  2. Exé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.

  1. Accédez au catalogue de l’application SharePoint de votre client.

  2. Chargez ou faites glisser le fichier outlook-add-in.sppkg dans le catalogue d’applications.

    Charger la solution 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.

    Approuver la solution côté client à déployer

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

  1. Activer l’un des courriers existants dans votre boîte de réception

  2. Sélectionnez [...] puis sélectionnez Obtenir des compléments

    Menu contextuel obtenir des compléments

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

    Menu de mes compléments gauche

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

    Ajouter à partir d'un fichier

  5. Téléchargez le fichier XML manifest à partir de votre solution Project sous le dossier officeAddin

  6. Cliquez sur installer sur le message d’avertissement pour que votre complément soit disponible sur le client.

    AVERTISSEMENT-installation

  7. Fermez la fenêtre du complément en cliquant sur X dans le coin supérieur droit

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

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