Transferir imágenes y firmas desde Power Apps a Power Automate

En esta publicación, aprenderemos cómo transferir imágenes y firmas desde Power Apps a la plataforma Microsoft Power Automate. Esto es un poco difícil de hacer porque Power Apps no tiene una forma predeterminada de editar y cargar imágenes en SharePoint.

El ejemplo en el que trabajaremos es una aplicación de gastos que he usado antes. Básicamente, esta es una galería que se adjunta a una lista de SharePoint.

Y si selecciono algo en esta galería, básicamente actualiza este formulario en el lado derecho.

Luego puedo ir a este formulario a la derecha y editarlo.

Iremos a nuestra lista de SharePoint y agregaremos una columna de imagen llamada Firma .

Vayamos a Power Apps y agreguemos esa columna de imagen en este formulario. Así que haremos clic en Editar campos , luego en Agregar campo y seleccionaremos Firma en el campo desplegable.

Notarás que podemos agregarlo, pero no podemos hacer cosas como cargar imágenes. Si hacemos clic en Editar , por ejemplo, podemos editar todo menos actualizar la imagen de la firma. Si estamos haciendo esto en un iPad, sería bueno si pudiéramos usar la pantalla para escribir o escribir una firma antes de enviar este registro, pero desafortunadamente no podemos hacer eso.

Tabla de contenido

• Subir imágenes y crear firmas
• Creación de un flujo de plataforma de Microsoft Power Automate
• Conexión de Power Apps a la plataforma Microsoft Power Automate
• Definición de argumentos en Microsoft Power Automate Platform
• Crear una variable para cada imagen
• Conversión de código URI a código binario
• Conclusión

Subir imágenes y crear firmas

Power Apps no tiene una funcionalidad para eso, pero Power Automate puede venir al rescate y ayudarnos. Así que así es como podemos hacer eso.

Primero, necesitamos una forma para que un usuario envíe una imagen y dibuje una firma. Si hacemos clic en el signo +, agrega un nuevo informe de gastos, y si hacemos clic en la marca de verificación, aparece este cuadro emergente.

Si volvemos, no pasa nada. Pero si hacemos clic en Enviar , el informe de gastos pasa. Vamos a agregar una capacidad para que un usuario cargue una imagen y dibuje una firma. Así que vayamos a Medios y luego vayamos a Agregar imagen . Este control nos permite básicamente añadir fotos.

Y luego haga clic en Entrada y luego en Entrada de lápiz . Esto nos permite dibujar nuestra firma.

Hagamos este modelo un poco más grande para tener más espacio para hacer esto.

Y luego agregaremos algunas etiquetas a continuación solo para mostrarles a todos lo que estamos haciendo.

A la izquierda, la etiqueta dirá Cargar recibos y, a la derecha, será Por favor firme .

Creación de un flujo de plataforma de Microsoft Power Automate

Lo siguiente que debemos hacer es crear un flujo de Power Automate que básicamente tome el control de carga de recibos y el control de firmas y los cargue en nuestra biblioteca de documentos de gastos, recibos y firmas de SharePoint. Nuevamente, no hay forma de hacer esto directamente en Power Apps y tendremos que usar Power Automate.

Hagamos clic en Nuevo flujo y seleccione Flujo de nube instantáneo .

Seleccionaremos Power Apps como la forma de desencadenar este flujo, lo llamaremos UploadStuff y haremos clic en Create .

Iremos a nuestro conector de SharePoint y seleccionaremos Crear archivo .

Necesitamos una dirección de sitio y una ruta de carpeta, que en este caso se llama /recibosdegastosyfirma.

Para el nombre del archivo, probablemente queramos que el nombre del recibo de gastos y la firma sean idénticos al nombre del título real del recibo de gastos. Le pediremos a Power Apps el nombre del archivo y el contenido del archivo .

Luego haremos clic en Nuevo paso y luego haremos lo mismo nuevamente, porque necesitamos un archivo Crear para la foto del recibo de gastos real y otro para la firma que se cargará. Solo el contenido del archivo será diferente, lo que debemos solicitar dentro de Power Apps.

Ahora finalmente hemos creado nuestro flujo de trabajo.

Conexión de Power Apps a la plataforma Microsoft Power Automate

Lo último que debemos hacer es conectar Power Apps a Power Automate. Entonces, si agregamos un nuevo gasto y seleccionamos la marca de verificación, obtenemos este modelo nuevamente.

Si hacemos clic en el botón Enviar, todo lo que hace este modelo es enviar el formulario y volver a establecer la visibilidad en falso.

Tenemos que volver a la pantalla principal y activar este flujo. Pero primero, copiaremos lo que hay en la barra de efectos y lo cortaremos para que se guarde en nuestro portapapeles. Luego iremos a Acción , haremos clic en Power Automate y luego seleccionaremos UploadStuff , que es nuevamente el flujo de trabajo de Power Automate que acabamos de crear. Esto luego importará el flujo de trabajo a nuestras Power Apps.

Definición de argumentos en Microsoft Power Automate Platform

Necesitamos definir un grupo de argumentos que hemos especificado dentro de Power Automate. El primer argumento que debemos especificar es el nombre real del archivo que queremos llamarlo, que en nuestro caso será igual al título del informe de gastos que estamos enviando, que se almacena en DataCardValue1.

También necesitamos la imagen real del recibo que estamos cargando y pegamos todos los demás comandos que teníamos antes.

Ahora aquí es donde las cosas se ponen complicadas y por complicadas, desafortunadamente me refiero a muy complicadas. Si enviamos esto, lo que debería suceder es que UploadedImage1.Image y Pen.Input2.Image pasen por el flujo de trabajo y tendrán el contenido del archivo que se crearía.

Sin embargo, tenga en cuenta que UploadedImage1.Image en realidad no se refiere a la imagen en sí. Se refiere a una ruta que ha hecho Microsoft para saber dónde subir la imagen. Así que no es realmente el código de la imagen en sí mismo; es una ruta aleatoria a la que solo Microsoft tiene acceso. La imagen se guardará, pero será un archivo de texto aleatorio que no podrás entender.

Así que necesitamos hacer algunos ajustes usando este código:

Crear una variable para cada imagen

Lo primero que tenemos que hacer es crear una variable para cada imagen. Crearemos una variable llamada varImage1 que será igual a la representación JSON de la imagen cargada. También queremos incluir los datos binarios en el JSON.

Luego tomaremos la salida de esta función que se almacena en varImage1 y crearemos otra variable llamada varImageTrimmed , que básicamente toma varImage1 y corta los extremos usando la función Mid.

Tomamos la imagen cargada y la convertimos en un URI, un fragmento de código que se almacena en forma de texto que representa lo que realmente es la imagen. Luego tomamos eso y eliminamos los primeros dos caracteres y los dos últimos caracteres de ese texto, porque esos son identificadores de formato que no necesitamos.

Luego, haremos el mismo proceso para la firma y reemplazaremos la imagen con PenInput2 y la llamaremos varSig1 .

Conversión de código URI a código binario

Ya dijimos que Power Automate no es un camino aleatorio hacia una imagen; en cambio, es el código URI de la imagen en sí, que es básicamente la representación textual de esa imagen. No podemos simplemente pasar esa imagen de texto, por lo que debemos convertir el código que recibimos en un código binario que SharePoint pueda leer.

Todos los archivos están en código binario, por lo que debemos ir a Expresión y usar una función que convierta el URI en binario. Pondremos esta expresión en el elemento de contenido del archivo de esta acción y luego haremos clic en Guardar .

Lo único que nos queda por hacer es asegurarnos de que los archivos no tengan el mismo nombre. Queremos que el primer archivo sea la imagen y el segundo archivo la firma. Entonces podemos editar el primero con _receipt.jpg y el segundo con _signature.jpg.

Vamos a probarlo para ver si funciona. Comenzaremos con un nuevo informe de gastos para un nuevo iPad que cuesta $400.

Una vez que hacemos clic en la marca de verificación, podemos agregar la imagen y la firma.

Podemos cargar nuestro recibo y agregar nuestra firma.

A continuación, podemos hacer clic en Enviar . Para confirmar, vayamos a nuestra lista de SharePoint de envío de gastos para ver si se ha creado esa línea de pedido.

Además, si vamos a Recibos y firmas de gastos, vemos el nuevo recibo del iPad y la nueva firma del iPad, que corresponden al título del informe de gastos que acabamos de crear.

Estas son imágenes reales y en realidad podemos verlas, mientras que si lo hiciéramos a la antigua usanza, estos serían solo archivos de texto.

Conclusión

Piensa por un momento cuán poderoso es esto. Ahora tenemos una manera de crear una aplicación para que las personas tomen fotos y firmas, y las coloquen en un flujo de trabajo de la plataforma Microsoft Power Automate. En este caso, los estamos usando para almacenar archivos en bibliotecas de documentos. Lo más importante que aprendimos hoy es cómo mover datos relacionados con imágenes y firmas de Power Apps a Power Automate.

Si disfrutó del contenido cubierto en este tutorial en particular, no olvide suscribirse al canal de televisión LuckyTemplates. Tenemos una gran cantidad de contenido que sale todo el tiempo de mí y una variedad de creadores de contenido, todos dedicados a mejorar la forma en que usa LuckyTemplates y Power Platform.

Enrique