Diseño de Tarjetas adaptables para la aplicación - Teams (2023)

  • Artículo
  • Tiempo de lectura: 10 minutos

Una tarjeta adaptable contiene un cuerpo de forma libre de elementos de tarjeta y un conjunto opcional de acciones. Las Tarjetas adaptables son fragmentos de contenido accionables que puede agregar a una conversación a través de un bot o de una extensión de mensajería. Con texto, gráficos y botones, estas tarjetas proporcionan una comunicación enriquecida a la audiencia.

El marco de tarjeta adaptable se usa en muchos productos de Microsoft, incluido Teams. Puede enviar tarjetas dentro de mensajes a los usuarios a través de bots o de extensiones de mensajería. Los usuarios también pueden realizar acciones en las tarjetas cuando estén presentes.

Diseño de Tarjetas adaptables para la aplicación - Teams (1)

Kit de UI de Microsoft Teams

En el Kit de UI de Microsoft Teams encontrará instrucciones de diseño de bot más completas, que incluyen elementos que puede usar y modificar como quiera. El kit de interfaz de usuario también trata temas esenciales como temas, accesibilidad y ajuste de tamaño con capacidad de respuesta.

Diseñador de tarjetas adaptables.

También puede empezar a diseñar el Tarjetas adaptables directamente en el explorador.

Tipos de Tarjetas adaptables

Elemento principal

Nuestra tarjeta más grande. Se usa para compartir artículos o escenarios en los que una imagen cuenta la mayor parte de la historia.

Móvil

Diseño de Tarjetas adaptables para la aplicación - Teams (2)

Escritorio

Diseño de Tarjetas adaptables para la aplicación - Teams (3)

Miniatura

Se usa para enviar un mensaje sencillo que requiere acción.

(Video) Adaptive Cards en Microsoft Teams | Edgard Alejos | Microsoft Teams Day 2022

Móvil

Diseño de Tarjetas adaptables para la aplicación - Teams (4)

Escritorio

Diseño de Tarjetas adaptables para la aplicación - Teams (5)

Lista

Se usa en escenarios en los que desea que el usuario elija un elemento de una lista, pero los elementos no necesitan muchas explicaciones.

Móvil

Diseño de Tarjetas adaptables para la aplicación - Teams (6)

Escritorio

Diseño de Tarjetas adaptables para la aplicación - Teams (7)

Digest

Se usa para resúmenes de noticias y publicaciones de redondear. Nota: Se recomienda la tarjeta miniatura para una sola actualización o elemento de noticias.

Móvil

Diseño de Tarjetas adaptables para la aplicación - Teams (8)

Escritorio

Diseño de Tarjetas adaptables para la aplicación - Teams (9)

Multimedia

Úselo cuando quiera combinar texto y elementos multimedia, como audio o vídeo.

Móvil

Diseño de Tarjetas adaptables para la aplicación - Teams (10)

Escritorio

Diseño de Tarjetas adaptables para la aplicación - Teams (11)

Contactos

Se recomienda cuando se transmite de forma eficaz quién está implicado en una tarea.

Móvil

Diseño de Tarjetas adaptables para la aplicación - Teams (12)

Escritorio

Diseño de Tarjetas adaptables para la aplicación - Teams (13)

Solicitar vale

Se usa para obtener entradas rápidas de un usuario para crear automáticamente una tarea o un vale.

(Video) Getting Started with Creating Adaptive Cards for Microsoft Teams

Móvil

Diseño de Tarjetas adaptables para la aplicación - Teams (14)

Escritorio

Diseño de Tarjetas adaptables para la aplicación - Teams (15)

ImageSet

Se usa para enviar varias miniaturas de imagen.

Móvil

Diseño de Tarjetas adaptables para la aplicación - Teams (16)

Escritorio

Diseño de Tarjetas adaptables para la aplicación - Teams (17)

ActionSet

Úselo cuando quiera que el usuario seleccione un botón y, a continuación, recopile la entrada adicional del usuario de la misma tarjeta.

Móvil

Diseño de Tarjetas adaptables para la aplicación - Teams (18)

Escritorio

Diseño de Tarjetas adaptables para la aplicación - Teams (19)

ChoiceSet

Se usa para recopilar varias entradas del usuario.

Móvil

Diseño de Tarjetas adaptables para la aplicación - Teams (20)

Escritorio

Diseño de Tarjetas adaptables para la aplicación - Teams (21)

Anatomía

Las tarjetas adaptables tienen mucha flexibilidad. Pero, como mínimo, se recomienda incluir los siguientes componentes en cada tarjeta.

Móvil

Diseño de Tarjetas adaptables para la aplicación - Teams (22)

ContadorDescripción
AEncabezado: haga que los encabezados sean claros y concisos.
Ncopia del cuerpo: transmita detalles que son demasiado largos o no son lo suficientemente importantes como para incluirlos en el encabezado.
CAcciones principales: como procedimiento recomendado, incluya de 1 a 3 acciones principales. Puede tener hasta seis.

Escritorio

Diseño de Tarjetas adaptables para la aplicación - Teams (23)

ContadorDescripción
AEncabezado: haga que los encabezados sean claros y concisos.
Ncopia del cuerpo: transmita detalles que son demasiado largos o no son lo suficientemente importantes como para incluirlos en el encabezado.
CAcciones principales: como procedimiento recomendado, incluya de 1 a 3 acciones principales. Puede tener hasta seis.

Procedimientos recomendados

Las tarjetas diseñadas para una pantalla estrecha se escalan bien en pantallas más anchas (lo contrario no es cierto). También debe suponer que los usuarios no solo verán las tarjetas en el escritorio.

(Video) Adaptive Cards in Microsoft Teams using Power Automate | Beginners Tutorial

Diseños de columna

Use ColumnSet para dar formato al contenido de la tarjeta en una tabla o cuadrícula. Hay varias opciones para dar formato al ancho de columna. Estas directrices le ayudan a comprender cuándo usar cada una de ellas.

  • "width": "auto": cambia el tamaño de cada columna del ColumnSet para ajustarse al contenido de la aplicación que incluya en esa columna.
    • Hacer: se usa cuando tiene contenido de ancho variable y no es necesario dar prioridad a una columna específica.
    • Hacer: para cada TextBlock, establezca "wrap": true ya que el texto no se ajusta de forma predeterminada.
    • No hacer: establezca "width": "auto" para cada contenedor de columnas. Por ejemplo, si tiene una entrada y un botón en paralelo, es posible que el botón se corte en algunas pantallas. En su lugar, establezca auto para la columna con botones y otro contenido que siempre debe estar completamente visible.
  • "width": "stretch": tamaño de las columnas según el ColumnSetwidth disponible. Cuando varias columnas usan el valor "stretch", comparten igualmente el ancho disponible.
    • Hacer: se usa con una columna si todas las demás columnas tienen un ancho estático. Por ejemplo, tiene imágenes en miniatura en una columna que son todas de 50 píxeles de ancho.
  • "width": "<number>": Ajusta el tamaño de las columnas con una proporción del ancho ColumnSet disponible. Por ejemplo, si establece tres columnas con "width": "1", "width": "4" y "width": "5", las columnas ocuparán un 10, 40 y un 50 por ciento del ancho disponible.
  • "width": "<number>px": Ajusta tamaño de las columnas en un ancho de píxel específico. Este enfoque es útil al crear tablas.
    • Hacer: se usa cuando no es necesario cambiar el ancho de lo que se muestra (por ejemplo, números y porcentajes).
    • No hacer: supera accidentalmente el ancho de lo que puede mostrar la tarjeta. Recuerde que el ancho de pantalla disponible depende del dispositivo. Teams Mobile tampoco admite el desplazamiento horizontal como el escritorio de Teams.

Ejemplo: saber cuándo se deben ampliar las columnas

  • Diseño
  • Código

Hacer: en esta pantalla, hay dos columnas en la parte inferior de la tarjeta. El ancho del componente de entrada se establece en stretch, mientras que el ancho del botón Seleccionar se establece en auto. Esto garantiza que el botón permanece completamente a la vista.

Diseño de Tarjetas adaptables para la aplicación - Teams (24)

No hacer: en esta pantalla, ambas columnas estánwidthestablecidas en auto. Esto hace que el botón Seleccionar de la derecha se corte ligeramente en comparación con la entrada.

Diseño de Tarjetas adaptables para la aplicación - Teams (25)

Ejemplo: Uso de menos columnas

Hacer: los diseños tienden a mostrarse mejor en dispositivos móviles con menos columnas.

Diseño de Tarjetas adaptables para la aplicación - Teams (26)

No hacer: el uso de demasiadas columnas puede saturar el contenido de la tarjeta en dispositivos móviles.

Diseño de Tarjetas adaptables para la aplicación - Teams (27)

Ejemplo: el ancho fijo tiene su lugar

  • Diseño
  • Código

Cuando no sea necesario cambiar el tamaño de algo que se muestra, establezca las columnas en un ancho de píxel específico. En este ejemplo se muestra la columna izquierda con un tamaño de 50 píxeles, mientras que las descripciones situadas junto a las miniaturas amplían la longitud de la tarjeta.

Diseño de Tarjetas adaptables para la aplicación - Teams (28)

Text

Ya sea que este usando TextBlock, ColumnSet, o Input.ChoiceSet, establezca la wrap propiedad en true para que su texto de tarjeta no quede truncado en los dispositivos móviles.

Ejemplo: Asegurarse de que el texto no se trunca

  • Diseño
  • Código

Hacer: en esta pantalla, la tarjeta tiene una propiedad wrap establecida en true. Esto permite que el texto se ajuste a cualquier tamaño de pantalla.

Diseño de Tarjetas adaptables para la aplicación - Teams (29)

No hacer: en esta pantalla, la tarjeta no usa la propiedad wrap, por lo que el texto se corta en una pantalla móvil.

Diseño de Tarjetas adaptables para la aplicación - Teams (30)

(Video) Teams Development: Introduction to Adaptive Cards

Contenedores

Un Container permite agrupar un conjunto de elementos relacionados.

  • Hacer: use la propiedad style para enfatizar un contenedor.
  • Hacer: use la propiedad selectAction para asociar una acción a los demás elementos del contenedor.
  • Hacer: use la propiedad Action.ToggleVisibility para contraer un grupo de elementos.
  • No hacer: use contenedores por cualquier motivo distinto al mencionado anteriormente.

Imágenes

Siga estas instrucciones al incluir imágenes en las tarjetas.

  • Hacer: diseña imágenes para pantallas con valores altos de PPP para evitar la pixelación. Es mejor mostrar una imagen de 100x100 píxeles a 50x50 píxeles que al revés.
  • Hacer: si necesita controlar el tamaño exacto de las imágenes, use las propiedades width y height.
  • No hacer: incluir relleno con las imágenes. Esto suele introducir problemas de espaciado y diseño no deseados.
  • Con respecto al color de fondo:
    • Hacer: use fondos transparentes para que las imágenes se adapten a cualquier tema de Teams.
    • No hacer: incluye un color de fondo fijo a menos que un color específico sea visible para los usuarios.
    • No hacer: Agrega un color de fondo a un TextBlock que afecta a la legibilidad. Por ejemplo, si el fondo es oscuro, use un color de texto más claro y viceversa.

Acciones

Diseño de Tarjetas adaptables para la aplicación - Teams (31)

Hacer: Usar hasta seis acciones principales

Aunque Tarjetas adaptables puede admitir seis acciones principales, la mayoría de las tarjetas no lo necesitan. Las acciones deben ser claras, concisas y directas. Menos es más.

Diseño de Tarjetas adaptables para la aplicación - Teams (32)

No: Usar más de seis acciones principales

Tarjetas adaptables debe presentar contenido rápido y accionable. Demasiadas acciones pueden sobrecargar a un usuario.

Frecuencia

Diseño de Tarjetas adaptables para la aplicación - Teams (33)

Do: Sea conciso

Es fácil enviar varias tarjetas a una conversación, pero una vez que las tarjetas se desplazan fuera de la vista, resultan menos útiles. Intente limitarse a lo esencial. Esto es especialmente cierto en un canal en el que los usuarios tienen menos tolerancia a lo que perciben como "ruido".

Consulte también

  • Tarjetas y módulos de tareas
  • Tarjetas y módulos de tareas admitidos en el bot de Teams
  • Trabajar con Acciones universales para tarjetas adaptables
  • Responder a la acción de envío del módulo de tareas
  • Vistas específicas de usuario

FAQs

What is an adaptive card in Teams? ›

Adaptive Cards are actionable snippets of content that you can add to a conversation through a bot or message extension. Using text, graphics, and buttons, these cards provide rich communication to your audience. The Adaptive Card framework is used across many Microsoft products, including Teams.

How do you make an adaptive card for a team? ›

Select Create. Select New Step. Search for Microsoft Teams, and then select Post an adaptive card to a Teams channel and wait for a response as the action. Select the Team and the Channel to which you'd like to post the card.

What version of adaptive cards does Teams support? ›

Support for Adaptive Cards

Teams platform supports v1. 5 or earlier of Adaptive Card features for other capabilities, such as cards sent by user (search based message extensions and link unfurling), tabs, and task modules.

What is the use of adaptive cards? ›

Adaptive Cards are a platform-agnostic method of sharing and displaying blocks of information without the complexity of customizing CSS or HTML to render them. You author Adaptive Cards in JSON format, with integrations that cloud apps and services can openly exchange.

How do I get response from adaptive card? ›

Add a step, click on Teams, Post an Adaptive Card and wait for a response. Choose your channel or chat option, and in the body copy/paste the code from the designer or Adaptive Card in your Adaptive Card message body.

What are the three actions of adaptive cards? ›

Adaptive Cards actions
  • OpenUrl.
  • Submit.
  • ShowCard.
  • Execute.
Jan 13, 2023

How do you make yourself green on a team? ›

Set Your Status to 'Busy' or 'Do not Disturb'

The other tactic to avoid being 'Away' and keeping your Teams status available is by setting your online presence to busy. In this case, to keep your Teams status available you need to go to your profile avatar, set status (Available), and choose the Duration entry.

How do you make a team accessible? ›

Include live captions

Microsoft Teams can detect what's said in a meeting or live event and present real-time captions. Live captioning provides everyone an equal opportunity to access and enjoy the meeting or event. In a Microsoft Teams meeting, you can use the live captions straight from the meeting window.

How do you Authorise a team? ›

To allow Microsoft Teams to run in Workspace Control managed user sessions, follow these steps: Enable the Authorized Owners feature. Open the Workspace Control Console and navigate to Security > Authorized Owners > Settings tab or Workspace Container. Set the Authorized Owners option to Enabled.

Can I use Teams for remote support? ›

Microsoft Teams meeting has an option to remotely access and control another computer. One user can easily cede control while another takes control of the shared content in Microsoft Teams during a session.

Does Teams allow remote control? ›

To take control while another person is sharing, select Request control. The person sharing can then approve or deny your request. While you have control, you can make selections, edits, and other modifications to the shared screen. When you're done, select Release control to stop sharing control.

Does Teams support 360 camera? ›

SmartVision 60 is the first center-of-room, 360 panoramic degree camera for Teams Rooms. Designed for medium Microsoft Teams Rooms, this all-in-one camera is packed with smart AI features to provide an inclusive, immersive and intelligent experience for participants.

What are valid primary elements of an adaptive card? ›

Adaptive Elements

The most fundamental elements are: TextBlock - adds a block of text with properties to control what the text looks like. Image - adds an image with properties to control what the image looks like.

What are actionable messages? ›

Actionable Messages enable you to extend the functionality of email messages in Outlook to give recipients the ability to take quick actions in an Adaptive Card without leaving Outlook.

How do I refresh my adaptive card? ›

To automatically refresh your Adaptive Card, define its refresh property, which embeds an action of type Action. Execute and an userIds array. For more information, see refresh schema and properties.

What is adaptive card extension? ›

Adaptive Card Extensions (ACEs) are a new SharePoint Framework component type, which enables developers to build rich, native extensions to Viva Connections' Dashboards and SharePoint Pages.

How do you render adaptive cards? ›

Render a card

After you acquire a card payload, simply call the renderer and pass in the card. You will get back a native UI object made up of the card contents. Now just put this UI somewhere in your app.

How can adaptive cards be used in task modules? ›

Submit card action for Adaptive Cards, with task/fetch , task module either a URL or an Adaptive Card, is fetched dynamically from your bot. Deep link URLs: Using the deep link syntax for task modules, you can use the openUrl card action for Bot Framework cards or the Action.

How do you use action execute? ›

Execute. Gathers input fields, merges with optional data field, and sends an event to the client. Clients process the event by sending an Invoke activity of type adaptiveCard/action to the target Bot.

What is a card action? ›

CardAction. A clickable menu item that is added to the card header menu.

How long can you stay green on Teams? ›

How long until Teams shows away? Your active status on Microsoft Teams will time out and go to “Away” after 5 minutes of inactivity.

Why does Teams show me as away? ›

Note that Teams will automatically set your status from Available to Away when you lock your computer or when it enters idle or sleep mode. On mobile, this will happen when the Teams app is in the background. Busy is when you want to focus on something, and you do want notifications to pop up.

How do I stop my team from showing away? ›

Your status will show as “Away” if the app is running in the background. To keep this from happening, you'll need to keep the Teams app on in the foreground as long as you're using it on your mobile device.

How do I give administrative privileges to my team? ›

Assign a user role in Teams admin center
  1. In the Teams admin center, expand Teams and select Manage teams.
  2. Select the team name under the display name column.
  3. In the Members tab, you can add or remove members and assign owner and moderator roles to members.
Nov 30, 2022

How do you make a disabled person accessible? ›

Buildings should also have an accessible entrance. A common and easy solution is to install a ramp to the entrance to your building. Not only would a ramp create better mobility, but promote more independence by allowing everyone equal ease of access to the interior space.

How do you prove a good team member? ›

How to be a better team player
  1. Offer help. If you see a coworker who seems overwhelmed or is struggling to keep up with tasks, ask if you can help. ...
  2. Actively listen. ...
  3. Communicate. ...
  4. Respect others. ...
  5. Be a problem-solver. ...
  6. Celebrate teammates' successes.

How do Teams permissions work? ›

The “Files” of the Team and SharePoint Permissions

Owners and Members have the ability to share rights to any files or pages–the entire site collection, even–to anyone in the organization. This means that any files stored or shared inside a Team are subject to the sharing and permissions rules of SharePoint.

Can anyone add member to Teams? ›

If you're a team owner, you can add a team member to a team. If you're not a team owner, you can submit a request and the team owner can accept or deny it. and type the person's name. If you want to add multiple people to an existing team, go to the desktop or web app.

Can Teams be used as a phone? ›

Phone System features

With Phone System, users can use Teams to place and receive calls, transfer calls, and mute or unmute calls. Phone System users can click a name in their address book, and place Teams calls to that person.

How can I build team while working remotely? ›

Remote team-building activities that boost collaboration and trust
  1. Gather around the virtual watercooler. ...
  2. Promote face-to-face communication with video conferencing. ...
  3. Offer volunteer opportunities outside the office. ...
  4. Offer peer-to-peer learning opportunities. ...
  5. Budget for in-person meet-ups.

Why give control is disabled in Teams? ›

Potential reason 1: The meeting organizer has disabled the ability to give or request control from external participants. Learn how to fix this. Potential reason 2: Your device may not have a GPU or hardware acceleration enabled.

Does Microsoft Teams track camera? ›

Yes, Teams video calls can be monitored if they are made as meetings. To avoid this, you can create the meeting as a call and then share your screen or camera.

Does the Teams app use camera? ›

In Teams for personal and small business use, you can use Camera to capture pictures and videos with your mobile device and share them with all of your contacts and groups. Note: The Camera feature is currently only available on Teams for iOS and Android. Learn more about how to send a video clip in Teams on desktop.

Can Microsoft Teams turn on camera? ›

Make sure that both 'Microphone' and 'Camera' are set to On. (The switch should turn green). You should now be able to use audio and video conferencing within the Teams App. Make sure that the option for 'All Websites' is set to 'Off'.

How do I make my photos ADA compliant? ›

To ensure your images are accessible and ADA compliant on your website, you should include alt tags. They provide text captions and text descriptions for images. Side note - images include photos, vector graphics, and icons.

How do I increase the size of my adaptive card? ›

The width of Adaptive Cards in the Teams client is determined by the Teams client itself based on the current viewing area width - you cannot directly influence this value.

How do I add credit to my photography? ›

If you're using it in a blog post or on your website, put the name of the creator and a link to their website or the source of the image beneath it. The format should be something like this: “Photo by [artist name with their website hyperlinked]” or “Image by [artist name] via [website hyperlinked].”

What is adaptive team card? ›

Adaptive Cards are actionable snippets of content that you can add to a conversation through a bot or message extension. Using text, graphics, and buttons, these cards provide rich communication to your audience. The Adaptive Card framework is used across many Microsoft products, including Teams.

How do I post an adaptive card? ›

Search for Microsoft Teams, and then select Post an adaptive card to a Teams channel and wait for a response as the action. Select the Team and the Channel to which you'd like to post the card. Paste this JSON into the Message box.

What are adaptive elements? ›

Adaptive Elements Platform (AE) is a solution that enables the rapid development of native mobile apps by (re)using adaptive elements as building blocks. It allows banks to be innovative, quickly react to customer feedback, and create new and relevant products and services.

How do I turn off actionable messages? ›

Organization Control for Actionable Messages

If you wanted, you can run Set-OrganizationConfig to set the value to False to disable actionable messages.

How do I turn on actionable messages? ›

Office 365 administrators can disable actionable messages via the Set-OrganizationConfig cmdlet. If actionable messages do not render, check with your administrator to make sure the feature is enabled in your organization.

What is an actionable decision? ›

The term "actionable" refers to a business directive or investment strategy that can feasibly be accomplished shortly. Company managers and investors try to identify things that are immediately actionable because they may be prerequisites for accomplishing future goals and higher-level directives.

How do you trick Microsoft Teams to stay green? ›

Install Caffeine on Windows to keep your Team's status active. Windows users can install a fantastic little app called Caffeine to keep their computer awake and their Teams status active.

What are adaptive cards SharePoint? ›

Adaptive Card Extensions (ACEs) are a new SharePoint Framework component type, which enables developers to build rich, native extensions to Viva Connections' Dashboards and SharePoint Pages.

How do you create a task module in a team? ›

You can create the task module using an Adaptive Card or an embedded web view. To create a task module, you must perform the process called the initial invoke request.

How do you make it look like you're not away on Teams? ›

To explicitly set it yourself, go to your profile at the top of Teams and select one from the list. You can also update your status from the command box. Type /available, /busy, /dnd, /brb, /away, or /offline to set your status as Available, Busy, Do not disturb, Be right back, Away, or Offline.

How do you stop a team from going idle? ›

How to Keep Teams from Going Idle: 6 Things to Try
  1. 1 Make sure Teams is up to date.
  2. 2 Keep your computer from going idle.
  3. 3 Close the Teams mobile app when you aren't using it.
  4. 4 Update your status in your Outlook calendar.
  5. 5 Configure your presence status manually.
  6. 6 Install a mouse mover app if all else fails.
Aug 3, 2022

How do I deploy an adaptive card in SharePoint? ›

There is a handy-dandy web part called Card maker that lets you embed Adaptive Cards on any SharePoint page. So to start, go to Microsoft App Source and get yourself the web part. Once you click on Get it now you need to follow a couple of prompts to enable the web part to become available to your SharePoint admins.

How do I send an adaptive card in Outlook? ›

To send Adaptive Card as an Actionable Message first go to https://adaptivecards.io/designer/ and switch “host app” to “Outlook Actionable Messages”: This will automatically set version to 1.0 and change schema validation to allow you to insert all those exceptions I mentioned above. Now design your card. Important!

Videos

1. Getting started on building Microsoft Teams tabs with Adaptive Cards
(Microsoft 365 Community)
2. Adaptive Cards for Microsoft Teams
(Preact)
3. Getting Data from an Adaptive Card in Microsoft Teams
(Flow Joe)
4. Use Adaptive Card Templates to Build Bots in Microsoft Teams
(Microsoft 365 Developer)
5. Adaptive cards in Teams
(Microsoft Developer)
6. Get started building Microsoft Teams apps
(Microsoft 365 Developer)
Top Articles
Latest Posts
Article information

Author: Carmelo Roob

Last Updated: 12/11/2022

Views: 6249

Rating: 4.4 / 5 (45 voted)

Reviews: 92% of readers found this page helpful

Author information

Name: Carmelo Roob

Birthday: 1995-01-09

Address: Apt. 915 481 Sipes Cliff, New Gonzalobury, CO 80176

Phone: +6773780339780

Job: Sales Executive

Hobby: Gaming, Jogging, Rugby, Video gaming, Handball, Ice skating, Web surfing

Introduction: My name is Carmelo Roob, I am a modern, handsome, delightful, comfortable, attractive, vast, good person who loves writing and wants to share my knowledge and understanding with you.