Exponer SharePoint Framework elementos web en Microsoft Teams
Con SharePoint Framework, puede crear elementos web y extensiones. Al compilar elementos web, puede permitir que se expongan como una pestaña de Microsoft Teams, una aplicación personal o una extensión de mensajería.
Sugerencia
Para ver cómo usar los diferentes conceptos descritos en este artículo, consulte la aplicación leads de ejemplo en GitHub.
Exponer el elemento web como pestaña de Microsoft Teams
Para exponer un SharePoint Framework elemento web del lado cliente como una pestaña de Microsoft Teams, en el manifiesto del elemento web, en la supportedHosts propiedad , agregue TeamsTab.
Exposición del elemento web como aplicación personal de Microsoft Teams
Para exponer el elemento web como una aplicación personal de Microsoft Teams, en el manifiesto del elemento web, en la supportedHosts propiedad , agregue TeamsPersonalApp.
Sugerencia
El mismo elemento web SharePoint Framework se puede exponer como un elemento web en SharePoint, la pestaña Microsoft Teams y una aplicación personal de Teams. Los valores especificados en la supportedHosts propiedad deciden cómo los usuarios podrán trabajar con el elemento web.
Exponer el elemento web como extensión de mensajería de Microsoft Teams
Importante
La exposición de elementos web como extensión de mensajería de Microsoft Teams es compatible con SharePoint Framework v1.11 y versiones posteriores.
Para exponer el elemento web SharePoint Framework como una extensión de mensajería, no es necesario usar un host específico en la supportedHosts propiedad . En su lugar, todo lo que necesita hacer es ampliar el manifiesto de teams en la solución de SharePoint Framework con , composeExtensionpor ejemplo:
{
"$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
}
La parte clave de la información es la dirección URL de la taskInfo propiedad, que debe coincidir con la dirección URL especificada en el ejemplo y que debe tener el parámetro de componentId cadena de consulta establecido en el identificador del elemento web SharePoint Framework que se debe exponer en la extensión de mensajería.
Respuesta a la interacción del usuario
Cuando el elemento web se expone en Microsoft Teams como una extensión de mensajería, es posible que desee responder a la interacción del usuario, por ejemplo, mediante la publicación de una tarjeta adaptable en la conversación. Esto requiere el uso de un módulo de tareas y un bot. El módulo de tareas notifica al bot el evento que el usuario desencadenó y el bot volverá a publicar los datos en la conversación. Sin embargo, en primer lugar, debe comprobar si el elemento web se usa como una extensión de mensajería.
Para comprobar si el elemento web se usa como extensión de mensajería, compruebe si la context._host._teamsManager._appContext.applicationName propiedad está establecida en 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
}
Una vez comprobado que el elemento web se usa como extensión de mensajería, se usa un módulo de tareas para pasar los datos del elemento web al 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]);
}
Después de recibir la notificación, el bot puede procesar los datos recuperados y publicar información en la conversación.
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({});
}
Sugerencia
Para obtener más información sobre la creación de extensiones de mensajería de Microsoft Teams, consulte la documentación de Microsoft Teams. Para ver un ejemplo de cómo se expone un elemento web SharePoint Framework como una extensión de mensajería, consulte la aplicación leads de ejemplo en GitHub.
Cuando decide exponer los elementos web de SharePoint Framework en Microsoft Teams, tiene varias opciones para implementarlos en Microsoft Teams.
Opciones de implementación de las soluciones de SharePoint Framework para Microsoft Teams
Los desarrolladores tienen múltiples opciones al implementar soluciones de SharePoint Framework (SPFx) para usar dentro de Microsoft Teams.
Consulte Opciones de implementación para SharePoint Framework soluciones para Microsoft Teams para ver las opciones de implementación.