Crear elementos web para SharePoint Online y Microsoft Teams
En esta unidad, aprenderá a mostrar información en función de si el elemento web de SharePoint Framework se ejecuta en SharePoint o Microsoft Teams.
Contexto de SharePoint Framework y Microsoft Teams
Todos los componentes de SharePoint, incluidos los elementos web del lado cliente, tienen acceso al contexto actual. El contexto, disponible desde el objeto this.context, proporciona a sus componentes acceso a los detalles sobre la página en la que se ejecuta el componente.
Su componente puede usar el contexto de la página, accesible desde el objeto this.context.pageContext, para obtener información sobre la colección de sitios, el sitio, la página y el usuario actual.
Microsoft introdujo un nuevo contexto en la versión de SharePoint Framework v1.8 cuando agregó compatibilidad con la implementación de elementos web del lado del cliente como pestañas de Microsoft Teams. El this.context.sdks.microsoftTeams objeto es una referencia del microsoftTeams objeto disponible en el paquete @microsoft/teams-js .
Un elemento web del lado cliente puede detectar si se ejecuta en SharePoint o Microsoft Teams comprobando si el microsoftTeams objeto está establecido en un valor o no está definido. Si es undefined, el componente no se está ejecutando en Microsoft Teams.
Trabajar con el contexto de Microsoft Teams
Veamos cómo su componente puede trabajar con el contexto de Microsoft Teams.
En el ejemplo de código siguiente se muestra un método que crea un mensaje que indica si el elemento web se ejecuta en SharePoint, Microsoft Teams o una de las opciones de Office.
private _getEnvironmentMessage(): Promise<string> {
if (!!this.context.sdks.microsoftTeams) { // running in Teams, office.com or Outlook
return this.context.sdks.microsoftTeams.teamsJs.app.getContext()
.then(context => {
let environmentMessage: string = '';
switch (context.app.host.name) {
case 'Office': // running in Office
environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOffice : strings.AppOfficeEnvironment;
break;
case 'Outlook': // running in Outlook
environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOutlook : strings.AppOutlookEnvironment;
break;
case 'Teams': // running in Teams
environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;
break;
default:
throw new Error('Unknown host');
}
return environmentMessage;
});
}
Resumen
En esta unidad, ha aprendido a mostrar información condicionalmente dependiendo de si el elemento web del lado cliente de SharePoint Framework se ejecuta en un entorno de SharePoint o Microsoft Teams.