Parte III: Poniendo cositas en el lienzo (algunos controles y sus propiedades)

Hola!

Si hacen click en este vínculo, van a leer algunas cosas básicas de Power Apps, tales como crear una aplicación tipo canvas, la estructura del editor los controles u objetos y sus propiedades.

Luego, en esta entrada, vimos lo básico que puede llegar a necesitar una empresa para crear una app de Gestión Documental.

Por último, en la entrada anterior a esta, vimos la base de la información, es decir, SharePoint como lugar de almacenamiento para los archivos y sus propiedades; y otros elementos tales como usuarios administradores, usuarios aprobadores, visualizadores de documentos, entre otras cosas.

Hoy vamos a arrancar con la app de Carga de Documentos, pero como es la primera vez que nos vamos a meter a fondo con Power Apps, voy a presentarles algunos controles, para qué sirven, sus propiedades y cómo se pueden relacionar con otros controles, con Power Automate y con SharePoint.

 

El lienzo:

Las aplicaciones tipo Canvas se tratan de un espacio en blanco que vendría a ser el lugar donde vamos a poner los diferentes controles para que la app funcione. 

 

Como pueden observar en la captura, el lienzo está en blanco, nos ofrece agregar elementos para empezar. A la izquierda está seleccionado Screen1, así se llama por defecto ese lienzo, dándonos la idea de que esa será la primer pantalla. Podemos cambiar su nombre, haciendo doble click, o seleccionándola con el botón derecho y elegir la opción Cambiar nombre.

 

Yo le puse screen_main.

 

El panel donde vemos que existe esa screen siempre mostrará elementos que disponemos para la app, ya sea diferentes screens, otros controles, conexiones de datos, archivos de imágenes, etc. Todo lo que agreguemos para la App, se verá en ese costado.

Por otro lado, a la derecha, estará el panel con las propiedades de cada elemento seleccionado. Por ejemplo, teniendo seleccionada la screen, del lado derecho vamos a ver:

 

Pero si hacemos click en Avanzado, vamos a ver más propiedades, algo así:

 

En el panel básico veremos muchas propiedades que también están en el modo avanzado. La diferencia es que en el modo avanzado, las propiedades las podremos configurar mediante diferentes funciones que nos van a permitir más libertad de configuración.

Vamos a hacer algo sencillo. Supongamos que quiero que esa pantalla sea de otro color diferente al blanco. Podemos hacerlo de dos maneras:

En el modo básico, podemos cambiar el color de relleno:

O bien, en el avanzado, podemos escribir el color en formato RGBA:

 

(en este ejemplo, esa combinación RGBA nos devuelve el gris que estoy señalando).

En el modo avanzado también podemos escribir el color, pero en inglés, por ejemplo:

Si en vez de cambiar el color, quiero agregar una imagen de fondo, también puedo hacerlo desde el modo básico, yendo a Imagen de fondo y seleccionando alguna que exista. En este caso, la aplicación es nueva, no tiene imágenes agregadas, así que seleccionaremos Agregar un archivo de imagen.

La imagen quedó un poco más angosta que el total de la pantalla (les muestro la imagen con unas cruces que hice para que se noten los espacios en blanco):

Como la imagen es un poco abastracta y alargada, decidí cambiar la Posición de la imagen de la opción Centro, a Estirar:

 

 Ahora se ve un poco mejor:

Por cierto, la imagen que agregaron la van a encontrar en el panel de la izquierda, yendo al botón Multimedia:

 

Más allá del ejemplo, y como prefiero el fondo en blanco, voy a ir a las propiedades de la pantalla, y en la propiedad Imagen de fondo, voy a seleccionar Ninguno. Ahora la pantalla vuelve a tener el color blanco que tenía al principio. Sin embargo, para tener en cuenta, la imagen que agregué va a seguir en el apartado de elementos. Será un recurso que podremos utilizar más adelante, o bien podremos eliminarlo, con el fin de que la aplicación no sea tan pesada con objetos que no utilizaremos.

 

 

Controles:

Más allá del aspecto visual, sabemos que esta apliación es para cargar Documentos. Además, esos documentos tienen que cargarse cada uno con un conjunto de características (habíamos mencionado Tipo de documento, Estado, Revisión, Fechas, entre otras). Así que necesitamos insertar en la pantalla diferentes controles que nos sirvan para cargar esos datos, también necesitamos agregar un control que nos permita adjuntar el archivo necesario. Por último, necesitaremos algún botón para confirmar la carga, así como textos que indicarán para qué sirve cada uno de los controles mencionados anteriormente.

Los controles se agregan desde el panel superior, en el menú Insertar, y seleccionando el tipo de control que necesitamos. 

 

Hay varios tipos de controles, los más comunes serán:

- Nueva pantalla: Para agregar una pantalla nueva.

- Etiqueta: Nos servirá para escribir un texto, están pensadas para que ese texto no se pueda modificar por el usuario final durante el uso de la aplicación. Otra función muy frecuente para las etiquetas es la de, mediante una función, hacer que el contenido del texto varíe de acuerdo a otros eventos que ocurran durante el funcionamiento de la app. Por último, también puede usarse sin texto, cambiando el color de relleno, con el fin de hacer títulos o diferentes clases de fondo.

- Botón: No hay mucho para comentar. Es un botón que se configura para que haga algo al apretarlo.

- Apartado Texto: Aquí dentro veremos otros elementos, están las etiquetas que ya mencionamos, pero además está el de Entrada de texto, que, a diferencia de la anterior, sí está pensada para que el usuario pueda escribir algo mientras la app esté en funcionamiento. También veremos Texto HTML, o Editor de texto enriquecido, que son como el de Entrada de texto, pero para darle lugar al usuario a que escriba más contenido, o para que el usuario pueda darle formato a ese texto.

- Apartado Entada: Son diferentes controles de tipo funcional. El botón del cual ya les hablé, una Lista desplegable en la que podemos poner diferentes opciones para que el usuario final elija, un Cuadro combinado, que es como la anterior, pero mejorada, Selector de fecha, Casillas, Botones de selección, etc.

 

Hay muchos más controles. Mientras vayamos avanzando con la app, seguiremos viéndolos.

Algunas de las propiedades que vemos en el panel derecho, pueden ser configurables desde otros lados, por ejemplo, si agrego un Botón, puedo modificar su tamaño (ancho y alto), haciendo click sobre ese elemento y agrandándolo o achicándolo moviendo los puntos que rodean ese objeto:

Si quiero cambiar el color de ese botón, puedo ir al menú Inicio, y cambiar el Relleno:

 

Se puede cambiar el color de fuente, el tamaño, la tipografía dentro del mismo menú Inicio.

Si no me gusta que el botón tenga sus bordes redondeados, puedo modificar la propiedad Radio del borde a otro número menor que 10 (número por defecto):

 

Lo importante no es que les explique qué hace cada propiedad, sino que investiguen acerca de las que no hablé, o que puedan indagar con más facilidad sobre aquellas propiedades de las que sí les hablaré.

 

La App de Carga de documentos:

En esta app necesitamos agregar:

- Tipo de documento: Necesitaremos un control de tipo Cuadro combinado.

- Número de tipo de documento: Necesitaremos uno de Entrada de texto.

- Estado: Necesitaremos otro Cuadro combinado.

- Documentos Regulatorios: Cuadro combinado.

- Revisión: Entrada de texto.

- Fechas de Emisión, Vigencia, Validez: para cada uno de estos necesitaremos un Selector de fecha.

- Nombre del documento: Entrada de texto.

- Adjuntar archivo: Necesitamos un control para adjuntar archivo que, para esto, hay que hacer un truquito, ya que no hay control de esta clase a simple vista.

Hasta acá, sin contar el control para adjuntar archivo, ordenando cada control en la pantalla, dándoles color y formato (y cambiando sus nombres en el panel izquierdo), deberíamos tener algo parecido a esto:

(noten aquellos elementos de Etiqueta de texto que utilicé para identificar a su correspondiente control)

Ahora agregaremos un Botón, y a ese botón vamos a modificarle su propiedad Texto para que diga Cargar.

Veamos las propiedades de un control de Entrada de Texto, por ejemplo, el control donde deberíamos escribir el Nombre del Documento. Una de sus propiedades avanzadas se llama Default. Dentro dice "Entrada de texto".

 

Ese es un texto que aparece por defecto. A nosotros nos gustaría que no tenga algo escrito, pero sí nos gustaría que haya un texto como Sugerencia, algo así como una ayuda al usuario, para que sepa qué tiene que escribir ahí. Vamos a reemplazar entonces ese texto borrándolo. Y luego, en la propiedad llamada HintText, vamos a dejar (entre comillas) un texto que identifique lo que corresponda, tanto en ese control como en los demás donde haya un texto de ayuda.

Haremos algo parecido con los Combos, que tienen otro texto de ayuda que dice "Buscar Elementos". En el caso de estos últimos, la propiedad a modificar se llama InputTextPlaceholder.

 

Ahora, deberían quedar más o menos así:

Vamos a agregar ahora otras Etiquetas, pero esta vez modificaremos las propiedades para que, en vez de usarlas como texto, funcionen para mejorar la visual, en este caso, vamos a encuadrar la aplicación y agregarle título.

Para esto, vamos a agregar una nueva etiqueta, vamos a borrar el texto, y le vamos a asignar un borde, color al borde y grosor. Eso se hace, tal como vimos antes, desde el Menú Inicio.

En la imagen pueden ver la etiqueta, con el texto vacío y un grosor de borde número 2. Ese borde lo voy a agrandar para que ocupe caso todo el Lienzo. Pero tengan en cuenta algo importante.

Si conocen algo de diseño, cuando agregan un objeto nuevo, este se ocupa en el espacio arriba de otros objetos. Esto quiere decir que si tomo esta etiqueta, la agrando cubriendo los demás objetos, por más que la etiqueta sea transparente, está delante de todos los demás, como si hubiese una "pared invisible". Así que esta etiqueta nueva, vamos a llevarla al fondo del lienzo, con el botón Reordenar:

 

El efecto se nota si crean objetos y los ponen sobre otros objetos que hayan creado antes, los nuevos estarán superpuestos. Recuerden este botón para reordenar, ya que vamos a utilizarlo MUY SEGUIDO!

El recuadro negro, como dijimos, es solamente un label sin texto, enviado al fondo y con el borde activo.

Ahora vamos a agregar otro Label donde pondremos el título, vamos a llamar a la aplicación Carga de Documentos.

A esta etiqueta vamos a darle un color de relleno blanco, y le vamos a dar formato al texto. El fondo lo quiero blanco, ya que voy a tapar la línea, con el fin de darle ondita estética copada... algo así:

 

Al poner el fondo del label en blanco, simulamos "tapar" la línea del anterior label. Luego, haciendo unas correcciones de tipografía y tamaño, se verá como la foto de arriba.

 

Por el momento, dejamos el capítulo acá, no sin antes recordarles que tienen que guardar el proyecto, yendo al menú Archivo / Guardar. Pueden dejar notas acerca de los cambios. Más adelante veremos cómo funciona el control de cambios para Power Apps.

 

Pasen un lindo día!