Création d’onglets Microsoft Teams à l’aide de SharePoint Framework

À partir SharePoint Framework v1.8, vous pouvez créer des onglets pour Microsoft Teams avec les outils SharePoint Framework et utiliser SharePoint comme hôte pour vos solutions. Dans le cadre de la SharePoint Framework v1.10, vous pouvez également publier votre solution en tant Microsoft Teams application personnelle.

Les avantages de l’utilisation du SharePoint Framework en tant que plateforme pour vos onglets Microsoft Teams sont les suivants :

  • Le modèle de développement est similaire aux composants Web SharePoint Framework web
  • N’importe quel élément Web Part peut être exposé sous la mesure d’un onglet ou d’une application personnelle dans Microsoft Teams
  • Les différentes options d’application pour exposer un onglet personnalisé en tant que partie Web et onglet dans votre client
  • L’onglet sera exécuté dans le cadre d’un site SharePoint sous-jacent en arrière-plan de l’équipe spécifique. Cela signifie que vous pouvez tirer parti de fonctionnalités ou d’API SharePoint spécifiques dans votre composant WebPart.

Processus de développement

Vous pouvez commencer à développer Microsoft Teams onglets à l’aide des packages SharePoint Framework 1.8 ou ultérieur. Les étapes de haut niveau pour commencer sont les suivantes :

Notes

Reportez-vous aux étapes détaillées pour commencer à partir de l’onglet Création Microsoft Teams à l’aide de SharePoint Framework - Didacticiel qui contient des détails importants supplémentaires que vous devez suivre.

  1. Créer une solution SharePoint Framework avec un partie Web Part côté client

  2. Ajoutez "TeamsTab" à la propriété du manifeste du partie Web Part pour supportedHosts l’utiliser en tant qu’onglet dans un canal :

    "supportedHosts": ["SharePointWebPart", "TeamsTab"],
    
  3. Ajoutez "TeamsPersonalApp" à la propriété du manifeste du partie Web Part pour supportedHosts l’utiliser en tant qu’application personnelle :

    "supportedHosts": ["SharePointWebPart", "TeamsPersonalApp"],
    
  4. Déployer le site Web Part à l’aide de l’option de déploiement dans l’étendue client dans SharePoint catalogue d’applications

  5. Activez la solution SharePoint Framework, que vous avez déployée, puis sélectionnez Synchroniser Teams dans le catalogue d’applications

Options de déploiement

Il existe plusieurs options pour déployer Microsoft Teams onglet ou en tant qu’application personnelle. Sachant que SharePoint et Microsoft Teams ont leur propre catalogue d’applications, le déploiement implique des opérations sur les deux services. La visibilité de la nouvelle fonctionnalité peut être contrôlée par les étapes de déploiement prises.

Déploiement de client

Vous pouvez utiliser le bouton Synchroniser avec Teams dans le ruban du catalogue d’applications qui créera automatiquement le manifeste de l’application Microsoft Teams, le package d’application et l’installera dans le Microsoft Teams store. Ainsi, votre solution sera disponible pour tous les utilisateurs de votre client et Microsoft Teams équipes.

Les développeurs peuvent également définir le contenu du manifeste Microsoft Teams’application et du package d’application. Reportez-vous aux options de déploiement pour SharePoint Framework solutions de Microsoft Teams pour les options de déploiement.

Options de déploiement alternatives

Il existe une autre façon de déployer votre solution, qui vous permettra par exemple de rendre une solution disponible uniquement pour une équipe spécifique dans votre client.

  1. Créez votre solution SharePoint Framework de manière normale :

    gulp bundle --ship
    gulp package-solution --ship
    
  2. Recherchez le dossier ./teams dans le dossier de votre projet :

    Structure de la solution

  3. Ajoutez le package Microsoft Teams d’application, comme décrit dans les options de déploiement SharePoint Framework solutions pour Microsoft Teams dans le dossier ./teams.

  4. Ajoutez votre solution au catalogue d’applications et veillez à sélectionner l’option Rendre cette solution disponible pour tous les sites de l’organisation avant de sélectionner Déployer.

Chargement de version latérale des applications externes dans Teams

  1. Déplacez-vous vers votre instance Microsoft Teams en sélectionnant Teams dans le lanceur d’applications :

    Fichier .zip dans l’Explorateur

  2. Choisissez une équipe que vous souhaitez utiliser pour tester la fonctionnalité et sélectionnez Gérer l’équipe dans le ... menu :

    Gérer une équipe

  3. Passer à l’onglet Applications.

  4. Choisissez Télécharger une application personnalisée dans le coin inférieur droit.

    Notes

    Si ce paramètre n’est pas disponible, le chargement indépendant n’est pas activé dans le client que vous utilisez. Vérifiez les paramètres dans les interfaces utilisateur d’administration du client.

  5. Télécharger fichier manifeste d’application Microsoft Teams créé précédemment à partir du dossier ./teams sous votre nouvelle solution et assurez-vous qu’il est correctement visible dans la liste des applications. Notez que l’image personnalisée est visible avec la description de la solution :

    Télécharger application

  6. Passer à un canal dans l’équipe où vous avez téléchargé la solution. Dans l’image suivante, notez que nous avons activé le canal général dans Team

    Canal activé

  7. Cliquez sur + pour ajouter un nouvel onglet dans le canal.

  8. Sélectionnez votre onglet personnalisé nommé MyFirstTeamTab dans la liste :

    Ajouter un onglet

  9. Notez comment vous pouvez personnaliser l’instance d’onglet à l’aide des propriétés exposées sur le site Web Part. Sélectionnez Enregistrer:

    Configurer l’onglet

Localisation du composant WebPart dans le contexte Teams

Le contexte de page dans un élément Web Part contient une référence au SDK JavaScript Teams afin que vous pouvez facilement accéder au contexte Teams lorsque votre partie Web Est restituer sous forme d’onglet.

this.context.sdks.microsoftTeams

Notes

Pour plus d’informations sur le contexte Microsoft Teams’onglet, voir Microsoft Teams documentation de développement.

Important

La propriété a été dépréciée dans la this.context.microsoftTeams version SharePoint Framework version 1.10.

Vous devez this.context.sdks.microsoftTeams l’utiliser pour toutes les solutions créées avec la SharePoint Framework v1.10 et les ultérieures.

Voir aussi