Cuando comenzamos a diseñar nuestras aplicaciones canvas, si queremos diseñar pantallas que se salgan de los limitados temas de personalización que nos ofrece Power Apps, es fácil perderse entre las propiedades de los componentes que podemos configurar hasta conseguir el nivel de personalización deseado. Y aunque estaremos de acuerdo en que lo principal es que nuestra aplicación funcione correctamente, no está de más intentar que sea un poco más agradable para el usuario. Si no somos diseñadores y vamos a ocuparnos nosotros mismos de todo lo que concierne al diseño, dedicar un tiempo a definirlo antes de comenzar a trabajar en la aplicación puede ahorrarnos mucho tiempo.
Supongamos que estamos construyendo una aplicación para un cliente y hemos utilizado uno de los temas que nos ofrece Power Apps. Terminamos nuestro proyecto, nuestra maravillosa aplicación funciona a la perfección, se la mostramos al cliente y… ¡no le gusta! Quiere que se adapte a sus colores corporativos. ¿Os imagináis tener que modificar las propiedades de todos los componentes? ¿Cómo podemos evitar esta situación? Creando un tema personalizado al comienzo del desarrollo.
[Abre la imagen para ver el gif en acción]
Si hacemos una búsqueda rápida en internet sobre cómo crear temas personalizados para aplicaciones canvas, encontraremos vídeos y blogs para hacerlo declarando variables globales en la propiedad OnStart de la app, como este artículo de Matthew Devaney. Pero aquí vamos a ver cómo hacerlo utilizando la propiedad Formulas de la app.
[Abre la imagen para ver el gif en acción]
¿Por qué en Formulas y no en OnStart?
Los colores que usaremos a lo largo del diseño en las distintas propiedades de nuestros componentes serán estáticos, es decir, si queremos mantener un diseño coherente en toda la app, usaremos unos determinados colores para el texto, los bordes, el relleno…. ¡No haremos cada botón de un color distinto! Así que, si van a ser valores constantes en toda la aplicación, ¿por qué declarar variables en el OnStart que pueden sobrecargar y ralentizar el arranque de nuestra aplicación? En su lugar podemos definir las fórmulas que van a contener esos valores en la propiedad Formulas, y solo con escribir el nombre de la fórmula correspondiente en las propiedades de los controles que queremos modificar tendremos nuestro diseño.
En este caso hemos optado por declarar tres fórmulas:
- TemaColores, que contiene la paleta de colores. Cuatro colores que serán los que modificaremos para adaptar el tema de la aplicación y otros colores básicos (blanco, negro, rojo, verde, grises, etc.).
- TemaFuentes, para definir el tipo de fuente que usaremos en los textos.
- TemaPropiedades, contiene un listado de propiedades de los componentes. Algunas están agrupadas por componentes y otras son comunes para todos. Este listado se puede adaptar (añadir o eliminar propiedades) en función del nivel de personalización que busquemos y de nuestro gusto.
[Abre la imagen para ver el gif en acción]
Hacer el listado y decidir el valor de cada propiedad nos llevará nuestro tiempo, pero debemos enfocarlo como un trabajo que solo debemos realizar una vez, ya que cuando lo tengamos listo, solo tendremos que copiar/pegar el código en la propiedad Formulas cuando empecemos una nueva aplicación y cambiar los códigos de nuestra paleta en TemaColores.
[Abre la imagen para ver el gif en acción]
A medida que añadamos componentes, escribiremos en las propiedades el nombre de la formula correspondiente en el panel de propiedades o en la barra de fórmulas.
[Abre la imagen para ver el gif en acción]
Ahora, si durante el desarrollo de nuestra aplicación necesitamos cambiar los colores, solo necesitaremos hacer los cambios en la fórmula TemaColores (Color1, Color2, Color3, Color4) y se cambiarán en todos los componentes de la aplicación.
[Abre la imagen para ver el gif en acción]
Y ya con nuestro tema listo, podemos olvidarnos de qué color estábamos usando en los botones o en el combo box de turno y centrarnos en la funcionalidad de nuestra aplicación.
