Extensión de una aplicación de reunión de Teams a Outlook

En el ecosistema de Microsoft 365, la mayoría de los usuarios mensuales programan sus reuniones de Microsoft Teams desde Outlook. Para ayudar a los usuarios a mantenerse en el flujo de su trabajo, las aplicaciones de reuniones de Teams ahora se admiten en Outlook. Puede configurar y agregar aplicaciones de reunión a las reuniones de Teams programadas desde Outlook y también ejecutar aplicaciones de reuniones dentro del calendario de Outlook.

Las aplicaciones de reunión son básicamente aplicaciones de pestaña de Teams diseñadas para fomentar la colaboración antes, durante y después de las reuniones. Puede especificar qué contextos admite la aplicación de reunión desde el manifiesto de aplicación (anteriormente denominado manifiesto de aplicación de Teams) a través de la propiedad configurableTabs.context .

Nota:

Además de configurableTabs, la aplicación de reunión debe contener al menos una funcionalidad de aplicación en el ámbito personal (por ejemplo, staticTabs), para que esté disponible en Outlook.

En la tabla siguiente se muestran los contextos de la aplicación de reunión de Teams admitidos en Outlook:

Contexto de reunión de Teams	Valor del manifiesto de la aplicación	Valor de TeamsJS	Compatibilidad con Outlook
Vista de detalles de la reunión	meetingDetailsTab	frameContext.content	✔️
Vista de chat de reunión	meetingChatTab	frameContext.content	✔️
Vista del panel lateral de la reunión	meetingSidePanel	frameContext.sidePanel	✔️
Vista previa de la reunión	meetingStage	frameContext.meetingStage	❌

Si la aplicación de reunión admite Stageview, otros efectos en la reunión o contiene funcionalidades como extensiones de mensajes y bots, estas siguen funcionando en Teams cuando la reunión está programada desde Outlook, pero no aparece ni se ejecuta en Outlook.

Requisitos previos

Para obtener una vista previa de la aplicación de reunión de Teams en Outlook, asegúrese de lo siguiente:

• Un inquilino de espacio aislado para desarrolladores de Microsoft 365 con la carga habilitada.
• Un entorno de prueba con el escritorio de Outlook para Windows instalado desde el canal actual de Aplicaciones de Microsoft 365.
• NodeJS (con npm) instalado.
• Biblioteca de la CLI v2 de TeamsFx instalada desde npm.
• Visual Studio Code instalado en el entorno de desarrollo.
• Extensión del kit de herramientas de Teams para Visual Studio Code.

Para obtener una vista previa de la aplicación de reunión de Teams en Outlook, puede crear una nueva aplicación de reunión con Teams Toolkit o ampliar una aplicación de reunión de Teams existente en Outlook.

Compilación de una aplicación de reunión de Teams para Outlook

Puede crear una aplicación de reunión de Teams para Outlook a través de la extensión Kit de herramientas de Teams para Visual Studio Code. Para compilar una aplicación de reunión de Teams para obtener una vista previa en Outlook:

1. Vaya a Teams e inicie sesión con su cuenta de inquilino de espacio aislado.

2. Seleccione Calendario>Nueva reunión y programe una reunión.

   

3. Abra la extensión Kit de herramientas de Teams en Visual Studio Code y seleccione Ver ejemplos.

4. Seleccione My First Meeting App Create (Mi primera creación de aplicación> de reunión) y especifique la carpeta para crear el área de trabajo.

   

5. Presione la tecla F5 para depurar y ejecutar el ejemplo localmente en Teams. Teams le pide que instale la aplicación.

6. Seleccione Agregar a una reunión en la lista desplegable y seleccione la reunión que ha programado anteriormente.

   

7. Seleccione la configuración de la pestaña de ejemplo y seleccione Guardar. La aplicación está disponible en la vista de chat de reuniones.

   

Extensión de una aplicación de reunión de Teams existente a Outlook

Para ampliar la aplicación de reunión de Teams existente en Outlook, asegúrese de lo siguiente:

• Actualice el manifiesto de la aplicación.
• Use la biblioteca cliente JavaScript de Microsoft Teams (TeamsJS) v2.5.0 o posterior.
• Configurar encabezados de directiva de seguridad de contenido.
• Actualice el registro de aplicaciones de Microsoft Entra para el inicio de sesión único (SSO).
• Cargue la aplicación actualizada en el Centro de administración de Teams.

Si tiene una aplicación de reunión existente, realice una copia o una rama del proyecto de producción y actualice la aplicación en el manifiesto de la aplicación id para usar un nuevo identificador que sea diferente del identificador de la aplicación de producción para las pruebas.

Actualizar el manifiesto de la aplicación

Actualice la versión del esquema del manifiesto de aplicación (anteriormente denominado manifiesto de aplicación de Teams) a la versión 1.13 o posterior.

Abra el manifiesto de la aplicación de Teams y actualice las $schema propiedades y manifestVersion como se indica a continuación:

{
    "$schema" : "https://developer.microsoft.com/json-schemas/teams/v1.16/MicrosoftTeams.schema.json",
    "manifestVersion" : "1.16"
}

Uso de TeamsJS versión 2.5.0 o posterior

Use la versión 2.5.0 o posterior de la biblioteca cliente de TeamsJS para ampliar la aplicación de reunión de Teams para que se ejecute en Outlook. Si la aplicación usa TeamsJS v2.5.0 o posterior, no es necesario que los cambios de código de la aplicación se ejecuten en Outlook.

Si necesita actualizar el paquete npm de TeamsJS de v1.x.x a la versión más reciente de TeamsJS v2.x.x, puede usar Teams Toolkit para ayudar a identificar y automatizar los cambios de código necesarios. Para obtener más información, consulte Biblioteca teamsJS.

Siga estos pasos para actualizar TeamsJS a la versión más reciente mediante el kit de herramientas de Teams:

1. Abra la aplicación en Visual Studio Code y seleccione Extensión del kit de herramientas de Teams .
2. En Vista, seleccione Paleta de comandos... o Ctrl+Mayús+P.
3. Ejecute el comando Teams: Upgrade Teams JS SDK and code references.

Las referencias @microsoft/teams-js@2.x.x de archivo de package.json y *.js/.ts los archivos y *.jsx/.tsx se actualizan con:

• Importar instrucciones para teams-js@2.x.x.
• Llamadas a Function, Enum e Interface para teams-js@2.x.x.
• Nuevos "TODO" recordatorios de comentarios que marcan las áreas que podrían verse afectadas por los cambios en la interfaz de contexto .
• Nuevos "TODO" recordatorios de comentarios para convertir las funciones de devolución de llamada en promesas.

Nota:

La actualización a la versión más reciente de TeamsJS a través del kit de herramientas de Teams no actualiza el código en los archivos HTML. Debe actualizar los archivos HTML manualmente.

Configuración de encabezados CSP para Outlook

Las aplicaciones de pestaña de Teams se hospedan dentro de elementos iframe en Outlook, como en Teams. Si la aplicación usa encabezados de directiva de seguridad de contenido (CSP), agregue outlook.office.com como antecesor de marco.

Actualización del registro de aplicaciones de Microsoft Entra para sso

El inicio de sesión único (SSO) de Microsoft Entra para aplicaciones de reunión funciona de la misma manera en Outlook que en Teams. Sin embargo, debe agregar manualmente el identificador de aplicación de Outlook al registro de la aplicación Microsoft Entra.

1. Inicie sesión en Azure Portal con la cuenta de inquilino de prueba.

2. Abra Registros de aplicaciones.

3. Seleccione la aplicación.

4. Seleccione Administrar Exponer>una API.

5. En la sección Aplicaciones cliente autorizadas , agregue el siguiente Client Id valor:

   Microsoft 365 aplicación cliente	Id. de cliente
   Versión de escritorio de Outlook	d3590ed6-52b3-4102-aeff-aad2292ab01c

   Para obtener más información sobre los identificadores de aplicación cliente que se usan para ampliar las aplicaciones de Teams en Microsoft 365, vea Pestañas de Teams en Microsoft 365 y Outlook.

Puede cargar la aplicación personalizada en el Centro de administración de Teams y obtener una vista previa de la aplicación de reunión en Outlook.

Carga de la aplicación personalizada en el Centro de administración de Teams

Para probar la aplicación en Microsoft 365 y Outlook, cargue el paquete de la aplicación en el Centro de administración de Teams.

1. Empaquete el manifiesto de la aplicación de Teams y los iconos de la aplicación en un archivo ZIP. Para crear un paquete de aplicaciones a través del kit de herramientas de Teams, consulte Compilación de un paquete de aplicaciones.

2. Vaya al Centro de administración de Teams y seleccione Aplicaciones> de TeamsAdministrar aplicaciones.

3. Seleccione Cargar nueva aplicación y seleccione el paquete de la aplicación.

Una vez que la aplicación de reunión se carga en el Centro de administración de Teams, está disponible tanto en Teams como en Outlook. Para que la aplicación se muestre en el menú Aplicaciones , espere unos minutos y reinicie Outlook para Windows.

Vista previa de la aplicación de reunión en Outlook

Para obtener una vista previa de la aplicación de reunión en Outlook para Windows, asegúrese de que la aplicación se ejecuta localmente y siga los pasos siguientes:

1. Abra Outlook para Windows que ha iniciado sesión con su cuenta de inquilino de prueba. Si Outlook ya se está ejecutando, ciérrelo y vuelva a reiniciarlo.

2. Abra Calendario>Nueva reunión. Para que una aplicación de reunión se ejecute en Outlook, asegúrese de que la reunión es una reunión de Teams , ya que no se admiten otras reuniones programadas desde Outlook.

3. En la ventana de programación de reuniones, seleccione Todas las aplicaciones. La aplicación de reunión cargada aparece entre las aplicaciones de reunión instaladas.

   

4. Seleccione la aplicación de reunión. Aparece un cuadro de diálogo de configuración, donde el usuario configura las opciones de aplicación pertinentes para su reunión específica.

   

5. Seleccione Agregar. La aplicación de reunión se muestra en la sección Aplicaciones y en el panel lateral de la ventana de programación.

Para quitar o configurar la aplicación en la ventana de programación, seleccione el menú desplegable de la aplicación y seleccione lo siguiente:

• Acerca de: Cómo aparece la aplicación en la Tienda Microsoft Teams.
• Configuración: actualice la configuración de la aplicación para la reunión específica.
• Quitar: quite la aplicación de la reunión.

Ejemplo de código

Nombre de ejemplo	Descripción	Node.js
Aplicación HelloWorld en la reunión	Aplicación de reunión sencilla que muestra la vista de detalles de la reunión, la vista de chat y el panel lateral. Funciona en Teams y Outlook.	Ver

Consulte también

Soporte técnico y comentarios