Exercice : déployer les solutions de SharePoint Framework vers Microsoft Teams
- 13 minutes
Dans cet exercice, vous allez créer une solution de composant WebPart SharePoint Framework qui fonctionne à la fois dans SharePoint Online et sous forme d’onglet dans Microsoft Teams.
Configuration requise
Importante
Dans la plupart des cas, installer la dernière version des outils suivants est la meilleure option. Les versions répertoriées ici ont été utilisées lors de la publication et du dernier test de ce module.
- Node.js v18.*
- Heft v1.*
- Yeoman v5.*
- Yeoman Generator pour SharePoint v1.23.0
- Visual Studio Code
Créer un projet SharePoint Framework
Ouvrez une invite de commandes et accédez au dossier dans lequel vous voulez créer le projet.
Exécutez ensuite le générateur Yeoman SharePoint à l’aide de la commande suivante :
yo @microsoft/sharepoint
Utilisez les éléments suivants pour répondre à l'invite qui s'affiche (si d'autres options sont proposées, acceptez la réponse par défaut) :
- Quel est le nom de votre solution ? : spfxteams
- Quel type de composant côté client voulez-vous créer ? : WebPart
- Quel est le nom de votre composant WebPart ? : SPFx Teams Together
- Quel modèle souhaitez-vous utiliser ? Aucune infrastructure
Une fois que vous avez configuré les dossiers nécessaires au projet, le générateur installe tous les packages de dépendances en exécutant automatiquement npm install. Lorsque npm a terminé le téléchargement de toutes les dépendances, ouvrez le projet dans Visual Studio Code.
Autoriser l’utilisation du composant WebPart dans Microsoft Teams
Recherchez et ouvrez le fichier ./src/webparts/spFxTeamsTogether/SpFxTeamsTogetherWebPart.manifest.json :
Dans le fichier manifeste du composant WebPart, recherchez la propriété supportedHosts. Vérifiez que la valeur de la propriété inclut SharePointWebPart et TeamsTab. Ce n’est pas grave si la valeur de la propriété inclut TeamsPersonalApp également et/ou SharePointFullPage :
"supportedHosts": ["SharePointWebPart", "TeamsTab"],
Créer et déployer le package d’application Microsoft Teams
Notez que le projet contient un dossier teams où sont stockées deux images. Dans Microsoft Teams, ces images sont utilisées pour afficher l’onglet personnalisé.
Remarque
Vous remarquerez peut-être qu’aucun fichier manifest.json n’est présent. SharePoint peut générer automatiquement le fichier manifeste à partir du site Catalogue d’applications ou vous pouvez le créer manuellement. Pour plus d’informations sur la création manuelle du fichier manifeste, consultez la documentation : Options de déploiement des solutions SharePoint Framework pour Microsoft Teams.
Dans cet exercice, vous allez créer manuellement le fichier manifeste Microsoft Teams afin de vous familiariser avec son contenu.
Créer manuellement le manifeste Microsoft Teams
Recherchez le dossier ./teams dans le projet.
Créez un fichier manifest.json dans le dossier teams et ajoutez-y le code suivant :
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.19/MicrosoftTeams.schema.json",
"manifestVersion": "1.19",
"id": "{{SPFX_COMPONENT_ID}}",
"version": "1.0.0",
"developer": {
"name": "Parker Porcupine",
"websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
"privacyUrl": "https://privacy.microsoft.com/en-us/privacystatement",
"termsOfUseUrl": "https://www.microsoft.com/en-us/servicesagreement"
},
"name": {
"short": "{{SPFX_COMPONENT_NAME}}"
},
"description": {
"short": "{{SPFX_COMPONENT_SHORT_DESCRIPTION}}",
"full": "{{SPFX_COMPONENT_LONG_DESCRIPTION}}"
},
"icons": {
"outline": "{{SPFX_COMPONENT_ID}}_outline.png",
"color": "{{SPFX_COMPONENT_ID}}_color.png"
},
"accentColor": "#004578",
"configurableTabs": [
{
"configurationUrl": "https://{teamSiteDomain}{teamSitePath}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId={{SPFX_COMPONENT_ID}}%26forceLocale={locale}",
"canUpdateConfiguration": true,
"scopes": [
"team"
]
}
],
"validDomains": [
"*.login.microsoftonline.com",
"*.sharepoint.com",
"spoprod-a.akamaihd.net",
"resourceseng.blob.core.windows.net"
],
"webApplicationInfo": {
"resource": "https://{teamSiteDomain}",
"id": "00000003-0000-0ff1-ce00-000000000000"
}
}
Ce fichier contient plusieurs chaînes qui doivent être mises à jour pour correspondre au composant SharePoint Framework. Utilisez le tableau suivant pour déterminer les valeurs à remplacer. Les propriétés du composant SharePoint Framework se trouvent dans le fichier manifeste du composant WebPart : ./src/webparts/spFxTeamsTogether/SpFxTeamsTogetherWebPart.manifest.json
| Chaîne manifest.json | Propriété dans le manifeste du composant SharePoint Framework |
|---|---|
{{SPFX_COMPONENT_NAME}} |
preconfiguredEntries[0].title.default |
{{SPFX_COMPONENT_SHORT_DESCRIPTION}} |
preconfiguredEntries[0].description.default |
{{SPFX_COMPONENT_LONG_DESCRIPTION}} |
preconfiguredEntries[0].description.default |
{{SPFX_COMPONENT_ID}} |
id |
Importante
N’oubliez pas de remplacer {{SPFX_COMPONENT_ID}} dans configurableTabs[0].configurationUrl. Vous serez peut-être amené à faire défiler votre éditeur vers la droite pour l’afficher.
Importante
Les jetons entourés d’accolades simples (par exemple, {teamSiteDomain}) n’ont pas besoin d’être remplacés.
Créer manuellement le package d’application Microsoft Teams
Recherchez le dossier ./teams dans le projet.
Créez une archive ZIP contenant les trois fichiers du dossier : les deux images et manifest.json.
Importante
Compressez le contenu du dossier, et non le dossier lui-même.
Nommez l’archive ZIP TeamsSPFxApp.zip et enregistrez-la dans le dossierTeams. Le dossier teams doit maintenant contenir quatre fichiers.
Créer et déployer le package SharePoint
Pour tester le composant WebPart dans SharePoint et Microsoft Teams, celui-ci doit d’abord être déployé dans un catalogue d’applications.
Générez et regroupez le projet pour la production en ouvrant une invite de commandes, en remplaçant par le dossier racine du projet, puis en exécutant la commande suivante. La tâche de génération de Heft transpile et regroupe le projet en une seule étape ; le commutateur --production minifie le bundle et met à jour les manifestes pour le déploiement :
heft build --production
Ensuite, créez un package de déploiement du projet en exécutant la commande suivante sur la ligne de commande à partir de la racine du projet :
heft package-solution --production
Faites glisser le package créé aux étapes précédentes, situé dans le du projet ./sharepoint/solution/spfxteams.sppkg, dans la bibliothèque Applications pour SharePoint .
Dans le panneau Activer l’application , vérifiez que la case d’option Activer cette application et l’ajouter à tous les sites est sélectionnée, puis sélectionnez Activer l’application. Cela rend le composant WebPart disponible pour toutes les collections de sites dans le locataire, y compris celles qui se trouvent derrière une équipe Microsoft Teams.
Dans le volet Cette application a été activée , sélectionnez Fermer.
La dernière étape consiste à publier l’application Microsoft Teams sur le Microsoft Teams Store de votre locataire. Sélectionnez le package SharePoint que vous avez chargé. Ensuite, sélectionnez le bouton Ajouter à Teams dans la barre de commandes.
Tester le composant WebPart SharePoint Framework dans SharePoint
Dans le navigateur, accédez à une page SharePoint moderne.
Sélectionnez le bouton Modifier en haut à droite de la page.
Dans le navigateur, sélectionnez le bouton de l’icône de composant WebPart pour ouvrir la liste des composants WebPart disponibles :
Recherchez le composant WebPart SPFx Teams Together et sélectionnez-le
Le composant WebPart SharePoint Framework apparaît sur la page, comme illustré dans la figure suivante :
Tester le composant WebPart SharePoint Framework dans Microsoft Teams
Commencez par créer une nouvelle équipe Microsoft Teams.
À l’aide du même navigateur avec lequel vous êtes connecté à SharePoint Online, accédez à https://teams.microsoft.com. Lorsque vous y êtes invité, chargez le client web.
Sélectionnez l’icône + en haut de la liste des équipes dans la partie gauche du client Teams, puis sélectionnez Créer une équipe :
Dans la boîte de dialogue Créer une équipe , définissez le nom de l’équipe Ma première équipe , puis sélectionnez Créer.
Dans la boîte de dialogue ajouter des membres à ma première équipe , sélectionnez ignorer.
Installer l’application Microsoft Teams en tant que nouvel onglet
Sélectionnez l'équipe Ma première équipe créée précédemment.
Sélectionnez le canal Général.
Ajoutez un onglet personnalisé à l’équipe à l’aide du composant WebPart SharePoint Framework.
En haut de la page, sélectionnez l’icône + dans la navigation horizontale :
Dans la boîte de dialogue Ajouter un onglet , sélectionnez Obtenir plus d’applications
Sélectionnez Conçue pour votre organisation.
Sélectionnez l’application SPFx Teams Together.
Dans la boîte de dialogue SPFx Teams Together, sélectionnez le bouton Ajouter à une équipe.
Dans la boîte de dialogue suivante, sélectionnez le canal Général dans l’équipe Ma première équipe, puis Configurer un onglet.
La boîte de dialogue suivante vous permet de confirmer l’installation de l’application. Sélectionnez Enregistrer.
L’application doit maintenant se charger dans Microsoft Teams au sein du canal Général, sous l’onglet SPFx Teams Together.
Sélectionnez la X dans le coin supérieur droit du volet des propriétés pour fermer la configuration initiale.
Résumé
Dans cet exercice, vous avez créé une solution de composant WebPart de SharePoint Framework qui fonctionne dans SharePoint Online et sous forme d’onglet dans Microsoft Teams.
Testez vos connaissances
Commentaires
Cette page a-t-elle été utile ?
No
Vous avez besoin d’aide pour cette rubrique ?
Vous souhaitez essayer d’utiliser Ask Learn pour clarifier ou vous guider dans cette rubrique ?