Exposer SharePoint Framework composants Web Microsoft Teams
À l SharePoint Framework, vous pouvez créer des composants Web Parts et des extensions. Lorsque vous construisez des composants Web Parts, vous pouvez les exposer sous la forme d’un onglet Microsoft Teams,d’une application personnelle ou d’une extension de messagerie.
Conseil
Pour savoir comment utiliser les différents concepts décrits dans cet article, consultez l’exemple d’application Prospects GitHub.
Expose web part as Microsoft Teams tab
Pour exposer un SharePoint Framework web de côté client sous la Microsoft Teams, dans le manifeste du partie Web, dans la supportedHosts propriété, ajoutez TeamsTab .

Exposer le web part en tant Microsoft Teams application personnelle
Pour exposer le site Web Part sous la Microsoft Teams’application personnelle, dans le manifeste du partie Web, dans la supportedHosts propriété, ajoutez TeamsPersonalApp .

Conseil
Le même SharePoint Framework web peut être exposé en tant que partie Web dans SharePoint, Microsoft Teams onglet et une application Teams personnelle. Les valeurs spécifiées dans la propriété déterminent comment les utilisateurs pourront supportedHosts travailler avec votre partie Web.
Expose web part as Microsoft Teams messaging extension
Important
L’exposition de composants Web Microsoft Teams extension de messagerie est prise en charge avec SharePoint Framework v1.11 et les plus nouvelles.
Pour exposer votre SharePoint Framework web en tant qu’extension de messagerie, vous n’avez pas besoin d’utiliser un hôte spécifique dans la supportedHosts propriété. Au lieu de cela, il vous suffit d’étendre le manifeste teams dans votre solution SharePoint Framework composeExtension avec, par exemple :
{
"$schema": "https://developer.microsoft.com/json-schemas/teams/v1.5/MicrosoftTeams.schema.json",
"manifestVersion": "1.5",
// trimmed for brevity
"composeExtensions": [
{
"botId": "a349bab7-f895-4d6e-977a-764779833699",
"canUpdateConfiguration": true,
"commands": [
{
"id": "shareLead",
"type": "action",
"title": "Share a lead",
"description": "Find and share a lead",
"initialRun": false,
"fetchTask": false,
"context": [
"commandBox",
"compose"
],
"taskInfo": {
"title": "Share a lead",
"width": "1100",
"height": "665",
"url": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamstaskhostedapp.aspx%3Fteams%26personal%26componentId=e81a1b68-686e-412f-90ac-cb80f2544398%26forceLocale={locale}"
}
}
]
}
]
// trimmed for brevity
}
L’information clé est l’URL de la propriété, qui doit correspondre à l’URL spécifiée dans l’exemple et dont le paramètre de chaîne de requête doit être définie sur l’ID du partie Web Part SharePoint Framework qui doit être exposé dans l’extension de taskInfo componentId messagerie.

Réponse à l’interaction de l’utilisateur
Lorsque votre partie Web Est exposée dans Microsoft Teams en tant qu’extension de messagerie, vous souhaitez peut-être répondre à l’interaction de l’utilisateur, par exemple en publiant une carte adaptative dans la conversation. Cela nécessite l’utilisation d’un module de tâche et d’un bot. Le module de tâche avertit le bot de l’événement déclenché par l’utilisateur, et le bot publie les données dans la conversation. Toutefois, tout d’abord, vous devez vérifier si le partie Web Est utilisée comme extension de messagerie.
Pour vérifier si votre partie Web Est utilisée comme extension de messagerie, vérifiez si la propriété context._host._teamsManager._appContext.applicationName est définie sur TeamsTaskModuleApplication :
private leadClicked = (ev?: React.SyntheticEvent<HTMLElement>): void => {
const host: string = this.props.host._teamsManager._appContext.applicationName;
if (host !== 'TeamsTaskModuleApplication') {
return;
}
// web part used as a messaging extension
}
Une fois que vous avez vérifié que le partie Web Part est utilisé comme extension de messagerie, vous utilisez un module de tâche pour transmettre les données du site Web Part au bot :
private leadClicked = (ev?: React.SyntheticEvent<HTMLElement>): void => {
const host: string = this.props.host._teamsManager._appContext.applicationName;
if (host !== 'TeamsTaskModuleApplication') {
return;
}
// web part used as a messaging extension
this.props.teamsContext.tasks.submitTask(selectedLead[0]);
}
Après avoir reçu la notification, le bot peut traiter les données récupérées et publier des informations dans la conversation.
protected async handleTeamsMessagingExtensionSubmitAction(context: TurnContext, action: MessagingExtensionAction): Promise<MessagingExtensionActionResponse> {
const lead: Lead = action.data;
let leadChangeIcon: string = "";
if (lead.change > 0) {
leadChangeIcon = "🔼 ";
} else if (lead.change < 0) {
leadChangeIcon = "🔽 ";
}
const leadCard = CardFactory.adaptiveCard({
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
// trimmed for brevity
});
await context.sendActivity({ attachments: [leadCard] });
return Promise.resolve({});
}
Conseil
Pour plus d’informations sur la création Microsoft Teams extensions de messagerie, voir la documentation Microsoft Teams. Pour voir un exemple de la façon dont un SharePoint Framework Web Part est exposé en tant qu’extension de messagerie, consultez l’exemple d’application Leads sur GitHub.
Lorsque vous choisissez d’exposer vos composants Web SharePoint Framework dans Microsoft Teams, plusieurs options s’offrent à vous pour les déployer sur Microsoft Teams.
Options de déploiement des solutions SharePoint Framework pour Microsoft Teams
Les développeurs ont plusieurs options lorsqu'ils déploient des solutions SharePoint Framework (SPFx) à utiliser dans Microsoft Teams.
Reportez-vous aux options de déploiement pour SharePoint Framework solutions de Microsoft Teams pour les options de déploiement.