Acelera tu desarrollo en Power Apps: Crea tu propia biblioteca de componentes

Belén Marzo
Lead · UX/UI
14 agosto 2024
|
Tiempo de lectura
7 min

Cuando llevas un tiempo creando tus propias Power Apps, te das cuenta que hay ciertos elementos que utilizas en todas las aplicaciones, pero los creas una y otra vez en cada una de ellas. ¿Te has preguntado alguna vez si deberías crear tu propia biblioteca de componentes en Power Apps? Esta pregunta nos la hicimos hace algún tiempo en CrossPoint y decidimos que sí. Tras un tiempo usándola, queremos compartir nuestra experiencia sobre las ventajas y desventajas de crear tu propia biblioteca, así como algunos aprendizajes clave que debes tener en cuenta si decides llevarlo a cabo.

¿Cuándo surge la necesidad de usar una biblioteca?

Power Apps nos permite crear aplicaciones personalizadas para las necesidades de nuestra empresa. Para desarrollar estas aplicaciones de manera sencilla, ofrece muchas herramientas, como diferentes tipos de controles completos y variados, que nos ayudan a mantener un diseño consistente y ejecutable tanto en navegadores como en dispositivos móviles, sin necesidad de escribir casi código.

Controles de diseño en las bibliotecas de componentes de Power Apps

Últimamente, hemos observado un gran avance en los componentes modernos, los cuales están en constante evolución. Sin embargo, en ocasiones es necesario crearte tus propios componentes, ya sea porque un patrón de combinación de varios controles se repite, porque es un control que no está disponible en Power Apps, o porque necesitas mejorar o personalizar algún control para llevarlo a un nivel superior.

Ejemplos comunes son la creación de un modal o la mejora de las notificaciones que nos ofrece Power Apps. Este último es muy limitado y se muestra fuera del área de la propia aplicación, lo que hace que pase prácticamente inadvertido para los usuarios.

Notificación estándar de Power Apps

Cuando llevas varias aplicaciones en las que estas necesidades se repiten, te planteas cómo podrías agilizar esa creación: usando una biblioteca de componentes.

Usar una biblioteca de componentes ya existente

Existen en el mercado diferentes librerías de componentes disponibles, siendo Creator Kit una de las más extendidas. Esta librería, desarrollada por el equipo de Microsoft Power Cat, está basada en el framework Fluent UI, como ya comentamos en este artículo sobre Creator Kit.

Creator Kit de Power Apps

Sin duda, esta librería te aporta numerosos componentes y configuraciones muy útiles. Sin embargo, cuando trabajas con una librería ya existente, tanto la ampliación de las opciones de los componentes existentes, como la solución de posibles bugs o desarrollo de nuevos componentes está totalmente fuera de tu control.

En el caso del Creator kit, no ha sido actualizada con mucha frecuencia en los últimos tiempos, y nuestras necesidades seguían creciendo. Es entonces cuando surgió la pregunta: ¿Debería crearme mi propia biblioteca de componentes en Power Apps?  Esto es lo que concluimos de nuestra propia experiencia.

Ventajas de tener tu propia biblioteca de componentes

  • Personalización: Puedes crear los componentes según tu marca y estilo. Además, puedes hacerlos tan configurables como desees según los atributos que configures en cada uno de ellos.
  • Eficiencia: Al desarrollar un componente una sola vez y poder reutilizarlo posteriormente tantas veces como quieras, ganas eficiencia a la hora de crear tus aplicaciones.
  • Consistencia: El componente será estéticamente igual y funcionará del mismo modo en todas las pantallas de las diferentes aplicaciones donde lo utilices. Esto ayudará a que la experiencia del usuario sea consistente en todas ellas.
  • Control: Al ser tu propia biblioteca, tú decides cuándo crear una nueva versión o qué cambios deseas hacer. Esto te ofrece control y libertad total sobre tus componentes.
  • Repositorio centralizado y administrado: Te permite disponer fácilmente de la última versión de la biblioteca en las diferentes aplicaciones que desarrolles y que se puedan actualizar de manera sencilla.
Paleta de colores en la biblioteca de componentes de Power Apps

Desventajas de tener tu propia biblioteca de componentes

  • Mantenimiento: Una biblioteca de componentes no es algo estático, sino que está en continua evolución. Esto obliga a invertir tiempo en su mantenimiento para que sea consistente y manejable.
  • Alineamiento con Power Apps: Aunque tienes flexibilidad total a la hora de crear tus componentes, lo más habitual es que estos convivan con los controles propios de Power Apps en las pantallas. Por ello, deben mantener cierta similitud en el estilo de estos, para seguir con una consistencia en toda la aplicación.

Puntos clave a tener en cuenta al crear tu biblioteca

  • Reusabilidad: Aunque es posible que tu componente inicialmente solo se use en una aplicación, con el tiempo debería usarse en varias. Para que esto ocurra, los componentes deben ser configurables (por ejemplo, los textos o eventos que puedan tener). Dedica un tiempo inicial a pensar bien qué atributos configurables debe tener el componente para evitar modificaciones posteriores.
  • Responsive: Hay que tener en cuenta que los componentes se pueden mostrar en diferentes dispositivos o el espacio de la pantalla donde se visualicen puede ser diferente. Así que debemos crearlos de manera que se adapten al tamaño disponible. Esto nos llevará algo más de tiempo al crearlos, pero hará que los podamos reutilizar con más frecuencia y con mejores resultados.
  • Accesibles: Debemos cuidar las propiedades que nos ofrece Power Apps para asegurar que nuestra aplicación es accesible. Puedes usar el comprobador de accesibilidad para facilitar esta tarea.
  • Documentación: Lo más habitual es que la biblioteca sea usada por varios miembros del equipo. Por ello, tener una documentación actualizada y sencilla a disposición de todo el equipo es clave para estar alineados y saber qué hay disponible.
  • Nomenclatura: Es más importante de lo que pensamos, ya que aplicarla a posteriori llevará un coste extra innecesario. Todos los componentes, controles y atributos deberían seguir unas reglas definidas y conocidas por el equipo. Esto reducirá el tiempo que tenemos que dedicar al pensar nombres en cada componente y facilitará su lectura posterior.
  • Ciclo de vida: Definir un ciclo de vida y seguirlo entre todos los miembros del equipo es básico para sacar el máximo partido a tu biblioteca de manera sencilla. Esto hará que el tiempo invertido en el mantenimiento se reduzca.

Teniendo todo esto en cuenta, quizás puedas evaluar más fácilmente si desarrollar una biblioteca de componentes aportará valor a tu día a día. En nuestro caso personal ha sido muy positivo generar nuestra propia biblioteca, ya que la estamos usando en numerosas aplicaciones, aportándoles un gran valor añadido, y seguimos ampliándola y manteniéndola día a día.

Aquí puedes ver la notificación personalizada en nuestra librería de componentes, en contraste con la que viene por defecto y que mostrábamos más arriba.

En cada caso, dependerá del número de Power Apps que hay o está previsto desarrollar a corto/medio plazo y el tiempo del que se dispone para crearla. Es importante tener en cuenta que no es necesario generarla toda de golpe, sino que es más recomendable ir ampliándola a medida que se vayan necesitando componentes. Esto reducirá el tiempo inicial de creación.

Si quieres preparar a tu equipo para que puedan crear sus propios componentes, quizás te interese nuestro Curso online de Diseño UX/UI en aplicaciones de lienzo de Power Apps. Puedes ponerte en contacto con nosotros si necesitas que te ayudemos con el desarrollo de tus Power Apps o crees que podemos acompañarte en cualquier necesidad que surja.

 Artículos RelacionadosVer todos los artículos
Ver todos los artículos
crosschevron-downarrow-up
CrossPoint
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.