Étendre Outlook et Office avec le SharePoint Framework

  • Article

La version SharePoint Framework (SPFx) v1.16 a ajouté la prise en charge du Kit de développement logiciel (SDK) du client JavaScript Microsoft Teams v2. Le Kit de développement logiciel (SDK) client JavaScript Microsoft Teams v2 a introduit la possibilité de permettre aux applications Teams de s’exécuter dans Outlook sur Office, en plus de Microsoft Teams.

Avec cette amélioration de SPFx v1.16, les développeurs peuvent désormais utiliser spFx pour créer des applications pour Outlook et Office à l’aide de la prise en charge existante de la création d’applications pour Microsoft Teams.

Importante

La possibilité d’exécuter des applications Microsoft Teams dans Outlook et Office est actuellement en version bêta avec une disponibilité prévue au cours du premier semestre de l’année civile 2023.

Importante

Informations essentielles requises pour la réussite de l’utilisateur

Pour tester l’utilisation des applications Microsoft Teams dans Outlook et Office, y compris celles créées avec spFx, vous devez configurer les préférences de publication de votre client Microsoft 365 pour la version ciblée. Pour plus d’informations sur la modification des préférences de publication de votre organisation, consultez Configurer les options de publication standard ou ciblée.

L’application des préférences de publication de votre locataire prend 5 jours ouvrables. En d’autres termes, remplacez votre locataire de la piste de publication standard par la piste de publication cible le 5 du mois. Vous ne pourrez pas tester vos applications Microsoft Teams créées avec SPFx dans Outlook ou Office avant le 11 du mois.

Créer des applications Microsoft Teams pour Outlook et Office

Pour créer une application Microsoft Teams avec SPFx pour Outlook et Office, commencez par créer un projet SPFx à l’aide du générateur Yeoman pour SharePoint v1.16 ou version ultérieure de la même façon que vous créeriez un composant WebPart. Pour plus d’informations, voir Créer votre premier composant WebPart côté client SharePoint.

Le Yeoman Microsoft Office SharePoint Online Generator vous posera une série de questions. Suivez les mêmes instructions pour créer un composant WebPart SPFx lorsque vous répondez à ces questions.

Une fois le projet créé, mettez à jour la propriété du supportedHosts composant WebPart pour indiquer où il peut être utilisé. Par exemple, ajoutez TeamsTab et/ou TeamsPersonalApp à la propriété te supportedHosts dans le fichier ./config/package-solution.json . Pour plus d’informations, consultez Génération d’onglets Microsoft Teams à l’aide de SharePoint Framework.

Déterminer l’hôte d’exécution actuel pour votre application

Votre application peut avoir besoin de déterminer où elle s’exécute actuellement pour diverses raisons. Par exemple, les utilisateurs doivent-ils voir une expérience s’il s’exécute dans SharePoint, Microsoft Teams, Outlook ou un autre client Office ?

Utilisez la propriété spFx context sur la classe du composant WebPart et le client JavaScript Microsoft Teams pour déterminer le client d’hébergement. La app.host.name propriété sur le client JavaScript Teams contient le nom de l’hôte s’il s’agit de Microsoft Teams, Outlook ou Office. Si l’objet de contexte Microsoft Teams est undefined, le composant WebPart s’exécute dans SharePoint.

// if running in Microsoft Teams, Outlook, or Office...
if (!!this.context.sdks.microsoftTeams) {
  const teamsContext = await this.context.sdks.microsoftTeams.teamsJs.app.getContext();
  switch (teamsContext.app.host.name.toLowerCase()) {
    case 'teams': // this is the host name for the "classic" Teams client
    case 'teamsmodern': // this is the host name for the "new" Teams client
      // RUNNING IN MICROSOFT TEAMS
    case 'office':
      // RUNNING IN OFFICE / OFFICE.COM
    case 'outlook':
      // RUNNING IN OUTLOOK
    default:
      throw new Error('Unknown host');
  }
} else {
  // RUNNING IN SHAREPOINT
}

Créer le package de manifeste & d’application Microsoft Teams

Bien que le bouton Synchroniser avec Teams du catalogue d’applications SharePoint Online puisse créer automatiquement le manifeste d’application Microsoft Teams et le package d’application et l’installer dans le magasin Microsoft Teams, cela ne prend actuellement pas en charge le format de fichier manifeste d’application Microsoft Teams requis. Le fichier manifeste de l’application Teams doit être v1.13 ou version ultérieure

L’autre option consiste à créer manuellement le manifeste d’application et le package d’application vous-même et à les inclure dans le package SharePoint chargé dans le catalogue d’applications. Lorsque vous sélectionnez le bouton Synchroniser avec Teams dans le catalogue d’applications, SharePoint Online utilise le package d’application Teams que vous avez créé et inclus dans le package SharePoint.

Remarque

Pour plus d’informations sur la création manuelle de manifestes et de packages d’application Microsoft Teams, consultez Options de déploiement pour SharePoint Framework solutions pour Microsoft Teams

Créer le manifeste de l’application Microsoft Teams

La première étape consiste à créer le manifeste de l’application Microsoft Teams.

  1. Créez le fichier suivant dans votre projet SPFx : ./teams/manifest.json.
  2. Suivez les instructions fournies dans Microsoft Teams : Schéma de manifeste d’application pour Teams et SharePoint Framework : Options de déploiement pour SharePoint Framework solutions pour Microsoft Teams afin de créer un fichier manifeste d’application.
  3. Notez particulièrement les propriétés suivantes dans le fichier manifest.json :

    • manifestVersion: cette valeur doit être définie sur 1.13 ou une version ultérieure

    • staticTabs et/ou configurableTabs: Vérifiez que cela suit les instructions relatives à l’utilisation d’un composant WebPart SPFx en tant qu’onglet Microsoft Teams.

      Par exemple, la contentUrl propriété et toute autre propriété qui fait référence à des composants SPFx doivent utiliser les jetons dynamiques {teamSiteDomain}, {teamSitePath}, &{locale}. Il doit également référencer l’ID de composant de SPFx.

      Conseil

      Pour plus d’informations sur ces propriétés, voir SharePoint Framework : Options de déploiement pour SharePoint Framework solutions pour Microsoft Teams, en particulier la section sur Référence dynamique des URL de site SharePoint sous-jacentes.

Remarque

Pour en savoir plus sur le fichier manifeste de l’application Microsoft Teams, consultez Microsoft Teams : Schéma de manifeste d’application pour Teams.

Créer le package d’application Microsoft Teams

Une fois que vous avez créé le manifeste de l’application Microsoft Teams, vous devez créer manuellement le package d’application. Il sera inclus dans votre fichier de package SharePoint (*.sppkg) que vous allez charger dans le catalogue d’applications de votre client SharePoint.

  1. Compressez le contenu du dossier ./teams dans votre projet.
  2. Renommez le package ZIP enTeamsSPFxApp.zip.

Importante

Le package d’application Microsoft Teams doit être nommé TeamsSPFxApp.zip et enregistré dans le dossier ./teams pour que cette option fonctionne avec le bouton Synchroniser avec Teams dans le catalogue d’applications du client.

Déployer l’application Microsoft Teams basée sur SPFx

Une fois que vous avez créé le package d’application, l’étape suivante consiste à le déployer et à l’installer.

Déployez l’application dans le catalogue d’applications de votre locataire.

Ensuite, sélectionnez l’application, sélectionnez l’onglet Fichiers dans le ruban, puis sélectionnez le bouton Synchroniser avec Teams pour déployer le package d’application dans le magasin Microsoft Teams de votre client.

Remarque

Pour plus d’informations sur l’empaquetage & du déploiement de packages SharePoint dans le App Store Microsoft Teams, voir SharePoint Framework : Options de déploiement pour SharePoint Framework solutions pour Microsoft Teams.

Maintenant que vous avez déployé l’application sur SharePoint, vous pouvez l’ajouter en tant que composant WebPart à une page de vos sites SharePoint :

Tableau de bord de l’Assistant Responsable Microsoft Teams dans SharePoint

L’application peut également être installée dans Microsoft Teams. Une fois que vous êtes connecté, sélectionnez l’option Applications dans la navigation verticale gauche.

Notez que vos applications sont répertoriées sous la section Générer pour votre organisation :

Tableau de bord de l’Assistant Responsable Microsoft Teams - Teams Ajouter des options d’application

Une fois que vous avez installé l’application, elle apparaît dans la navigation verticale gauche sous la forme d’une application épinglée :

Tableau de bord de l’Assistant Responsable Microsoft Teams - Teams Ajouter une application installée

Exemple d’application Microsoft Teams - Tableau de bord Lead Assist

Vous pouvez suivre le même processus pour installer l’application dans Outlook que dans Microsoft Teams.

Conseil

Pour plus d’informations, consultez l’exemple React Tableau de bord des prospects Teams pour obtenir un exemple de travail qui utilise SPFx pour créer une application Microsoft Teams pour Outlook et Office.