¿Cómo enviar una Adaptive Card por Teams y esperar su respuesta?

Escrito por  Juan Emilio Martínez

En el siguiente artículo veremos cómo utilizar Power Automate a fin de enviar una tarjeta adaptable (Adaptive Card) a Teams y esperar su repuesta para, luego, con el valor seleccionado por el usuario actualizar una lista de SharePoint.

¿Qué es una Adaptive Card?

Según Microsoft, tarjeta adaptable (Apdative Card) es el formato de intercambio de tarjeta abierta que permite a los desarrolladores intercambiar el contenido de la interfaz de usuario de una manera habitual y coherente.

¿Cómo crear una Adaptive Card?

Nos dirigimos a la url https://adaptivecards.io/ y luego pulsamos en la pestaña "Designer", ahí mismo encontraremos ejemplos, documentación controles y sus propiedades.

Una vez que estamos en "Designer", diseñamos la tarjeta según nuestras preferencias y gustos, en mi caso, es una tarjeta sencilla, que contará con un título , una pequeña descripción, un control de opciones y dos botones con las opciones "SI" y "NO".

Imagen 1.- Diseñando la Adaptive Card en el Designer.

El control de opciones "Imput.Choice" nos permitirá, entonces, ofrecerle al usuario opciones. Este puede presentarse mediante un combo u en opciones de selección. A continuación se puede observar el json utilizado para el imput.choice

1 {
2 "type": "Input.ChoiceSet",
3 "id": "MiAprobacion",
4 "isRequired": true,
5 "errorMessage": "Debe seleccionar una opción",
6 "placeholder": "Seleccione la opción deseada",
7 "choices": [
8 {
9 "title": "Si",
10 "value": "SI"
11 },
12 {
13 "title": "No",
14 "value": "No"
15 }
16 ],
17 "style": "expanded"
18 }
19
typeTipo de control
idId del control y variable que después utilizamos en Teams para actualizar un determinado campo
isRequiredSi el campo es obligatorio
errorMessageMensaje para mostrar en caso de que el control tenga isRequired en true
placeholderOpción para mostrar en el placerholder (Marca de agua, en el caso de ejemplo no es necesario)
choicesOpciones para mostrar y su valor interno
StyleForma del control, Expanded/Compact

Código json completo de la tarjeta:

1{
2 "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
3 "type": "AdaptiveCard",
4 "version": "1.3",
5 "body": [
6 {
7 "type": "TextBlock",
8 "text": "Revista CompartiMoss",
9 "id": "Title",
10 "spacing": "Medium",
11 "horizontalAlignment": "Center",
12 "size": "ExtraLarge",
13 "weight": "Bolder",
14 "color": "Accent"
15 },
16 {
17 "type": "TextBlock",
18 "text": "Hola lectores, ¿les gusta el articulo?",
19 "id": "acHeaderTagLine",
20 "separator": true
21 },
22 {
23 "type": "Input.ChoiceSet",
24 "id": "MiAprobacion",
25 "isRequired": true,
26 "errorMessage": "Debe seleccionar una opción",
27 "placeholder": "Seleccione la opción deseada",
28 "choices": [
29 {
30 "title": "Si",
31 "value": "SI"
32 },
33 {
34 "title": "No",
35 "value": "No"
36 }
37 ],
38 "style": "expanded"
39 }
40 ],
41 "actions": [
42 {
43 "type": "Action.OpenUrl",
44 "title": "Ver Articulo",
45 "url": "https://www.compartimoss.com/"
46 },
47 {
48 "type": "Action.Submit",
49 "title": "Enviar Respuesta"
50 }
51 ]
52}
53

Como observamos en los dos botones finales, uno posee el "type" OpenUrl, el cual abrirá una nueva ventana de nuestro navegador con la página ingresada en "url", mientras que el segundo, posee "Summit", esto nos permite obtener la respuesta seleccionada por el usuario en el imput.Choice en la variable "MiAprobacion". Una vez realizada esta acción, accedemos a Power Automate y creamos un Flow que se ejecute cada vez que se crea un elemento, luego añadimos el componente de Teams para enviar una tarjeta adaptable y esperar la respuesta, y luego el componente para actualizar el item de SharePoint

Imagen 2.- Trigger del Flow de Power Automate a crear.

Imagen 3.- Acciones dentro del Flow a crear.

En el componente de Teams, configuramos las siguientes opciones:

Post asFlow Bot
Post inChat With Flow Bot
MessageNuestra tarjeta en JSon
Update message (Dicho mensaje actualiza la tarjeta una vez que el usuario realizó la acción)Gracias!
RecipientDestinatario de la tarjeta

Luego, actualizamos el Update Item, con la variable "MiAprobacion", que, como mencioné, es el resultado seleccionado por el usuario.

Imagen 4.- Configuración de la acción Update Item.

Al finalizar completamos el campo Respuesta y guardamos el Flow.

Resultado final:

  1. Creamos el elemento

Imagen 5.- Elemento a crear.

  1. La Adaptive Card llega a nuestro Teams:

Imagen 6.- Adaptive Card enviada a Teams.

  1. Respondemos y enviamos la respuesta, inmediatamente se actualiza la Adaptive Card

Imagen 7.- Respondiendo en la Adaptive Card.

  1. Vemos en nuestro sitio SharePoint que el elemento efectivamente se actualizó.

Imagen 8.- Resultado en SharePoint.

Links útiles para este artículo:

Juan Emilio Martínez
Ing. En Sistemas de Información | Líder SharePoint y Power Plataform en Nación Servicios S.A. | Consultor Independiente
Linkedin

Siguemos en LinkedInSiguemos en Twitter
Powered by  ENCAMINA