Extensions de carte adaptative et applications Teams

Ce didacticiel s’appuie sur le didacticiel suivant : Fonctionnalités avancées d’affichage rapide.

Les extensions de carte adaptative peuvent être utilisées comme éléments supplémentaires pour un récit d’application Teams plus volumineux. Un ACE sur le tableau de bord Viva Connections peut être lié directement à un bot ou un onglet personnel Teams.

Dans ce didacticiel, vous allez utiliser une ACE dans une application Microsoft Teams.

Échafauder une SPFx Teams application personnelle

Commencez par la solution des didacticiels précédents et ajoutez un nouveau composant SPFx au projet à l’aide du générateur SPFx. Exécutez l’instruction suivante dans l’invite de commandes à partir du dossier racine de votre projet :

yo @microsoft/sharepoint

Lorsque vous y êtes invité, acceptez l’option par défaut pour toutes les invites du générateur.

À ce stade, Yeoman installe les dépendances requises et crée la structure des fichiers de la solution. Cette opération peut prendre quelques minutes.

Importante

Il existe un problème connu où l’installation de toutes les dépendances échoue après que le générateur exécute la commande npm install .

Recherchez et ouvrez le fichier suivant dans le projet : ./package.json.

Supprimez la dépendance @microsoft/sp-webpart-workbench de la section devDependencies du fichier.

À présent, exécutez la commande suivante dans la console à partir du dossier racine de votre projet :

npm install

Modifier le manifeste

Recherchez et ouvrez le fichier suivant dans le projet : ./src/webparts/helloWorld/HelloWorldWebPart.manifest.json.

Mettez à jour le tableau de supportedHosts pour prendre uniquement en charge l’utilisation dans un onglet personnel Teams :

"supportedHosts": ["TeamsPersonalApp"]

Empaqueter et déployer la solution

À présent, empaquetez et déployez la solution dans votre catalogue d’applications client SharePoint Online :

Commencez par créer la solution en mode production :

gulp bundle --ship

Ensuite, empaquetez la solution à l’aide de la tâche package-solution:

gulp package-solution --ship

Ajoutez votre fichier de package de solutions (*.sppkg situé dans le dossier ./sharepoint/solution) et chargez-le dans le catalogue d’applications client.

Lorsque vous déployez la solution, vérifiez que la zoneRendre cette solution disponible pour tous les sites de l’organisation est sélectionnée :

À présent, déployez la solution dans le magasin d’applications Microsoft Teams pour votre locataire en sélectionnant le bouton Synchroniser avec Teams :

Ajouter un nouvel onglet Personnel

Une fois la solution déployée, nous allons la tester dans le client Microsoft Teams.

Accédez au client web Microsoft Teams, connectez-vous, puis sélectionnez l’icône ... dans le volet de navigation le plus à gauche.

Sélectionnez le lien Autres applications :

Vous devriez voir votre application personnelle Teams nouvellement chargée. Sélectionnez-le, puis sélectionnez Ajouter.

Ouvrez votre nouvel onglet Personnel et copiez la partie en surbrillance suivante à partir de l’URL. Il s’agit de l’ID d’application Microsoft Teams. Vous en aurez besoin plus loin dans ce didacticiel :

Générer une structure d’un deuxième ACE

Créez un deuxième ACE à l’aide du générateur SPFx en exécutant l’instruction suivante dans l’invite de commandes à partir du dossier racine de votre projet :

yo @microsoft/sharepoint

Lorsque vous y êtes invité, entrez les valeurs suivantes (sélectionnez l’option par défaut pour toutes les invites qui ne sont pas mentionnées ci-dessous):

• Quel type de composant côté client créer? Extension de carte adaptative
• Quel est le nom de votre extension de carte adaptative? TeamsHelloWorld
• Quelle est la description de votre extension de carte adaptative? Description de TeamsHelloWorld

Ajouter un lien ciblé Teams

Les liens profonds Microsoft Teams ont le format suivant : https://teams.microsoft.com/l/entity/{appID}/{entityID}

1. Remplacez {appID} par la valeur d’ID d’application Microsoft Teams que vous avez copiée à la dernière étape.
2. Remplacez {entityID} par 0.

Conseil

Pour en savoir plus sur les liens profonds dans les applications Microsoft Teams, consultez Microsoft Teams : Créer des liens profonds.

Remarque

Si vous effectuez une liaison à une application Teams non SPFx, la valeur entityID est l’ID d’entité spécifié dans la section Onglets statiques du manifeste Teams.

Recherchez et ouvrez le fichier suivant dans le projet : ./src/adaptiveCardExtensions/teamsHelloWorld/cardView/CardView.ts.

Mettez à jour la méthode onCardSelection() pour ouvrir un lien profond :

public get onCardSelection(): IQuickViewCardAction | IExternalLinkCardAction | undefined {
  return {
    type: 'ExternalLink',
    parameters: {
      isTeamsDeepLink: true,
      target: '' // Set this to your Teams deep link URL
    }
  };
}

Répétez les étapes de la section Empaqueter et déployer la solution ci-dessus pour reconstruire, empaqueter et déployer la solution mise à jour.

tableau de bord Viva Connections

Le tableau de bord Viva Connections est disponible sur le site d’accueil du locataire.

Ajouter des cartes au tableau de bord

Dans le menu Nouveau, sélectionnez l’élément Tableau de bord pour créer un tableau de bord. Ajoutez l’ACE au tableau de bord en sélectionnant Ajouter une carte:

Ajoutez vos ACE HelloWorld et TeamsHelloWorld au tableau de bord. Lorsque vous avez terminé, publiez le tableau de bord.

Lien profond

Sélectionnez l’ACE TeamsHelloWorld . Le client de bureau Microsoft Teams s’ouvre automatiquement sur l’application personnelle que vous avez créée précédemment.

Conclusion

Après ce labo, vous devez être familiarisé avec les éléments suivants :

• Empaquetage et déploiement de solutions SPFx hétérogènes
• Création manuelle d’une URL de lien profond Teams
• Liaison approfondie d’un ACE à un onglet personnel Teams