Ampliar Outlook y Office con el SharePoint Framework

La versión SharePoint Framework (SPFx) v1.16 agregó compatibilidad con el SDK de cliente de JavaScript v2 de Microsoft Teams. El SDK de cliente de JavaScript v2 de Microsoft Teams introdujo la capacidad de permitir que las aplicaciones de Teams se ejecuten en Outlook en Office, además de Microsoft Teams.

Con esta mejora en SPFx v1.16, los desarrolladores ahora pueden usar SPFx para crear aplicaciones para Outlook y Office mediante la compatibilidad existente para crear aplicaciones para Microsoft Teams.

Importante

La capacidad de ejecutar aplicaciones de Microsoft Teams en Outlook y Office está actualmente en versión beta con disponibilidad prevista en la primera mitad del año natural 2023.

Importante

Información esencial necesaria para el éxito del usuario

Para probar el uso de aplicaciones de Microsoft Teams en Outlook y Office, incluidas las creadas con SPFx, debe configurar las preferencias de versión del inquilino de Microsoft 365 para la versión de destino. Para obtener más información sobre cómo cambiar las preferencias de versión de las organizaciones, consulte Configuración de las opciones de versión estándar o de destino.

Las preferencias de lanzamiento del inquilino tardan 5 días laborables en surtir efecto. En otras palabras, cambie el inquilino de la pista de versión estándar a la pista de lanzamiento de destino el 5 de mes; no podrá probar las aplicaciones de Microsoft Teams creadas con SPFx en Outlook u Office hasta el 11 de mes.

Creación de aplicaciones de Microsoft Teams para Outlook y Office

Para crear una nueva aplicación de Microsoft Teams con SPFx para Outlook y Office, primero debe crear un nuevo proyecto SPFx mediante el generador de Yeoman para SharePoint v1.16 o posterior de la misma manera que crearía un nuevo elemento web. Para obtener más información, vea Compilación del primer elemento web del lado cliente de SharePoint.

El generador de SharePoint Yeoman le hará una serie de preguntas. Siga las mismas instrucciones para crear un nuevo elemento web SPFx al responder a estas preguntas.

Una vez creado el proyecto, actualice la propiedad del supportedHosts elemento web para indicar dónde se puede usar. Por ejemplo, agregue TeamsTab o TeamsPersonalApp a la propiedad te supportedHosts en el archivo ./config/package-solution.json . Para obtener más información, consulte Creación de pestañas de Microsoft Teams mediante SharePoint Framework.

Determinación del host en tiempo de ejecución actual de la aplicación

Es posible que la aplicación tenga que determinar dónde se ejecuta actualmente por diversos motivos. Por ejemplo, ¿deben ver los usuarios una experiencia si se ejecuta en SharePoint, Microsoft Teams, Outlook u otro cliente de Office?

Use la propiedad de context SPFx en la clase del elemento web y el cliente JavaScript de Microsoft Teams para determinar el cliente de hospedaje. La app.host.name propiedad del cliente de JavaScript de Teams contiene el nombre del host si es Microsoft Teams, Outlook u Office. Si el objeto de contexto de Microsoft Teams es undefined, el elemento web se ejecuta en SharePoint.

// if running in Microsoft Teams, Outlook, or Office...
if (!!this.context.sdks.microsoftTeams) {
  const teamsContext = await this.context.sdks.microsoftTeams.teamsJs.app.getContext();
  switch (teamsContext.app.host.name.toLowerCase()) {
    case 'teams': // this is the host name for the "classic" Teams client
    case 'teamsmodern': // this is the host name for the "new" Teams client
      // RUNNING IN MICROSOFT TEAMS
    case 'office':
      // RUNNING IN OFFICE / OFFICE.COM
    case 'outlook':
      // RUNNING IN OUTLOOK
    default:
      throw new Error('Unknown host');
  }
} else {
  // RUNNING IN SHAREPOINT
}

Creación del paquete de manifiesto & de aplicación de Microsoft Teams

Aunque el botón Sincronizar con Teams del Catálogo de aplicaciones de SharePoint Online puede crear automáticamente el manifiesto de aplicación de Microsoft Teams, empaquetar la aplicación e instalarlo en la tienda de Microsoft Teams, esto actualmente no admite el formato de archivo de manifiesto de aplicación de Microsoft Teams necesario. El archivo de manifiesto de aplicación de Teams debe ser v1.13 o posterior

La otra opción es crear manualmente el manifiesto de la aplicación y el paquete de la aplicación e incluirlos en el paquete de SharePoint cargado en el catálogo de aplicaciones. Al seleccionar el botón Sincronizar con Teams en el Catálogo de aplicaciones, SharePoint Online usará el paquete de aplicaciones de Teams que creó y que ha incluido en el paquete de SharePoint.

Nota:

Para obtener más información sobre cómo crear manualmente manifiestos de aplicaciones y paquetes de aplicaciones de Microsoft Teams, consulte Opciones de implementación para soluciones de SharePoint Framework para Microsoft Teams.

Creación del manifiesto de aplicación de Microsoft Teams

El primer paso es crear el manifiesto de aplicación de Microsoft Teams.

1. Cree el siguiente archivo en el proyecto de SPFx: ./teams/manifest.json.
2. Siga las instrucciones de Microsoft Teams: Esquema de manifiesto de aplicación para Teams y SharePoint Framework: Opciones de implementación para SharePoint Framework soluciones de Microsoft Teams para crear un nuevo archivo de manifiesto de aplicación.
3. Tome nota especial de las siguientes propiedades en el archivo manifest.json :

   • manifestVersion: debe establecerse en 1.13 o superior.

   • staticTabsconfigurableTabso : compruebe que sigue las instrucciones para usar un elemento web SPFx como una pestaña de Microsoft Teams.

     Por ejemplo, la contentUrl propiedad y cualquier otra propiedad que haga referencia a componentes de SPFx deben usar los tokens {teamSiteDomain}dinámicos , , &{teamSitePath}{locale}. También debe hacer referencia al identificador de componente de SPFx.

     Sugerencia

     Para obtener más información sobre estas propiedades, vea SharePoint Framework: Opciones de implementación para soluciones de SharePoint Framework para Microsoft Teams, específicamente la sección en Referencia dinámica a las direcciones URL del sitio de SharePoint subyacentes.

Nota:

Para obtener más información sobre el archivo de manifiesto de aplicación de Microsoft Teams, consulte Microsoft Teams: Esquema de manifiesto de aplicación para Teams.

Creación del paquete de aplicaciones de Microsoft Teams

Una vez que haya creado el manifiesto de aplicación de Microsoft Teams, debe crear manualmente el paquete de la aplicación. Esto se incluirá en el archivo de paquete de SharePoint (*.sppkg) que cargará en el catálogo de aplicaciones del inquilino de SharePoint.

1. Comprima el contenido de la carpeta ./teams del proyecto.
2. Cambie el nombre del paquete ZIP a TeamsSPFxApp.zip.

Importante

El paquete de la aplicación de Microsoft Teams debe llamarse TeamsSPFxApp.zip y guardarse en la carpeta ./teams para que esta opción funcione con el botón Sincronizar con Teams del catálogo de aplicaciones del inquilino.

Implementación de la aplicación de Microsoft Teams basada en SPFx

Una vez que haya creado el paquete de la aplicación, el siguiente paso es implementarlo e instalarlo.

Implemente la aplicación en el catálogo de aplicaciones del inquilino.

A continuación, seleccione la aplicación, seleccione la pestaña Archivos de la cinta de opciones y, a continuación, seleccione el botón Sincronizar con Teams para implementar el paquete de aplicación en la tienda de Microsoft Teams del inquilino.

Nota:

Para obtener más información sobre cómo empaquetar & la implementación de paquetes de SharePoint en la App Store de Microsoft Teams, vea SharePoint Framework: Opciones de implementación para soluciones de SharePoint Framework para Microsoft Teams.

Ahora que ha implementado la aplicación en SharePoint, puede agregarla como elemento web a una página de los sitios de SharePoint:

La aplicación también se puede instalar en Microsoft Teams. Una vez que haya iniciado sesión, seleccione la opción Aplicaciones en el panel de navegación vertical izquierdo.

Observe que las aplicaciones aparecen en la sección Compilación para su organización :

Una vez instalada la aplicación, aparecerá en el panel de navegación vertical izquierdo como una aplicación anclada:

Puede seguir el mismo proceso para instalar la aplicación en Outlook que en Microsoft Teams.

Sugerencia

Para obtener más información, consulte el ejemplo React Panel de clientes potenciales de Teams para obtener un ejemplo de trabajo que use SPFx para crear una aplicación de Microsoft Teams para Outlook y Office.