Expansión del vínculo de la pestaña y vista de fases
La vista de fase es un nuevo componente de interfaz de usuario. Permite representar el contenido que se abre en pantalla completa en Teams y se ancla como una pestaña.
Nota:
En este tema se refleja la versión 2.0.x de la biblioteca cliente JavaScript de Microsoft Teams (TeamsJS). Si usa una versión anterior, consulte la introducción a la biblioteca TeamsJS para obtener instrucciones sobre las diferencias entre la versión más reciente de TeamsJS y las versiones anteriores.
Vista de extendida
Vista extendida es un componente de interfaz de usuario de pantalla completa que puede invocar para mostrar el contenido web. El servicio de desplegamiento de vínculos existente se actualiza para que se use para convertir direcciones URL en una pestaña mediante una tarjeta adaptable y servicios de chat. Cuando un usuario envía una dirección URL en un chat o canal, la dirección URL se desplega en una tarjeta adaptable. El usuario puede seleccionar Ver en la tarjeta y anclar el contenido como una pestaña directamente desde la Vista extendida.
Ventaja de vista extendida
Vista extendida ayuda a proporcionar una experiencia más fluida de visualización de contenido en Teams. Los usuarios pueden abrir y ver el contenido proporcionado por la aplicación sin salir del contexto y pueden anclar el contenido al chat o canal para un acceso rápido futuro, lo que conduce a una mayor interacción del usuario con la aplicación.
Vista extendida frente a módulo de tareas
| Vista de extendida | Módulo de tareas |
|---|---|
| La vista extendida es útil cuando usted tiene contenido enriquecido para mostrar a los usuarios, como es una página, un panel, un archivo, etc. Proporciona características enriquecidas que ayudan a representar el contenido en el lienzo de pantalla completa. | Módulo de tareas es especialmente útil para mostrar mensajes que requieren la atención del usuario o recopilar la información necesaria para pasar al paso siguiente. |
Invocar Vista extendida
Puede invocar la vista de fase de las siguientes maneras:
- Invocar Vista extendida desde tarjeta adaptable
- invocar Vista extendida a través de vínculo profundo
Invocar Vista extendida desde tarjeta adaptable
Cuando el usuario escribe una dirección URL en el cliente de escritorio de Teams, el bot se invoca y devuelve una Tarjeta adaptable con la opción de abrir la dirección URL en una fase. Una vez que se inicia una fase y se proporciona el tabInfo, usted puede agregar la capacidad de anclar la fase como una pestaña.
Las siguientes imágenes muestran una fase abierta desde una tarjeta adaptable:
Ejemplo
A continuación se muestra el código para abrir una fase desde una tarjeta adaptable:
{
type: "Action.Submit",
title: "View",
data: {
msteams: {
type: "invoke",
value: {
type: "tab/tabInfoAction",
tabInfo: {
contentUrl: contentUrl,
websiteUrl: websiteUrl,
name: "Tasks",
entityId: "entityId"
}
}
}
}
}
El tipo de solicitud invoke debe ser composeExtension/queryLink.
Nota:
invokeEl flujo de trabajo es similar al flujo de trabajo actualappLinking.- Para mantener la coherencia, se recomienda asignar un nombre a
Action.SubmitcomoView. websiteUrles una propiedad necesaria que se debe pasar en el objetoTabInfo.
A continuación se muestra el proceso para invocar la vista extendida:
- Cuando el usuario selecciona Ver, el bot recibe una solicitud de
invoke. El tipo de solicitud escomposeExtension/queryLink. invokerespuesta del bot contiene una tarjeta adaptable con el tipotab/tabInfoActionen ella.- El bot responde con un código de
200.
Nota:
En los clientes móviles de Teams, al invocar la vista de fase para las aplicaciones distribuidas a través de la tienda de Teams y no tener una experiencia optimizada para dispositivos móviles, se abre el explorador web predeterminado del dispositivo. websiteUrl El explorador abre la dirección URL especificada en el parámetro del objetoTabInfo.
Invocación de la Vista extendida a través de un vínculo profundo
Para invocar la Vista extendida a través de un vínculo profundo desde la pestaña, debe encapsular la dirección URL del vínculo profundo en la API de app.openLink(url). El vínculo profundo también se puede pasar a través de una acción OpenURL en la tarjeta.
Sintaxis
A continuación se muestra la sintaxis de vínculo profundo:
<https://teams.microsoft.com/l/stage/{appId}/0?context>={"contentUrl":"contentUrl","websiteUrl":"websiteUrl","name":"Contoso"}
Ejemplos
Cuando un usuario escribe una dirección URL, se desplegó en una tarjeta adaptable.
Estos son los ejemplos de vínculos profundos para invocar la Vista extendida:
Ejemplo 1: dirección URL con threadId
Dirección URL sin codificar:
<https://teams.microsoft.com/l/stage/be411542-2bd5-46fb-8deb-a3d5f85156f6/0?context>={"contentUrl":"https://teams-alb.wakelet.com/teams/collection/e4173826-5dae-4de0-b77d-bfabafd6f191","websiteUrl":"https://teams-alb.wakelet.com/teams/collection/e4173826-5dae-4de0-b77d-bfabafd6f191?standalone=true","title":"Quotes: Miscellaneous","threadId":"19:9UryYW9rjwnq-vwmBcexGjN1zQSNX0Y4oEAgtUC7WI81@thread.tacv2"}
Dirección URL codificada:
<https://teams.microsoft.com/l/stage/be411542-2bd5-46fb-8deb-a3d5f85156f6/0?context=%7B%22contentUrl%22%3A%22https%3A%2F%2Fteams-alb.wakelet.com%2Fteams%2Fcollection%2Fe4173826-5dae-4de0-b77d-bfabafd6f191%22%2C%22websiteUrl%22%3A%22https%3A%2F%2Fteams-alb.wakelet.com%2Fteams%2Fcollection%2Fe4173826-5dae-4de0-b77d-bfabafd6f191%3Fstandalone%3Dtrue%22%2C%22title%22%3A%22Quotes%3A%20Miscellaneous%22%2C%22threadId%22%3A%2219:9UryYW9rjwnq-vwmBcexGjN1zQSNX0Y4oEAgtUC7WI81@thread.tacv2%22%7D>
Ejemplo 2: Dirección URL sin threadId
Dirección URL sin codificar:
<https://teams.microsoft.com/l/stage/43f56af0-8615-49e6-9635-7bea3b5802c2/0?context>={"contentUrl":"https://teams-alb.wakelet.com/teams/collection/e4173826-5dae-4de0-b77d-bfabafd6f191","websiteUrl":"https://teams-alb.wakelet.com/teams/collection/e4173826-5dae-4de0-b77d-bfabafd6f191?standalone=true","title":"Quotes: Miscellaneous"}
Codificado
<https://teams.microsoft.com/l/stage/43f56af0-8615-49e6-9635-7bea3b5802c2/0?context=%7B%22contentUrl%22%3A%22https%3A%2F%2Fteams-alb.wakelet.com%2Fteams%2Fcollection%2Fe4173826-5dae-4de0-b77d-bfabafd6f191%22%2C%22websiteUrl%22%3A%22https%3A%2F%2Fteams-alb.wakelet.com%2Fteams%2Fcollection%2Fe4173826-5dae-4de0-b77d-bfabafd6f191%3Fstandalone%3Dtrue%22%2C%22title%22%3A%22Quotes%3A%20Miscellaneous%22%7D>
Nota:
Todos los vínculos profundos deben codificarse antes de pegar la dirección URL. No se admiten direcciones URL sin codificar.
- El
namees opcional en el vínculo profundo. Si no se incluye, el nombre de la aplicación lo reemplaza. - El vínculo profundo también se puede pasar a través de una acción
OpenURL. - Al iniciar una fase desde un contexto determinado, cerciórese de que la aplicación funciona en ese contexto. Por ejemplo, si la Vista extendida se inicia desde una aplicación personal, debe cerciorarse de que la aplicación tiene un ámbito personal.
Propiedad de información de pestaña
| Nombre de propiedad | Tipo | Número de caracteres | Descripción |
|---|---|---|---|
entityId |
Cadena | 64 | Esta propiedad es un identificador único para la entidad que muestra la pestaña. Este campo es obligatorio. |
name |
Cadena | 128 | Esta propiedad es el nombre para mostrar de la pestaña en la interfaz del canal. Este campo es opcional. |
contentUrl |
Cadena | 2048 | Esta propiedad es la dirección URL https:// que apunta a la interfaz de usuario de la entidad que se mostrará en el lienzo de Teams. Este campo es obligatorio. |
websiteUrl? |
Cadena | 2048 | Esta propiedad es la dirección URL de https:// a la que apuntar si un usuario selecciona ver en un explorador. Este campo es obligatorio. |
removeUrl? |
Cadena | 2048 | Esta propiedad es la dirección URL de https:// que apunta a la interfaz de usuario que se mostrará cuando el usuario elimine la pestaña. Se trata de un campo opcional. |
Ejemplo de código
| Ejemplo de nombre | Descripción | .NET | Node.js | Manifiesto |
|---|---|---|---|---|
| Pestaña en la vista extendida | Aplicación de ejemplo de pestaña de Microsoft Teams para mostrar la pestaña en la vista extendida. | View | View | View |