Exposer SharePoint Framework composants WebPart dans Microsoft Teams
À l’aide de SharePoint Framework, vous pouvez créer des composants WebPart et desextensions. Lorsque vous créez des composants WebPart, vous pouvez les permettre d’être exposés 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 sur GitHub.
Exposer le composant WebPart sous l’onglet Microsoft Teams
Pour exposer un SharePoint Framework composant WebPart côté client sous la forme d’un onglet Microsoft Teams, dans le manifeste du composant WebPart, dans la supportedHosts propriété , ajoutez TeamsTab.
Exposer le composant WebPart en tant qu’application personnelle Microsoft Teams
Pour exposer le composant WebPart en tant qu’application personnelle Microsoft Teams, dans le manifeste du composant WebPart, dans la supportedHosts propriété , ajoutez TeamsPersonalApp.
Conseil
Le même SharePoint Framework composant WebPart peut être exposé en tant que composant WebPart dans SharePoint, l’onglet Microsoft Teams et une application Teams personnelle. Les valeurs spécifiées dans la propriété déterminent la supportedHosts façon dont les utilisateurs pourront travailler avec votre composant WebPart.
Exposer le composant WebPart en tant qu’extension de messagerie Microsoft Teams
Importante
L’exposition de composants WebPart en tant qu’extension de messagerie Microsoft Teams est prise en charge avec SharePoint Framework v1.11 et versions ultérieures.
Pour exposer votre composant WebPart SharePoint Framework 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 avec un composeExtension, 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’élément clé des informations est l’URL dans la taskInfo propriété , qui doit correspondre à l’URL spécifiée dans l’exemple et dont le componentId paramètre de chaîne de requête doit être défini sur l’ID du composant WebPart SharePoint Framework qui doit être exposé dans l’extension de messagerie.
Réponse à l’interaction de l’utilisateur
Lorsque votre composant WebPart est exposé dans Microsoft Teams en tant qu’extension de messagerie, vous souhaiterez 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 informe le bot de l’événement que l’utilisateur a déclenché, et le bot publie les données dans la conversation. Toutefois, vous devez d’abord vérifier si le composant WebPart est utilisé comme extension de messagerie.
Pour vérifier si votre composant WebPart est utilisé comme extension de messagerie, vérifiez si la propriété a la context._host._teamsManager._appContext.applicationName valeur 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 composant WebPart est utilisé comme extension de messagerie, vous utilisez un module de tâche pour transmettre les données du composant WebPart 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 d’extensions de messagerie Microsoft Teams, consultez la documentation microsoft Teams. Pour voir un exemple de la façon dont un composant WebPart SharePoint Framework est exposé en tant qu’extension de messagerie, consultez l’exemple d’application Prospects sur GitHub.
Lorsque vous choisissez d’exposer vos composants WebPart SharePoint Framework dans Microsoft Teams, vous disposez d’un certain nombre d’options 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 à Options de déploiement pour SharePoint Framework solutions pour Microsoft Teams pour les options de déploiement.