Etiqueta: Plantillas

Creando un Estilo para tu App: Tu Propio «Kit de Diseño»

Para que tu aplicación tenga un aspecto coherente y profesional, no puedes ir decidiendo los colores y las fuentes sobre la marcha. Lo que se hace es crear un «Kit de Diseño» o un «Manual de Estilo» desde el principio.

Piensa en ello como si fueras un diseñador de interiores: antes de empezar a decorar una casa, eliges la paleta de colores, el tipo de muebles y el estilo general. En Power Apps hacemos lo mismo.

Este «Kit de Diseño» se define en una propiedad de la aplicación llamada OnStart. Piensa en OnStart como lo primero que la app lee al «despertarse». Ahí es donde cargaremos todas nuestras reglas de estilo para que estén disponibles en toda la aplicación.

Los 4 Pilares de tu «Kit de Diseño»

Definiremos 4 grandes variables «globales» (recuerda, las que están disponibles en toda la casa) para guardar nuestro estilo:

Nombre de la Variable	Propósito (¿Qué guardamos aquí?)
gblAppColors	La Paleta de Colores oficial de la app.
gblAppFonts	Las Tipografías y Tamaños que usaremos (para títulos, texto normal, etc.).
gblAppIcons	Nuestro Set de Iconos personalizados.
gblAppDefaults	Las Reglas de Estilo por Defecto para todos los controles (botones, textos, etc.).

El Truco del Copia y Pega: Un consejo de profesional es tener una pantalla oculta en tu app llamada «Plantillas» o «Controles Maestros». En esa pantalla, dejas una copia de cada control (un botón, una etiqueta, etc.) ya con el estilo aplicado. Así, cuando necesites un botón nuevo, en lugar de crearlo de cero y aplicarle 10 propiedades de estilo, simplemente vas a tu pantalla oculta, copias el botón maestro y lo pegas donde lo necesites. ¡Te ahorrará horas de trabajo!

El Código Mágico para tu «Kit de Diseño»

Aquí tienes un ejemplo de código que puedes copiar y pegar directamente en la propiedad OnStart de tu aplicación para definir tu kit. Es un punto de partida genial.

Fragmento de código

// --- 1. La Paleta de Colores de la App ---
Set(
    gblAppColors,
    {
        // Colores principales de tu marca
        Primario1: ColorValue("#30475E"), // Un azul oscuro
        Primario2: ColorValue("#F05454"), // Un rojo coral
        Primario3: ColorValue("#222831"), // Casi negro
        Primario4: ColorValue("#DDDDDD"), // Un gris muy claro

        
        // Colores de acento para mensajes, alertas, etc.
        Negro: ColorValue("#000000"),
        Verde: ColorValue("#28A745"), // Para éxitos
        Rojo: ColorValue("#DC3545"), // Para errores
        Blanco: ColorValue("#FFFFFF"),
        Amarillo: ColorValue("#FFC107"), // Para avisos
        
        // Colores neutros (grises) para fondos, bordes, etc.
        GrisOscuro: ColorValue("#484644"),
        GrisMedio: ColorValue("#B3b0AD"),
        GrisClaro: ColorValue("#F3F2F1")
    }
);

// --- 2. Las Tipografías y Tamaños de la App ---
Set(
    gblAppFonts,
    {
        // Fuentes para los textos
        Titulos: "Roboto, Open Sans", // Si no encuentra Roboto, usará Open Sans
        Cuerpo: "Lato",
        
        // Tamaños estándar para no ir a ojo
        Tamaño: {
            Mini: 10,
            Normal: 13,
            Subtitulo: 16,
            Titulo: 20,
            Enorme: 28
        }
    }
);

// --- 3. Los Iconos Personalizados de la App ---
Set(
   gblAppIcons,
    {
       // El código de los iconos se guarda en una tabla de Excel llamada AppIcons
       Checklist: LookUp(AppIcons, Nombre="Checklist", CodigoSVG),
       Checkmark: LookUp(AppIcons, Nombre="Checkmark", CodigoSVG)
   }
);

// --- 4. Las Reglas de Estilo por Defecto para los Controles ---
// Esta es la parte más larga. Define cómo se verá un botón, una etiqueta, etc.
// por defecto, para no tener que configurarlo cada vez.
Set(
    gblAppDefaults,
    {
        // ... aquí iría toda la lista de propiedades por defecto ...
        // Por ejemplo:
        Altura: 40,
        ColorTexto: gblAppColors.Negro,
        RellenoBoton: gblAppColors.Primario1,
        ColorBotonHover: ColorFade(gblAppColors.Primario1, -10%), // Un poco más oscuro al pasar el ratón
        BordeRadio: 0 // Esquinas cuadradas por defecto
        
        // El código completo del ejemplo original iría aquí.
    }
);

El Truco de los Iconos (SVG)

Los iconos que no son estándar (como el logo de tu empresa) se suelen usar en formato SVG, que es básicamente código que dibuja una imagen. Para no ensuciar el código de la app, el truco es:

1. Crear un Excel con dos columnas: Nombre y CodigoSVG.
2. En cada fila, pones el nombre del icono (ej: «LogoEmpresa») y pegas todo el código SVG en la otra celda.
3. Usas la opción «Importar desde Excel» en Power Apps para añadir esa tabla a tu aplicación. ¡Y listo! Ya puedes llamar a tus iconos.

¿Te Parece Mucho Lío? ¡Usa una Plantilla!

Si todo lo anterior te parece demasiado trabajo, hay una solución más fácil. La comunidad ha creado plantillas que hacen todo esto por ti.

La más recomendada es la Plantilla de Branding de Sancho Harker. Es la mejor por varias razones:

• Súper rápido de configurar: Solo tienes que elegir 3 colores principales y la plantilla crea toda la paleta de colores y las reglas de estilo automáticamente.
• Totalmente personalizable: Si no te gusta cómo se ve un tipo de botón por defecto, puedes cambiarlo fácilmente.
• Funciona para los controles nuevos: Cualquier control nuevo que añadas a la app ya adoptará el estilo automáticamente. ¡Magia!
• ¡No necesitas licencia Premium! Funciona con cualquier licencia de Power Apps, ya que guarda toda la información de estilo dentro de la propia aplicación.