Temas personalizados en Power Apps

Llega el momento de presentar la aplicación a nuestro cliente. Después de múltiples juegos de pruebas y de validar la funcionalidad con los usuarios, la app está terminada y ha sido todo un éxito. Pero, justo cuando ya estabas a punto de salir por la puerta grande, alguien pregunta… ¿podremos adaptar la aplicación a los colores de nuestra organización, verdad?

En ese momento, te das cuenta que tal vez, dicha cuestión, debía haberse abordado al inicio del proyecto, pero como sucede habitualmente, en las fases iniciales se hace mas hincapié en la funcionalidad que en el propio diseño. Aun así, aunque este tema se haya abordado en primera instancia, podría darse el caso de que la organización se encuentre en proceso de rebranding, y necesite adaptar sus aplicaciones a su nuevo estilo.

El objetivo de este artículo es dar a conocer las opciones de las que disponemos actualmente para crear temas personalizados en Power Apps, y también, cómo modificar el estilo de una aplicación ya existente con el mínimo esfuerzo posible. Los métodos que veremos son los siguientes:

Cada una de estas opciones tiene sus pros y sus contras, que analizaremos a continuación.

Temas preconstruidos

Los temas preconstruidos son la solución ootb que nos ofrece Power Apps para trabajar con temas personalizados.

Como se puede observar en el anterior GIF, los temas de Power Apps son útiles cuando no se sobrescriben las propiedades de los controles. En dicho caso, podremos modificar el tema, incluso después de terminar la app, y los cambios se aplicarán correctamente a todos los objetos. No obstante, si en alguno de los controles hemos establecido un color fijo, los temas dejarán de tener validez en estos objetos:

Esto, además de que no se pueden crear temas con colores personalizados, hace que los temas preconstruidos sean muy limitados,

Theme Editor

Si los temas preconstruidos no cumplen tus requerimientos, y lo que necesitas es crear un tema pudiendo indicar colores personalizados, Theme Editor es tu herramienta.

Cabe destacar que es una herramienta ofrecida por Microsoft, pero sin soporte oficial. La podemos descargar desde GitHub, junto con otras herramientas de Power Apps.

Como se puede observar, Theme Editor nos permite modificar los colores principales de la paleta, así como modificar todas las propiedades específicas de los controles de Power Apps, como por ejemplo, Fill o PressedColor.

Una vez guardado el tema (en formato .msapp), podemos abrirlo desde el editor de Power Apps, y comprobar que el tema se aplica correctamente al crear nuevos objetos:

A simple vista, parece ser que Theme Editor es todo lo que necesitamos, así que ya podriamos dar por finalizado este artículo, pero… ¿que ocurre si lo que necesitamos es editar el tema de una aplicación existente? Una posible solución sería descargar nuestra app en formato .msapp, abrirla con Theme Editor, editar la paleta, y volver a subir la aplicación, pero lamentablemente, esta opción parece que no está soportada por la herramienta.

Cuando lo intentamos, parece que todo funciona correctamente, pero cuando guardamos el tema modificado, Theme Editor deja de funcionar y se cierra sin previo aviso. Una lástima, ya que con esta funcionalidad, podriamos modificar el tema de aplicaciones terminadas o a medias, sin necesidad de modificar todos los controles por separado. Sin embargo, Theme Editor es una gran herramienta para crear temas de aplicaciones nuevas, y seguramente que en un tiempo, Microsoft solucione dicha limitación.

Para terminar con Theme Editor, comentar que si estáis utilizando Power Apps en formato español, tendréis problemas a la hora de cargar los temas creados con la herramienta, ya que las propiedades se guardan en formato americano, y el editor no lo reconocerá.

Para solucionar esto, es suficiente con cambiar el formato regional en Windows 10:

Branding Template

Siguiendo con la problemática: ¿cómo podemos editar el tema de una aplicación existente?

Pues bien, donde no llega Microsoft, llega la comunidad, en este caso, gracias a una solución proporcionada por Sancho Harker, MVP de Microsoft y uno de los principales evangelistas de Power Apps en la comunidad.

En el siguiente link podréis encontrar todos los detalles de su solución, así como el enlace de descarga, pero vamos a comentar los aspectos mas importantes.

Branding Template, por el momento, no dispone del completo abanico de opciones que incorpora Theme Editor, en el que podemos personalizar tanto la paleta de colores principales, como cualquier propiedad de los controles de Power Apps, pero nos permite muy importante, modificar el tema de una aplicación sobre la marcha.

Como se puede comprobar, la herramienta nos permite modificar el tema, y los cambios, se aplican automáticamente a todos los objetos de la aplicación, así como a los nuevos elementos.

También dispone de una pantalla muy interesante donde podemos probar combinaciones de colores, antes de crear la paleta definitiva:

Una vez tengamos claros los colores a utilizar, podremos crear una paleta, añadiéndola a la regla OnStart. Esta paleta aparecerá de forma automática en el selector de temas que hemos visto anteriormente.

La herramienta también permite modificar la paleta de colores de los gráficos, así como crear menús personalizados y dinámicos, entre otras opciones.

Plantilla personalizada

La última de las opciones que veremos es un poco mas artesanal y laboriosa, pero igual de válida que las anteriores. Este método también nos permitirá modificar los colores sobre la marcha, es decir, aunque la app ya esté en fase de desarrollo o finalizada.

Se trata de crear una o varias páginas en la app con todos los objetos que utilizaremos y darles el aspecto deseado. Posteriormente, en los nuevos objetos, haremos referencia a las propiedades de los objetos “modelo” para que copien el estilo, y de esta forma, si mas tarde queremos cambiar uno de los colores (o cualquier propiedad), solo tendremos que modificar el objeto original.

Conclusión

Por el momento, Power Apps no proporciona herramientas muy eficientes para crear o personalizar temas, pero viendo Theme Editor, su herramienta no oficial, seguramente termine por incrustarse en el entorno de desarrollo de Power Apps para facilitarnos el trabajo y ofrecernos una solución completa para personalizar cualquier control de la aplicación. De hecho, en el último Microsoft Business Applications Summit se comentó que a finales de 2020, tendremos disponible dicha funcionalidad.

Imagen

Hasta que llegue ese día, tendremos que crear nuestras plantillas personalizas, bien utilizando Theme Editor, o utilizando soluciones creadas por la comunidad como Branding Template de Sancho Harker.

Follow the power!

Comparte:
Soy Miquel Vidal, ingeniero técnico en informática de sistemas, y actualmente trabajo como analista técnico y formador especializado en las soluciones empresariales de Microsoft (Office 365, Dynamics AX/365 y Power Platform).

Deja una respuesta

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

Volver arriba