Ejercicio: Agregue lógica condicional para SharePoint o Microsoft Teams
- 12 minutos
En este ejercicio, actualizará el elemento web de SharePoint Framework del ejercicio anterior para mostrar información diferente en función de si se ejecuta en un contexto de SharePoint o Microsoft Teams.
Busque y abra el archivo ./src/webparts/spFxTeamsTogether/SpFxTeamsTogetherWebPart.ts.
Busque el método _getEnvironmentMessage() en la clase SpFxTeamsTogetherWebPart. Este código crea un mensaje que indica si el elemento web se ejecuta en SharePoint o Teams comprobando el valor de this.context.sdks.microsoftTeams. Si el objeto microsoftTeams tiene un valor, el elemento web se ejecuta en Teams. Si el objeto microsoftTeams es undefined, el elemento web no se ejecuta en Teams:
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;
});
}
return Promise.resolve(this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentSharePoint : strings.AppSharePointEnvironment);
}
Reemplace la implementación de _getEnvironmentMessage() método por el código siguiente. No solo crea un mensaje que indica si el elemento web se ejecuta en SharePoint o Teams, sino que también usa el objeto de contexto adecuado para incluir el nombre del equipo o del sitio de SharePoint donde se ejecuta actualmente el elemento web:
private _getEnvironmentMessage(): Promise<string> {
let environmentMessage: string = '';
if (!!this.context.sdks.microsoftTeams) { // running in Teams, office.com or Outlook
return this.context.sdks.microsoftTeams.teamsJs.app.getContext()
.then(teamsContext => {
environmentMessage = this.context.isServedFromLocalhost
? strings.AppLocalEnvironmentTeams
: strings.AppTeamsTabEnvironment;
environmentMessage += `. Team name: ${teamsContext.team?.displayName}`;
return environmentMessage;
});
} else {
environmentMessage = this.context.isServedFromLocalhost
? strings.AppLocalEnvironmentTeams
: strings.AppTeamsTabEnvironment;
environmentMessage += `. Site name: ${this.context.pageContext.web.title}`;
return Promise.resolve(environmentMessage);
}
}
Empaquetar e implementar el flujo de trabajo
Compile el proyecto abriendo un símbolo del sistema y cambiando a la carpeta raíz del proyecto. Ejecute el comando siguiente:
gulp build
Después, ejecute el comando siguiente en la línea de comandos desde la raíz del proyecto para crear una agrupación de producción del proyecto:
gulp bundle --ship
Por último, cree un paquete de implementación del proyecto ejecutando el siguiente comando en la línea de comandos desde la raíz del proyecto:
gulp package-solution --ship
Vaya al catálogo de aplicaciones de inquilino moderno (es decir, la página Administrar aplicaciones ).
Busque el archivo creado por la tarea gulp, que se encuentra en la carpeta ./sharepoint/solution con el nombre *.sppkg.
Arrastre este archivo a la biblioteca de Aplicaciones para SharePoint en el explorador. Cuando se le solicite, seleccione Reemplazar.
En el panel Habilitar aplicación, asegúrese de que el botón de radio Habilitar esta aplicación y agregarla a todos los sitios esté seleccionado y seleccione Habilitar aplicación.
En el panel Esta aplicación se ha habilitado, seleccione Cerrar.
Probar los cambios
Vuelva a la página de SharePoint donde agregó el elemento web en el ejercicio anterior.
Observe cómo la página muestra que está actualmente en el contexto de SharePoint y muestra el nombre del sitio de SharePoint actual:
Ahora vuelva al equipo de Microsoft Teams y seleccione la pestaña que agregó anteriormente. Observe cómo el mensaje indica que está actualmente en Teams y el nombre del equipo:
Resumen
En este ejercicio, ha actualizado el elemento web de SharePoint Framework del ejercicio anterior para mostrar información diferente en función de si se ejecuta en un contexto de SharePoint o Microsoft Teams.
Comprobar sus conocimientos
Comentarios
¿Le ha resultado útil esta página?
No
¿Necesita ayuda con este tema?
¿Desea intentar usar Ask Learn para aclarar o guiarle a través de este tema?