Todos ya conocen Microsoft Teams y sabemos la cantidad de opciones que nos brinda como empresa y como administradores de TI, podemos utilizar el chat, crear grupos, crear canales, colaborar y un largo etcétera.
Hoy veremos una de mis funciones favoritas de Teams para poder desarrollar uno de los pilares de la herramienta, la colaboración y automatización. Esta función es la posibilidad de utilizar tarjetas adaptativas, pero ¿qué son?
Para no entrar en detalles técnicos, son pequeñas interfaces de usuario que nos permiten interactuar con los usuarios de forma fácil y directa sin importar el dispositivo, si bien hoy veremos cómo configurar una tarjeta para integrarla a Teams con Power Automate (Flow), las tarjetas adaptativas también se pueden implementar en Windows, Outlook, Bots, entre otros.
Ejemplos
Las tarjetas se pueden utilizar para prácticamente todo, desde temas banales como pedir el menú del día en el restaurante, hasta temas corporativos como actualizaciones de flujos de procesos del ERP.
La tarjeta
En primer lugar, debemos configurar nuestra tarjeta adaptativa de acuerdo con lo que deseamos obtener, en nuestro caso haremos una tarjeta para el área de ventas para ingresar los requerimientos del día, se activará de forma automática todos los días a las 8am, este es solo un ejemplo y en la realidad podremos hacer lo que queramos.
La tarjeta anterior tiene dos métodos para ser elaborada, utilizando los parámetros JSON indicados en la documentación de Microsoft, o utilizando el diseñador de tarjetas, en este post no entraremos en detalles de cómo configurar la tarjeta debido a que cada una se debe personalizar para cada objetivo de uso.
Sin embargo, para aquellos que deseen conocer el JSON de la tarjeta anterior, es el siguiente:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "Pedido DATTICS del día XXXXX",
"horizontalAlignment": "Center"
},
{
"type": "TextBlock",
"text": "Producto"
},
{
"type": "Input.ChoiceSet",
"id": "producto",
"value": "1",
"choices": [
{
"title": "PC",
"value": "PC"
},
{
"title": "Laptop",
"value": "Laptop"
},
{
"title": "Software",
"value": "Software"
}
]
},
{
"type": "TextBlock",
"text": "Método de envío"
},
{
"type": "Input.ChoiceSet",
"id": "metodoEnvio",
"style": "expanded",
"value": "1",
"choices": [
{
"title": "Recogen en sitio",
"value": "Sitio"
},
{
"title": "Domicilio",
"value": "Domicilio"
},
{
"title": "Digital",
"value": "Digital"
}
]
},
{
"type": "TextBlock",
"text": "Colores del producto"
},
{
"type": "Input.ChoiceSet",
"id": "colores",
"isMultiSelect": true,
"value": "1,3",
"choices": [
{
"title": "Rojo",
"value": "Rojo"
},
{
"title": "Verde",
"value": "Verde"
},
{
"title": "Azul",
"value": "Azul"
}
]
},
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "Otros",
"horizontalAlignment": "Center"
},
{
"type": "Input.Toggle",
"title": "Hay orden de compra de confirmación",
"id": "confirmacion",
"value": "false",
"wrap": false
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Enviar",
"data": {
"id": "900925495"
}
}
]
}Es importante conocer dos elementos, el primero es que cada bloque tiene un ID, el cual nos permitirá seleccionar el valor más adelante en nuestro Flow y así poder integrarlo en otro aplicativo. El segundo, en los bloques de selección, cada opción tiene un título (title) y un valor (value), el primero es el texto que se muestra al usuario, el segundo es el valor que se envía como respuesta para nuestro Flow, en nuestro caso enviaremos la misma información del texto por facilidad.
El flujo
Procedemos a ingresar a Power Automate, luego a Mis flujos y por último, Nuevo Flujo Programado: desde cero.
Agregaremos un nombre al flujo e indicaremos que se ejecute todos los días a las 8am, luego haremos clic en Crear.
Se creará el flujo con un iniciador de programación automático, haremos clic en Nuevo Paso para agregar la acción donde enviaremos la tarjeta a nuestro canal comercial. Seleccionaremos la acción llamada “Publique una tarjeta adaptable en un canal de Teams y espere respuesta”.
La configuraremos con el grupo y canal que en el que deseamos publicar nuestra tarjeta, en el campo de mensaje, agregaremos el JSON de nuestra tarjeta, y podremos cambiar campos con Contenido Dinámico, para ello dejamos el espacio XXXX en nuestro título ya que agregaremos el día de forma dinámica con la expresión:
convertFromUtc(utcNow(),'SA Pacific Standard Time', 'dd-MM-yyyy')Una vez modificado el campo dinámico, nuestra acción queda así:
Luego de esto, procederemos a modificar los campos finales:
- Actualizar mensaje: Una vez el usuario haya ingresado la información, se actualizará la tarjeta para mostrar de forma automática el mensaje que indiquemos, este campo es opcional
- Se recomienda actualizar la tarjeta: Si deseamos que se actualice la tarjeta, indicamos que si, en caso contrario, indicamos No
Luego, agregaremos una acción para enviar a un correo cada solicitud, para esto agregamos cualquier método de correo, en este caso seleccionamos “Enviar una notificación por correo electrónico (V3)”.
Enviaremos el correo a la directora comercial, aunque podremos seleccionar cualquier buzón de correo electrónico que deseemos, el cuerpo del mensaje tendremos que seleccionarlo de forma manual debido a que aún no aparece la información como contenido dinámico, para nuestro caso, la fórmula luce así, aunque se deberá modificar para cada ítem.
@{body('Publique_una_tarjeta_adaptable_en_un_canal_de_Teams_y_espere_respuesta')?['data']?['producto']}La acción final queda compuesta de la siguiente manera:
Procedemos a probar el Flujo y verificar que todo funcione correctamente, veremos que el flujo de la tarjeta queda con un reloj naranja, lo cual indica que está a espera de respuesta, en caso de querer hacer algo si no hay respuesta, se puede realizar, pero no se indicará el proceso en este post.
Si ingresamos al canal que seleccionamos, veremos nuestra tarjeta adaptativa (¡mágico!), vemos que la fecha se ha modificado de forma automática. Procedemos a diligenciar la tarjeta y veremos cómo llega la información a nuestro Flow.
Tras hacer clic en Enviar, vemos que aparece el mensaje que hemos indicado antes:
Y si vamos a nuestro Flow, veremos que ya se ha terminado completamente y que el correo se ha enviado con la información que seleccionamos en la tarjeta, para el caso de la casilla de selección, el valor enviado por la tarjeta es True, si deseamos cambiarlo a otro valor, podríamos hacerlo con variables y selecciones.
Eso es todo, esperamos que puedan utilizar esta funcionalidad, la cual tiene usos ilimitados, adicionalmente, con el poder de Power Automate podremos integrar Dynamics 365, Adobe, nuestro ERP, CRM, Azure y hasta SAP por ejemplo (con Azure Logic Apps).
Recomendaciones
Si bien acá no lo hicimos, en Power Automate siempre se recomienda cambiar los nombres de los pasos, después de meses cuando se desea realizar una modificación a un flujo, verán la importancia de cambiar los nombres y agregar comentarios para hacerlo más descriptivo (los desarrolladores sabrán bien de esto).
Por simplicidad, hicimos que únicamente se enviara un correo, sin embargo, en la vida real, lo correcto sería almacenar cada respuesta en una base de datos, lista de Sharepoint, hoja de Excel, Common Data Service, en fin, cualquier alternativa que nos permita llevar un registro ya que los mismos no se guardan en Power Automate de forma indefinida.
Para convertir la hora a nuestro huso horario, utilizamos una fórmula, la verdad es porque me gusta más (es más rápido), pero hay una acción en Flow que nos puede convertir y manipular horas, si no deseas utilizar la fórmula puedes utilizar las acciones.