Cómo utilizar Adaptive Cards en Power Apps para crear interfaces de usuario personalizadas

Cuando necesitas una interfaz más rica que un bot pero no necesitas una aplicación completa, las Adaptive Cards son una manera útil de empaquetar una pequeña parte de la interfaz de usuario en un formato que se verá como parte de la aplicación en la que lo uses, ya sea Microsoft Teams, Microsoft Outlook o una aplicación que hayas construido en Power Apps, que se ejecute en Windows, Android o iOS.

Microsoft ha abierto el código fuente del marco de trabajo Adaptive Cards, que utiliza JSON para describir lo que Ryan Cunningham, VP de Power Apps en Microsoft, describe como "fragmentos de UI". Además, cuenta con un diseñador web gratuito para que los desarrolladores construyan Adaptive Cards.

VER: Análisis comparativo entre Google Workspace y Microsoft 365 con lista de verificación (Newsmatic Premium)

Aplicaciones de terceros como Priority Matrix de Apfluence y Webex Teams de Cisco utilizan Adaptive Cards para añadir funcionalidad a las herramientas de chat, de modo que los usuarios no tienen que cambiar a otra app para realizar alguna acción. Según Cunningham, el formato de las Adaptive Cards es "ampliamente utilizado: hay cientos de millones de personas que interactúan con una tarjeta adaptativa cada mes".

Adaptando las Adaptive Cards con código bajo

Aunque las Adaptive Cards son muy fáciles de usar, hasta ahora solo los desarrolladores profesionales podían construir estas micro aplicaciones.

Windows 11 versión 22H2: ¡La primera gran actualización de Windows 11 ya está disponible!

"No solo necesitas describir una tarjeta en código, también necesitas tener todos los servicios backend que hacen que suceda, que permiten que aparezca y manejen lo que ocurre cuando se hace clic en los botones," dijo Cunningham. "¿Cómo haces que sea más fácil para más personas innovar en experiencias, de manera que se unan los datos y la experiencia en toda la empresa?"

La nueva función de tarjetas en Power Apps te permite obtener los mismos resultados utilizando código bajo, trabajando en el familiar Power Apps Studio. El diseñador de tarjetas de arrastrar y soltar expone los controles y conectores que ya están disponibles en la Plataforma Power, para que puedas construir una tarjeta arrastrando y soltando botones, tablas, texto, imágenes, opciones, casillas de verificación, campos de entrada, contenedores y otros elementos.

Si deseas escribir lógica empresarial para filtrar información o realizar cálculos como cambiar el número que se muestra cuando los usuarios hacen clic en los botones de incremento o decremento, puedes utilizar Power FX, el lenguaje de expresiones basado en Excel que ya se utiliza en PowerApps y Power BI.

Adaptive Cards que se adaptan a la interfaz de la aplicación

Con las Adaptive Cards, eliges el contenido que se mostrará en la tarjeta, pero la aplicación en la que la utilizas controla la apariencia de la tarjeta para que se ajuste a la interfaz de usuario de la aplicación. El diseñador te muestra una vista previa de cómo se verá la tarjeta cuando las personas la utilicen en diferentes aplicaciones; inicialmente solo está disponible para Teams, pero puedes seleccionar el modo claro o oscuro. Copia la URL que muestra el diseñador y pégala directamente en un chat, canal o reunión de Teams; el tiempo de ejecución de las Adaptive Cards muestra la tarjeta y completa los datos adecuados, alojándola sin que necesites hacer trabajo adicional.

Figura A

Cómo extraer y dividir cadenas delimitadas en Microsoft Excel con Power Query

"Copio el hipervínculo y la tarjeta se aloja al instante", dijo Cunningham. "Cuando estoy en Teams, pego el hipervínculo en el flujo de conversación y se despliega automáticamente, al igual que cuando pego un enlace a un documento de Word. De inmediato, cualquier persona en este chat de Teams puede hacer clic en esos botones para votar a favor, votar en contra, añadir comentarios, ver los detalles, todo lo que esta tarjeta puede hacer".

Datos y código centralizados para mayor seguridad

La tarjeta en sí, el código que hace que funcione y los datos que se muestran en la tarjeta (o se recogen) se almacenan en Dataverse, el mismo lugar donde Power Apps y Dynamics 365 almacenan los datos comerciales. Esto mantiene los datos que se muestran en la tarjeta y cualquier dato nuevo que las personas creen utilizando una tarjeta seguro dentro de tu inquilino de Microsoft, donde se puede utilizar en otros flujos de trabajo y procesos.

"No se trata solo del pequeño rectángulo de experiencia de usuario: esta cosa está automáticamente conectada a un backend y está interactuando automáticamente con todos los demás en el chat", dijo Cunningham. "Lo puedo compartir como cualquier otro documento de Office, obtener un enlace para compartir y luego la magia comienza cuando estoy en estos otros entornos integrados en Microsoft 365".

Los desarrolladores profesionales ya podían ampliar Teams y otras aplicaciones de Microsoft 365 con este tipo de interacción personalizada, pero ahora muchas más personas podrán añadir exactamente la experiencia adecuada para las tareas en las que colaboran con sus colegas.

"Al incorporar esta micro experiencia esencial en Teams, significa que Teams ya no es solo un lugar para chatear y colaborar en aplicaciones en pantalla completa", señaló Cunningham. "Está democratizando cómo se utiliza la conversación misma como una aplicación: puedes integrar experiencias que sean increíblemente personalizadas".

¿Bot, Loop o tarjeta?

Ya existen varias formas de añadir interactividad en Teams, como los componentes Loop y los agentes virtuales de Power Virtual Agents, que son un tipo sencillo de chatbot.

Mejora la productividad de tu negocio con este software de correo electrónico

Al igual que los componentes Loop, las tarjetas son interactivas, se muestran en línea en diferentes aplicaciones y son fáciles de compartir: de hecho, Cunningham destacó que las tarjetas utilizan "gran parte de la misma tecnología subyacente que los componentes Loop". La diferencia es que mientras que los componentes Loop tienen una interfaz fija, como una lista o una tabla, las tarjetas se utilizan cuando se necesita una interfaz de usuario personalizada.

"Puedes pensar en esto casi como una forma de editar y crear exactamente el mismo tipo de cosa, pero con código bajo", dijo Cunningham.

Los agentes virtuales de Power también te proporcionan una experiencia de usuario ligera con botones para interactuar, pero las tarjetas te ofrecen más opciones cuando deseas tener un mayor control sobre el diseño y el funcionamiento de la interacción.

"Si quiero un proceso empresarial que requiere algún nivel de estructura y no es solo una conversación —hay botones que deben pulsarse, deslizadores que deben moverse, texto que debe capturarse—, es un poco más estructurado pero no necesariamente a pantalla completa, aislado fuera del flujo de trabajo", señaló Cunningham.

Las tarjetas son especialmente adecuadas para "procesos que son muy livianos en el momento o que son inherentemente colaborativos y en los que deseas que muchas personas se sienten alrededor de la mesa virtual para contribuir", sugirió.

Uso de Adaptive Cards en la vida real

Una organización sin fines de lucro en el estado de Washington que ofrece becas y programas de liderazgo a jóvenes en situación de riesgo ha estado utilizando la vista previa privada de Adaptive Cards en Power Apps. El comité que revisa las solicitudes de becas tiene un marco específico para tomar decisiones. Históricamente, el comité ya discutía estas solicitudes en Teams, pero lo hacían ingresando puntajes en una hoja de cálculo de Excel mientras conversaban sobre las aplicaciones.

Cómo aplicar un diseño de tabla incorporado en PowerPoint

"El problema es que las personas se influyen mutuamente: ¿cómo obtenemos aportes de cada individuo de una manera en la que no se influyan mutuamente?", preguntó Cunningham. "¿Cómo obtenemos datos de manera realmente estructurada? No hay software predeterminado para eso, pero esta organización sin fines de lucro puede construirlo ellos mismos en la Plataforma Power".

Los agentes virtuales de Power y las tarjetas pueden funcionar juntos como parte de un flujo de trabajo.

"Lo maravilloso de la Plataforma Power es que puedo combinar todo esto en una sola solución", dijo Cunningham. "Podré hacer que un agente virtual inicie una automatización que muestre una tarjeta en un chat. La tarjeta en sí misma puede dar inicio a una interacción posterior. Los datos de esta tarjeta pueden poblar una aplicación a pantalla completa más rica cuando las personas lo necesiten. Todos esos datos pueden ir a un panel de Power BI. Puedes adaptar la experiencia con la herramienta adecuada para el trabajo".

¿Cuándo estarán disponibles las Adaptive Cards?

Las tarjetas estarán disponibles como una característica de vista previa en Power Apps en octubre; inicialmente podrás pegar las URL de las tarjetas en Teams, pero cuando la función esté lista, también funcionarán en los correos electrónicos de Outlook. Debido a que las Adaptive Cards utilizan un marco de código abierto, Cunningham dio a entender que "se muestran en todo tipo de otros lugares; de hecho, puedes mostrarlas incluso más allá del ecosistema de Microsoft".

Las herramientas para construir tarjetas también recibirán características adicionales.

"Durante los próximos meses, a medida que esto se acerque a la disponibilidad general, añadiremos otras capacidades a la plataforma", dijo.

Cómo integrar GitHub y Jira para una mejor gestión de proyectos

Cunningham nos contó que esto incluirá el mismo asistente de código para ayudarte a escribir Power FX que ya está en la Plataforma Power. Esto ayudará a los usuarios a construir lógica empresarial más sofisticada en sus tarjetas.

Amplía tus conocimientos sobre las aplicaciones de Microsoft con el paquete de certificación Premium de Microsoft Office 2022 en Newsmatic Academy.

En Newsmatic nos especializamos en tecnología de vanguardia, contamos con los artículos mas novedosos sobre Software, allí encontraras muchos artículos similares a Cómo utilizar Adaptive Cards en Power Apps para crear interfaces de usuario personalizadas , tenemos lo ultimo en tecnología 2023.