Aprende a guardar imágenes en SharePoint con PowerApps

Una función que es pedida a menudo en las Power Apps es la de permitirle al usuario guardar imágenes. Para los usuarios en plataformas móviles es el tomar una foto con la cámara del dispositivo mientras que para los usuarios en escritorio es la habilidad de seleccionar una imagen de una carpeta para subirla. El Power Apps ‘Control Add Picture’ nos permite hacer todo lo anterior, así como también cuenta con una mejor experiencia para el usuario en comparación al control de cámara de Power Apps, por lo que será preferible usar este en adelante.

En este artículo vamos a mostrar cómo usar Control Add Picture y guardar las imagenes a una biblioteca de SharePoint.

APP PHOTO GALLERY

La app Photo Gallery es usada para almacenar imágenes, de esta manera los usuarios toman una foto con un dispositivo móvil, le dan un nombre a la imagen y la suben a SharePoint. Empezaremos creando una nueva biblioteca de documentos de SharePoint llamada «Imágenes de Blog».

Añadiremos una columna de texto a la biblioteca llamada «Título»

Y pondremos varias fotos con leyendas dentro de la biblioteca tal y como se muestra a continuación.

Abriremos Power Apps y crearemos una nueva app en blanco. Nuestra primera pantalla la vamos a renombrar como «Galería de miniaturas» y le colocaremos una etiqueta en la parte superior de la pantalla con las palabras «Galería de fotos» para crear un encabezado.

Lo siguiente será insertar una nueva galería vertical en blanco en la app.

Con la propiedad de objetos apuntando a la biblioteca de documentos de SharePoint:

guardar imágenes Power Apps 1

Adicional, añade una forma de Imagen desde el panel derecho a tu galeria: Las fotos serán mostradas en una cuadrícula tal y como en un albúm de fotos.

Si cambiamos el código en propiedad TemplateFill para mostrar un color gris sólido de fondo.

TemplateFill: RGBA(237, 237, 237, 1)
WrapCount: 2

Con esto ya estamos listos para mostrar nuestras imágenes en la galería tal y como podemos ver aquí:

guardar imágenes Power Apps 2

Vamos a colocar un control de imagen dentro de la galería con las siguientes propiedades. De esta forma, la imagen será escalada automáticamente para encajar con la casilla. Una cosa a destacar es cómo el gris de fondo le da a la app una impresión de simetría aun cuando las imágenes tienen diferentes tamaños.

Height: Parent.TemplateHeight
Image: ThisItem.Thumbnail.Large
Width: Parent.TemplateWidth

AÑADIENDO UNA FOTO

Los usuarios toman una foto con sus dispositivos móviles, para lo cual necesitaremos acceso a la cámara del dispositivo. La mejor forma de hacer esto es con el control de Añadir Imagen ya que podemos usar la aplicación nativa de fotos en el dispositivo para tomar fotos en alta calidad.

Insetaremos un icono de foto y lo colocaremos en la esquina superior derecha de la app.

guardar imágenes Power Apps 12

Después vamos a añadir un control para añadir imagenes a la app y la colocaremos directamente arriba de la cámara.

guardar imágenes Power Apps 10

Este control lo haremos invisible al cambiar sus valores de color:

Color: Transparent 
HoverColor: Transparent 
PressedColor: Transparent 
Fill: Transparent 
HoverFill: Transparent 
PressedFill: Transparent

Ahora desagruparemos el control para añadir imágenes y el control de imágenes que está debajo. Moveremos el control de imágenes al fondo del árbol de vista, así no veremos una imagen cuando le demos click al control para añadir imágenes invisible.

guardar imágenes Power Apps 3

Ahora añadiremos este código a la propiedad OnChange del control para añadir imágenes para almacenar la foto que tomamos en una variable llamada varCurrentImage e iremos a la siguiente pantalla que crearemos en la siguiente sección.

Set(varCurrentImage,UploadedImage2.Image);
Set(varCurrentRecord, Blank());
Navigate('Imagen Individual', Fade)

PANTALLA DE UNA SOLA IMAGEN

Una vez que sea tomada una foto el usuario la revisará y le dará un nombre. Para que esto funcione debidamente crearemos una nueva pantalla llamada «Imagen Individual» con un fondo gris claro y un pie de página gris oscuro (para esto usaremos una etiqueta cambiaremos la propiedad de llenado).

guardar imágenes Power Apps 8

Insertaremos un control de imagen dentro de la pantalla llamado «img_SingleImage_image».

guardar imágenes Power Apps 9

Haremos que muestre la foto al actualizar la propiedad de imagen a varCurrentImage y darle algo de estilo al rellenarlo.

Image: varCurrentImage
PaddingBottom: 20
PaddingLeft: 20
PaddingRight: 20
PaddingTop: 20

Colocaremos una entrada de texto llamada txt_SingleImage_Caption debajo de la foto.

guardar imágenes Power Apps 7

Con esto queremos decirle al usuario que escriba el nombre de la imagen en la caja de texto. Usaremos este código en la propiedad HintText de la entrada de texto. Al mismo tiempo vamos a actualizar la propiedad DisplayMode para que la anotación solo pueda ser editada para nuevas fotos.

DisplayMode: If(IsBlank(varCurrentRecord), DisplayMode.Edit, DisplayMode.View)
HintText: If(IsBlank(varCurrentRecord), "Write A Caption", "[No Caption]")

Ahora completaremos el menú añadiendo dos íconos al pie de página: un ícono de verificación y un ícono de basura. Presionar el ícono de verificación subirá la foto a SharePoint mientras que el ícono de basura la removerá. Le daremos código a esto pronto, pero primero debemos hacer algo en Power Automate.

guardar imágenes Power Apps 4

SUBIENDO LA FOTO A UN FLUJO DE SHAREPOINT

Dado que no hay forma de subir imágenes directamente a SharePoint desde una biblioteca de documentos de SharePoint debemos crear un flujo que se encargue de esto. Para ello vamos a abrir Power Automate y crearemos un nuevo flujo desde instante.

Lo siguiente será borrar el código ‘Ask in Power Apps’ del campo de ‘File content’ que acabamos de crear y reemplazarlo con esta expresión en donde Createfile_FileContent es la salida de ‘Ask in Power Apps’. El propósito de esto es convertir una imagen representada como una secuencia de texto en base 64 de vuelta a un archivo.

Como aun no hemos hecho esta parte en Power Apps no es obvio el por qué esto es necesario, pero realmente lo es.

base64ToBinary(triggerBody()['Createfile_FileContent'])

El paso para crear un archivo ahora se verá así:

A continuación añadiremos la propiedad de la acción ‘Get file’ para obtener más detalles sobre el archivo que acaba de ser creado.

La acción final en nuestro flujo será actualizar la propiedad de título del archivo.

Guardaremos el flujo y regresaremos a Power Apps. Vamos a dar click en la pestaña de acción en el menú superior y en la lista seleccionaremos el flujo que creamos.

guardar imágenes Power Apps 6

Vamos a colocar este código en la propiedad OnSelect del ícono de confirmación. Lo que hará será convertir la imagen a binario para que pueda ser leído por el flujo y regrese al usuario a la galería una vez haya terminado.

// convert image to binary Set(varJSON,
     With(
         {wJSON: JSON(img_SingleImage_Image.Image,JSONFormat.IncludeBinaryData)},
         With(
             {wCommaPosition: Find(",",wJSON)},
             Mid(wJSON, wCommaPosition+1, Len(wJSON)-wCommaPosition-1)
         )
              )
 ); 
//run flow 'BlogImages:UploadPhotoToSharePoint'.Run(varJSON, txt_SingleImage_Caption.Text); 
// next screen Navigate('Thumbnail Gallery Screen', Fade);

PASOS FINALES

Ya casi terminamos, solo quedan unos detalles para poder completar nuestra app. Cuando el usuario le dé click en el icono para borrar deberán ser llevados de vuelta a la pantalla de galería de miniaturas.

Este será el código que usaremos en la propiedad OnSelect del icono:

OnSelect: Navigate('Thumbnail Gallery Screen', ScreenTransition.Fade)
Visible: IsBlank(varCurrentRecord)

Insertaremos un icono de cancelación en la esquina superior derecha de la pantalla. Esto le dará al usuario una forma de cerrar la pantalla cuando esté viendo una foto guardada anteriormente.

Y pondremos este código en la propiedad OnSelect del icono.

OnSelect: Navigate('Thumbnail Gallery Screen', ScreenTransition.Fade)
Visible: !IsBlank(varCurrentRecord)

Finalmente regresaremos a la pantalla de galería de miniaturas. Debemos añadir una lína más de código para permitirle al usuario ver una foto guardada en la biblioteca de SharePoint.

guardar imágenes Power Apps 5

Seleccionaremos la galería de miniaturas y después escribiremos este código en la propiedad OnSelect.

Set(varCurrentImage,ThisItem.Miniatura.Large);
Set(varCurrentRecord,ThisItem);
Navigate('Imagen Individual',Fade)

¡Y con esto hemos creado una app de galería de fotos! En ella podemos ver, subir y guardar imágenes, todo desde Power Apps.

Cualquier duda nos leemos abajo.

Aprende a guardar imágenes en SharePoint con PowerApps

6 comentarios en «Aprende a guardar imágenes en SharePoint con PowerApps»

  1. Hola, me quedé en este paso:

    «Con la propiedad de objetos apuntando a la biblioteca de documentos de SharePoint:»

    Lo que entendí es que hay una propiedad llamada «objetos» pero no la encuentro, o quizá estoy entendiendo mal.

    ¿Podrías apoyarme como hacer este paso con alguna otra explicación?

    Gracias de antemano.

  2. hola, una consulta las imagenes que se almacenan en ese sharepoint las puedo enviar via mail a traves de power apps y por usuario. gracias

    1. Hola Matias!
      Es correcto, puedes hacerlo. Te recomiendo que lo hagas a traves de automate para que te sea mas facil depositar el archivo, ya que por apps la configuracion es un poco mas rara.
      Saludos!

  3. Gracias por la explicación, deseo saber si se puede subir a una lista de sharepoint una imagen guardada en una colección. La idea es trabajar fuera de linea.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll hacia arriba