Creator Kit: Modificar la Fuente del Command Bar

El 1 de Septiembre de 2022, se anunció la disponibilidad del Creator Kit de Power Apps para su uso en aplicaciones de producción. Aquí tenéis el comunicado: Introducing the Creator Kit – Efficiently create performant Fluent UI based Power Apps | Microsoft Power Apps

Este kit de componentes y plantillas permite dotar a nuestras aplicaciones de un aspecto más parecido al que tienen el resto de servicios de Microsoft 365 ya que está basado en Fluent UI que es el framework que utilizan dichos servicios.
En el siguiente enlace tenéis información sobre cómo instalarlo en vuestro entorno y cómo utilizar estos componentes: https://learn.microsoft.com/en-us/power-platform/guidance/creator-kit/overview

---

Hace unos días, Víctor Manuel Gutiérrez Jiménez me preguntaba en LinkedIn acerca de mi experiencia utilizando este Creator Kit ya que él había estado investigando y echaba de menos algunas cosas básicas, como por ejemplo el cambiar el tamaño de la letra de los elementos de la barra de comandos (Command Bar).

La verdad es que, hasta ahora, yo sólo lo había utilizado para hacer pruebas de concepto, pero, como él dice, los componentes aún no disponen de todas las parametrizaciones que tienen los componentes estándar… al menos de una forma sencilla.
De hecho, si accedéis a las discusiones en GitHub del powercat-creator-kit, veréis que hay más gente solicitando esta opción. Por ejemplo: https://github.com/microsoft/powercat-creator-kit/discussions/77

El caso es que, esta pregunta me sirvió como un pequeño reto para ver cómo podríamos modificar el tamaño de letra de este componente Command Bar. Aquí os muestro cómo lo conseguí:

DISCLAIMER: No sé si esta funcionalidad está soportada por los componentes para usarla en producción, así que tomadlo como una Prueba de Concepto.

---

El primer paso es acceder a la documentación oficial del componente: https://learn.microsoft.com/en-us/power-platform/guidance/creator-kit/commandbar

Como veréis allí, el componente está en Preview, lo que significa que aún no puede utilizarse en aplicaciones en Producción ya que puede sufrir modificaciones. Esperemos que una de esas modificaciones sea incluir el tamaño de la fuente ;-D

Si miráis el listado de propiedades en esa página, ninguna de ellas hace referencia al tamaño de letra, aunque sí que disponemos de una propiedad de estilo denominada Theme que permite configurar el control usando JSON y el framework Fluent UI.
Lo que ocurre, es que si acudís a la página que se indica para el diseñador de temas de Fluent UI (https://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/heads/master/theming-designer/) sólo vais a poder configurar los colores de los botones. En esa página, tras elegir vuestra configuración de colores, si pulsáis exportar y seleccionáis la pestaña JSON, obtendréis los parámetros que constituirán la paleta de vuestro control Command Bar.

Para utilizarlos, basta con almacenarlos en una variable de la siguiente forma:

Set(
    AppTheme2,
    /* START THEME OBJECT */
    {
        palette: {
                        themePrimary: "#d40000",
			themeLighterAlt: "#080000",
			themeLighter: "#220000",
			themeLight: "#3f0000",
			themeTertiary: "#7f0000",
			themeSecondary: "#ba0000",
			themeDarkAlt: "#d81616",
			themeDark: "#de3535",
			themeDarker: "#e76666",
			neutralLighterAlt: "#f8f8f8",
			neutralLighter: "#f4f4f4",
			neutralLight: "#eaeaea",
			neutralQuaternaryAlt: "#dadada",
			neutralQuaternary: "#d0d0d0",
			neutralTertiaryAlt: "#c8c8c8",
			neutralTertiary: "#110f31",
			neutralSecondary: "#231e62",
			neutralSecondaryAlt: "#231e62",
			neutralPrimaryAlt: "#332d90",
			neutralPrimary: "#3a33a3",
			neutralDark: "#5f58b9",
			black: "#827dcc",
			white: "#ffffff
        }
    }
    /* END THEME OBJECT */
);
Set(
    AppThemeJson2,
    JSON(
        AppTheme2,
        JSONFormat.IndentFour
    )
);

Y aplicarlo al control Command Bar en la propiedad Theme:

El problema es que en este diseñador de Fluent UI Theme, sólo se pueden configurar los colores y no se puede cambiar nada de la fuente de letra.

Sin embargo, al utilizar el framework Fluent UI, se me ocurrió que quizá podríamos utilizar esta propiedad Theme para incluir también allí los estilos de letra.
Después de buscar por Internet, llegué hasta la página de configuración de tipografía de Fluent UI: https://developer.microsoft.com/en-us/fluentui#/styles/web/typography

Si bajáis hasta el final de esa página, en la sección Customization podréis ver cómo se configuran las fuentes en este framework:

const appTheme = createTheme({
  defaultFontStyle: { fontFamily: 'Monaco, Menlo, Consolas', fontWeight: 'regular' },
  fonts: {
    small: {
      fontSize: '11px',
    },
    medium: {
      fontSize: '13px',
    },
    large: {
      fontSize: '20px',
      fontWeight: 'semibold',
    },
    xLarge: {
      fontSize: '22px',
      fontWeight: 'semibold',
    },
  },
});

Así pues, lo único que faltaba era incluir esta configuración dentro de nuestro Theme para la Command Bar.
Después de varias pruebas, observé que la fuente que utiliza el componente es la medium, por lo que sólo necesitamos esa parte. Para poder comprobar cómo se comporta el tamaño de fuente, lo que hice es incluir un Input Text Box (llamado ‘txtInput_FontSize’) en mi aplicación de test y un botón en el que se estableciese la variable del tema en el evento OnSelect referenciando el tamaño de la fuente con el valor del txtInput_FontSize de la siguiente forma:

UpdateContext({_varMFont: txtInput_FontSize.Text & "px"});
Set(
    AppTheme2,
    /* START THEME OBJECT */
    {
        defaultFontStyle: { fontFamily: "Monaco, Menlo, Consolas" },
        fonts: {            
            medium: {
                fontSize: _varMFont                
            }
        },
		palette: {
                        themePrimary: "#d40000",
			themeLighterAlt: "#080000",
			themeLighter: "#220000",
			themeLight: "#3f0000",
			themeTertiary: "#7f0000",
			themeSecondary: "#ba0000",
			themeDarkAlt: "#d81616",
			themeDark: "#de3535",
			themeDarker: "#e76666",
			neutralLighterAlt: "#f8f8f8",
			neutralLighter: "#f4f4f4",
			neutralLight: "#eaeaea",
			neutralQuaternaryAlt: "#dadada",
			neutralQuaternary: "#d0d0d0",
			neutralTertiaryAlt: "#c8c8c8",
			neutralTertiary: "#110f31",
			neutralSecondary: "#231e62",
			neutralSecondaryAlt: "#231e62",
			neutralPrimaryAlt: "#332d90",
			neutralPrimary: "#3a33a3",
			neutralDark: "#5f58b9",
			black: "#827dcc",
			white: "#ffffff"
        }
    }
    /* END THEME OBJECT */
);
Set(
    AppThemeJson2,
    JSON(
        AppTheme2,
        JSONFormat.IndentFour
    )
);

Así, el botón quedaría de la siguiente forma:

También creé otro botón que resetea el componentes a sus valores iniciales estableciendo de nuevo la variable AppThemeJson2 con los valores que tenía al comienzo:

Set(
    AppThemeJson2,
    JSON(
        AppTheme,
        JSONFormat.IndentFour
    )
);

De forma que el segundo botón quedaría de la siguiente forma:

Ahora ya podemos ver cómo se modifica el tamaño y tipo de letra en este componente Command Bar del Creator Kit:

NOTA: Lo que no parece funcionar es el parámetro fontWeight ya que he probado los diferentes valores posibles y siempre las letras aparecen igual.

---

Con esto concluyo este artículo sobre cómo modificar la fuente del componente Command Bar del Creator Kit.

Espero que os haya resultado útil.

¡Muchas gracias por leerme!