Personalizar aplicaciones y alinearlas con sus temas

En este tutorial, le mostraré cómo personalizar aplicaciones usando las diferentes herramientas y funciones dentro de la plataforma Power Apps. La personalización de las aplicaciones puede ayudarlo a crear una apariencia única que se alinee perfectamente con sus temas o marcas preferidos al tiempo que brinda de manera efectiva los datos que desea mostrar.

Si ha seguido los otros tutoriales sobre Power Apps , verá que la mayor fortaleza que tiene esta plataforma es su facilidad de uso.

Tabla de contenido

• Personalización de aplicaciones: la pantalla maestra y la pantalla de documentación
• Personalización de aplicaciones mediante la pantalla de documentación
• Personalización de aplicaciones agregando botones
• Personalización de aplicaciones mediante la adición de galerías
• Adición de navegación a botones e iconos
• Conclusión

Personalización de aplicaciones: la pantalla maestra y la pantalla de documentación

Al iniciar una aplicación desde un lienzo en blanco, es importante comenzar con una pantalla maestra y una pantalla de documentación. Tener estas dos pantallas ayudará a acelerar todo el proceso y lo ayudará a mantener una apariencia uniforme en toda la aplicación, sin importar cuántas pantallas termine.

La pantalla maestra sirve como plantilla para toda la aplicación. Dicta cómo se verá el resto de sus pantallas. Para este ejemplo, así es como se ve nuestra pantalla maestra.

Como puede ver, tenemos un título en el área superior sobre un rectángulo rojo que también se extiende a lo largo de la pantalla. Esto significa que a medida que agregamos más pantallas a la aplicación, cada página siempre tendrá ese encabezado.

En cuanto a la pantalla de documentación, sirve como punto de referencia para todos los elementos que se utilizarán en la aplicación que estamos creando. Como ya tenemos un título y una barra superior en la pantalla maestra, tengamos las mismas cosas también en la pantalla de documentación.

Ya tenemos un rectángulo rojo aquí.

Así que sólo tenemos que añadir el título. Para hacer eso, simplemente cree una Etiqueta usando el menú desplegable Texto debajo de la cinta Insertar.

Ahora que hay un cuadro de texto aquí, nos gustaría usar el mismo tamaño de fuente que el de la pantalla principal.

Volviendo a la etiqueta en la pantalla principal, muestra que el tamaño de fuente es 40.

Así que haré el texto en la pantalla de documentación 40 también.

Dado que utilizaremos la pantalla de documentación como punto de referencia, es importante etiquetar correctamente todos los elementos que contiene. Por el momento, los elementos aquí se denominan Label3 y Rectangle2, que son bastante genéricos.

Así que vamos a cambiarles el nombre y llamarlos Título y TopBar en su lugar.

Personalización de aplicaciones mediante la pantalla de documentación

Ahora que hemos etiquetado correctamente los elementos en la pantalla de documentación, podemos comenzar a personalizar otras pantallas. En este caso, la única otra pantalla que tenemos es la pantalla maestra.

Digamos que el título en la pantalla principal aún no tiene el tamaño correcto. Todo lo que tenemos que hacer es seleccionar Label1 en la pantalla principal. Luego, eligiendo Tamaño en el menú desplegable de propiedades, escribiremos el nombre del elemento al que queremos hacer referencia en la pantalla de documentación (que, en este caso, es Título) y seguiremos la propiedad que queremos imitar.

Una vez que presionemos Entrar después de escribir Título.Tamaño, debería cambiar automáticamente el elemento que personalizamos.

Además del tamaño, también podemos personalizar el color de la etiqueta. Digamos que quiero cambiarlo a blanco. Simplemente resalte el elemento llamado Título, elija Color en el menú desplegable y luego escriba Blanco.

Ahora que el Título en nuestra página de documentación es blanco, regresemos a la pantalla maestra y veamos qué sucede si también hacemos referencia a esa propiedad. Resalte Label1 debajo de la pantalla maestra, luego escriba Título.Color.

Una vez que presionemos Enter, verá que no solo cambiará el color del elemento que personalizamos. También muestra el código de color RGBA en la barra de fórmulas.

Ahora, le mostraré otra forma de personalizar usando la pantalla de documentación. Agregaré un rectángulo mirando el menú desplegable debajo de Iconos.

Quiero que este rectángulo sea la base del fondo de mi pantalla principal. Así que cambiaré el nombre de este elemento a Fondo.

En el panel derecho, puedo elegir colores para este elemento en la pestaña Propiedades.

Elegiré un color gris más claro para que no interfiera con la forma en que aparecerán otros elementos a medida que los agreguemos en nuestras pantallas.

Ahora, vayamos a la pantalla principal. Todavía tenemos dos elementos aquí: la etiqueta y el rectángulo. Pero para que podamos cambiar el color de fondo de la pantalla, no necesitaremos agregar otro elemento aquí.

Asegurándome de que la pantalla principal esté resaltada, solo buscaré Relleno en el menú desplegable. Luego, en la barra de fórmulas, haré referencia al rectángulo que creamos anteriormente y su color de relleno. Una vez que presiono Enter después de escribir Background.Fill, verá que el fondo en esa pantalla ahora muestra el mismo color que nuestra referencia.

Aunque estamos agregando elementos uno por uno y eligiendo sus colores individuales, también es posible usar los temas predeterminados en la cinta Inicio. Estos deberían ser suficientes, especialmente si alguno de los temas coincide con su marca.

Pero si ninguno de los temas coincide con lo que necesita, entonces el método de documentación funcionaría perfectamente.

Personalización de aplicaciones agregando botones

Un elemento útil que podemos agregar a nuestra aplicación serían los botones. Los botones son una excelente manera de permitir que los usuarios salten de una parte de la aplicación a otra. Esto sería genial en la pantalla de inicio de la aplicación.

Así que primero creemos una pantalla de inicio. Como ya tenemos una pantalla maestra, podemos duplicarla para ahorrarnos la molestia de tener que crear una pantalla de inicio desde cero.

Como puede ver, ambas pantallas tienen exactamente los mismos elementos.

Cambiemos el nombre de la pantalla maestra duplicada y llamémosla Pantalla de inicio.

Si revisa los elementos debajo de la pantalla de inicio, verá que también tiene las mismas referencias que hicimos cuando estábamos personalizando la pantalla principal. Si observa Label1_1, por ejemplo, todavía hace referencia al tamaño del título de la pantalla de documentación.

Dado que esta será nuestra pantalla de inicio, cambiemos el texto en esa etiqueta. Para hacer eso, podemos simplemente escribir el nuevo texto en el panel Propiedades en el lado derecho. Escribamos en Pantalla de inicio.

Ahora, agreguemos un botón en nuestra pantalla de inicio. Podemos hacerlo haciendo clic en Botón debajo de la cinta Insertar.

Al igual que cualquier otro elemento, podemos arrastrar el botón a donde queramos y cambiar su tamaño haciendo clic y arrastrando los puntos alrededor del elemento.

A continuación, cambiemos el texto de este botón a "Ver clientes". Simplemente resalte el botón, elija Texto en el menú desplegable de propiedades, luego escriba Ver clientes directamente en la barra de fórmulas.

Para darle un aspecto más profesional, agreguemos un ícono de lupa.

Puede mover el icono y cambiar su tamaño. En este caso, simplemente colóquelo encima del texto de este botón.

Luego, cambiemos el color de la lupa a blanco yendo al panel de propiedades a la derecha.

Para hacer esto más agradable estéticamente, también cambiemos los colores del botón. Pero tendremos que hacerlo desde la pantalla de documentación para que podamos hacer referencia fácilmente a los mismos colores y configuraciones cuando construimos otras pantallas.

Resaltemos estos nuevos elementos que agregamos y hagamos clic en Ctrl + C para copiarlos.

Luego, vaya a la pantalla de documentación y haga clic en Ctrl + V para pegar los elementos en esta pantalla.

Dado que nuestra TopBar es granate, queremos asegurarnos de que el color de nuestro botón la complemente.

Así que cambiemos el color a algo que se vea bien con nuestro tema.

Tenemos que asegurarnos de que el botón de la pantalla de inicio coincida con las propiedades que acabamos de configurar en la pantalla de documentación. Lo primero que debemos hacer es cambiar el nombre de este elemento a HomeScreenButton.

Luego, volvamos a la pantalla de inicio y cambiemos el relleno del botón para que coincida con lo que hemos configurado en la pantalla de documentación.

En la superficie, el botón Ver clientes se ve bien con el color que elegimos. Pero cuando pasamos el cursor sobre él, verá que todavía vuelve al color azul original.

Para cambiar eso, solo busque HoverFill.

Mirando las propiedades actuales del relleno flotante, muestra que el color se desvanece en un 20%, pero también usa un color específico como referencia, que no queremos.

Entonces, en lugar de hacer referencia a un código de color RGBA específico, hagamos referencia a HomeSreenButton.Fill en su lugar.

Una vez que presionamos enter, verá que el botón ahora usa el color que queremos.

Otra cosa que debemos arreglar es el color que aparece cuando haces clic en el botón. Como puede ver, se vuelve blanco cuando hace clic en él.

La mejor manera de solucionarlo es asegurarse de que el ícono que usamos, que es la lupa, no se oculte cada vez que se hace clic en el botón. Podemos hacerlo cambiando el color del ícono y configurándolo en el mismo color que la barra superior.

Como necesitamos tres botones en la pantalla de inicio, necesitaremos replicar este botón específico dos veces. Para hacer eso, simplemente resalte los elementos y haga clic en Ctrl + C para copiarlos.

Luego, simplemente haga clic en Ctrl + V para pegar los mismos elementos en esta pantalla. Haz lo mismo una vez más para agregar un tercer botón. Luego, simplemente los arrastraremos al lugar correcto para asegurarnos de que la pantalla se vea bien.

Ahora, cambiemos el texto. El segundo será Agregar nuevo cliente y el tercero Ver agentes.

Ahora que tenemos tres botones aquí, asegurémonos de que realmente vayan a alguna parte. Necesitamos preparar la pantalla donde aterrizarán estos botones.

Personalización de aplicaciones mediante la adición de galerías

Una galería es una colección o lista de elementos dispuestos de cierta manera. Piensa en tus contactos en tu móvil. Ese es un gran ejemplo de una galería.

El primer botón en la pantalla de inicio es para Ver clientes, por lo que vamos a crear una nueva pantalla donde aterrizará este botón. Esta pantalla va a ser un gran lugar para una galería.

Al igual que hicimos con las otras pantallas, duplicaremos la pantalla maestra y le cambiaremos el nombre a ViewCustomersScreen.

A continuación, haremos clic en Galería debajo del botón Insertar. Las galerías vienen en diferentes formatos, pero para esta aplicación específica, usemos el diseño vertical.

Así es como se ve una galería vertical.

Como puede ver, solo muestra tres entradas. Pero si arrastra la galería hacia abajo para llenar la pantalla, agrega entradas para llenar el espacio.

Incluso si la galería actualmente muestra cuatro entradas en blanco, eso no significa que solo podamos acomodar cuatro conjuntos de datos aquí. En PowerApps, las galerías crearán automáticamente la cantidad exacta de entradas según los datos.

Dado que nuestros datos no contienen imágenes, cambiemos el diseño a título, subtítulo y cuerpo.

Nuestra galería actual aún no está conectada a una fuente de datos, por eso automáticamente nos pide que seleccionemos una fuente de datos cuando hacemos clic en la galería.

En caso de que esta ventana emergente no aparezca automáticamente, puede agregar una fuente de datos a través del panel de propiedades a la derecha.

Después de elegir la fuente, simplemente abra la carpeta donde se puede encontrar su archivo fuente.

Vamos a utilizar los datos de este archivo Clientes.

Esto es lo que hay dentro de esa hoja de cálculo. Son los datos que queremos mostrar en nuestra galería.

Una vez que hago clic en eso, me permite elegir una mesa.

Y una vez que elija esa tabla, los datos que contiene se mostrarán en la galería.

En este momento, cada elemento de la galería muestra el nombre del agente en la parte superior.

Sin embargo, tiene más sentido si mostramos el Nombre y el Apellido en la parte superior. Así que cambiemos eso yendo a la barra de fórmulas. Como el nombre y el apellido están en dos columnas separadas, vamos a usar Concatenar.

Lo bueno del diseño que elegimos es que nos da más espacio para poner más información en cada tarjeta. Entonces podemos poner la ubicación del cliente aquí en la segunda línea.

Entonces podemos usar el nivel VIP en la tercera línea.

La ventaja de crear un lienzo nuevo, especialmente en modo tableta, es la cantidad de espacio con el que podemos trabajar. Para esta galería, por ejemplo, nos queda mucho espacio incluso si ya estamos mostrando bastante información en cada tarjeta.

Entonces, maximicemos el espacio cambiando el número de vueltas. Podemos hacerlo aquí en el panel de propiedades.

Cambiemos eso a 3 en lugar de 1 para que podamos tener una galería de varias columnas.

Esto hace que sea más fácil ver más de un vistazo.

Adición de navegación a botones e iconos

Ahora que tenemos algunas pantallas con las que trabajar, podemos comenzar a agregar navegación que nos llevará de una pantalla a otra.

Para empezar, agreguemos el icono de inicio haciendo clic en Iconos debajo de la cinta Insertar. Lo colocaremos en la parte superior de la pantalla Ver clientes.

Hagamos que este ícono sea blanco ya que tenemos un color de fondo oscuro .

Una vez que agreguemos la navegación, hacer clic en ese ícono de inicio nos llevará de regreso a la pantalla de inicio. También agregaremos un poco de navegación aquí en el botón Ver clientes en la pantalla de inicio que nos llevará a la pantalla Ver clientes.

Comencemos resaltando el botón Ver clientes, luego busque OnSelect en el menú desplegable de propiedades. Esto establecerá el disparador para nuestra navegación.

Luego, en la barra de fórmulas, usaremos Navigate y haremos referencia a la pantalla a la que queremos ir, que es ViewCustomersScreen.

Una vez que se haya configurado, se nos dirigirá a la galería que configuramos cada vez que hacemos clic en el botón Ver clientes.

Ahora vayamos a la pantalla de visualización de clientes. Necesitamos asegurarnos de que cuando un usuario haga clic en este icono de inicio, volverá a la pantalla de inicio.

Hay dos maneras de hacer esto. Primero, podemos usar Atrás. Básicamente, esto lo lleva de regreso a la última pantalla que visitó.

El problema con ese comando es que tenemos varias pantallas en esta aplicación. Eso significa que no estaremos necesariamente viniendo de la pantalla de inicio todo el tiempo. Por lo tanto, este comando probablemente sería más adecuado si tuviéramos un botón o ícono Atrás aquí en lugar de un ícono de Inicio.

El comando más aplicable a usar sería Navegar. También haremos referencia a la pantalla de inicio para decirle a PowerApps adónde queremos que lleve este ícono.

Ahora que hemos agregado la navegación a esta pantalla, lo último que debemos hacer es cambiar el texto del título a Ver clientes.

Ahora, nuestras pantallas están configuradas con los datos correctos que se muestran en nuestra galería y con botones de navegación que nos llevan a diferentes pantallas en la aplicación.

Conclusión

Al observar la facilidad de personalizar aplicaciones en Power Apps, se vuelve aún más evidente cómo Microsoft diseñó esta plataforma para lograr la eficiencia. Todo es fácil de editar y personalizar, y nadie necesitará mucho tiempo para crear una aplicación desde cero.

Este es solo un pequeño resumen de las cosas que podemos hacer a través de PowerApps. Además de galerías y pantallas adicionales, hay otras cosas que podemos agregar para que nuestra aplicación sea más completa. Los discutiremos en otros tutoriales.

Mis mejores deseos,

Enrique

Introducción a Power Apps: definición, características, funciones e importancia
Entornos de Power Apps: configuración adecuada de los elementos de la aplicación
Funciones y fórmulas de PowerApps | Una introducción