Imágenes alojadas en un SharePoint: ¿puedo publicarlas en Adaptive Cards? Ponemos Power Automate, Teams y Outlook a prueba.

 El pasado 14 de Julio presenté en una de las sesiones de cine de la #MaratonPowerPlatform cómo trabajar con Adaptive Cards, Teams y Power Automate. Estoy muy agradecida a todos los que siguieron la sesión y el feedback recibido fue fantástico. Solo espero poder tener otra ocasión de repetir una sesión parecida y dejarla pública para todos vosotros. Sino, siempre me tocará recuperar todo ese contenido en un vídeo más de mi canal de Youtube.

Una de las demandas principales que recibí durante la sesión era que explicara cómo se podía trabajar con imágenes dentro de las tarjetas adaptables. Muchos visteis que yo utilizaba imágenes públicas de internet y os surgió la duda si podíamos trabajar con imágenes en algún repositorio SharePoint. La respuesta es: y No.

A lo largo de la entrada de hoy os detallaré las 4 maneras que tenéis de insertar imágenes en Tarjetas Adaptables publicadas a través de Power Automate. He estado las últimas 3 semanas investigando y poniendo a prueba todas la maneras posibles, y sin duda destacaría estas 4. Nuestras dos herramientas de comunicación principales en la organización son Teams y Outlook, y aunque yo sea muy fan del "Teams Centric" habrá casos en los que queramos publicar la tarjeta adaptable en Outlook.

Las 4 maneras de insertar imágenes en Adaptive Cards

Os dejo por aquí el vídeo donde os hago una comparativa de las 4 maneras y cómo se visualizan (veremos que hay limitaciones en algunas de ellas) en las versiones web y desktop de Teams y Outook.

Resumen:

- Si trabajamos con imágenes de usuarios (imágenes de cuenta M365) podemos trabajar con la API de Teams si la única aplicación donde se publicará la tarjeta adaptable es Teams.

- Si trabajamos con cualquier otra imagen alojada en un repositorio de la organización, podemos codificar el contenido de la imagen en base 64 si la única aplicación donde se publicará la tarjeta adaptable es Teams.

- Por problemas de incompatibilidad entre Outlook web y desktop, de momento deberemos trabajar con imágenes de repositorios abiertos (públicos) en la web o con la API de outlook para obtener las imágenes de usuarios.

Aquí os dejo el código bien básico de mi Adaptive Card. ¡Atención! Este código es compatible con Teams, recordad que Outlook tiene compatibilidad total solo con 1.0 y que además, deberéis poner el campo providerID si no queréis que Outlook Desktop se queje:

A continuación os dejo las 4 versiones que tiene la URL en cada una de mis pruebas:

1. API de Teams:

"https://teams.microsoft.com/api/mt/emea/beta/users/[Insertar Mail usuario]/profilepicturev2?displayname=[Insertar Display Name Usuario]&voidCache=false"

2. URL pública directa a imagen de OneDrive (recordamos que la imagen es accesible para toda la organización)

"Sería del estilo: https://northeurope1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=png&cs=fFNQTw&docid=https%3A%2F%2Fpowertenant-my.sharepoint.com%3A443%2F_api%2Fv2.0%2Fdrives%2Fb!XUNPTban8EifF7F6XjKrD6s3t2-...."

3. URL de imagen subida en un repositorio SharePoint:

"https://[tu organización].sharepoint.com/sites/[tu sitio]/[tu carpeta]/[tu imagen.png/jpg/svg,etc.]"

4. Codificación en base 64 (recordamos que necesitamos obtener el contenido de la imagen, no su URL, y aplicarle la expresión base64() que nos ofrece Power Automate:

"data:image/png;base64,[output de aplicar base64() a nuestra imagen]"

Y por último y como siempre intento compartir, tenéis el flujo de Power Automate en .zip para que podáis descargarlo e importarlo en vuestro tenant, así podréis realizar pruebas. ¡Recordad de cambiar las URLs de la imágenes y de la organización!

https://github.com/Imari91/PowerAutomate-flows/tree/master 

¡Cualquier duda que tengáis, no dudéis en contactarme! Tengo centenares de vídeos y posts en la recámara, siempre a la espera de tener tiempo para publicarlos. Ante vuestras dudas siempre daré preferencia a unas u otras entradas :)