Compartir a través de

Usar temas modernos

  • Artículo

Los usuarios de aplicaciones basadas en modelos con la experiencia del aspecto moderno y renovado para aplicaciones basadas en modelos habilitada proporcionan un estilo actualizado alineado con el sistema de diseño Microsoft Fluent 2. Debido a que esta apariencia moderna y renovada viene con un nuevo sistema de temas, no se respeta el tema clásico ; sin embargo, los creadores pueden modificar los colores utilizados por el encabezado de la aplicación para los usuarios que han habilitado la apariencia moderna y renovada. En este artículo, conocerá las anulaciones de estilos disponibles con una apariencia moderna y renovada y cómo implementarlas en su organización.

Nota

  • Actualmente, los temas modernos solo permiten personalizar el encabezado de la aplicación. Otras personalizaciones, como personalizar el control flujo de proceso de negocio, no están disponibles.
  • Para que los temas modernos funcionen, la aplicación basada en modelos debe utilizar el Nuevo aspecto. Más información: Aspecto moderno, actualizado para aplicaciones basadas en modelos

Modificar los colores del encabezado de la aplicación

Con el aspecto moderno y renovado habilitado en la aplicación, los creadores pueden modificar los colores utilizados en el encabezado de la aplicación para alinearlos con su marca organizacional. Para lograr esto, encapsule los colores deseados en un recurso XML, use una configuración de aplicación para apuntar a este recurso web y luego verifique que los cambios de color coincidan con las expectativas.

Nota

Esta función está disponible en la versión 9.2.23094 o posteriores.

Descripción general del recurso XML que se utilizará para los colores del encabezado de la aplicación

El primer paso para modificar el estilo del encabezado de la aplicación es crear un archivo XML con las distintas selecciones de color. Posteriormente, crea un recurso web XML con uno o más de los siguientes atributos definidos dentro de una etiqueta AppHeaderColors.

  • Background - El color de fondo del encabezado de la aplicación. Este elemento debe definirse para que cualquier cambio surta efecto.
  • Foreground - El color de texto del encabezado de la aplicación. Si no se especifica esto, el sistema intenta calcular un color apropiado que tenga suficiente contraste con el color de fondo proporcionado.
  • BackgroundHover – El color de fondo de los botones en el encabezado de la aplicación cuando se pasa sobre ellos. Si no se especifica ningún valor, el sistema calcula un color basándose en el color de fondo.
  • ForegroundHover – El color del texto de los botones en el encabezado de la aplicación cuando se pasa sobre ellos. Si no se especifica un valor, el sistema intenta calcular un color apropiado que tenga suficiente contraste con el color de backgroundHover.
  • BackgroundPressed – El color de fondo de los botones en el encabezado de la aplicación cuando se pulsan. La lógica predeterminada es la misma que la de backgroundHover.
  • ForegroundPressed – El color del texto de los botones en el encabezado de la aplicación cuando se pulsan. La lógica predeterminada es la misma que la de foregroundHover.
  • BackgroundSelected – El color de fondo de los botones en el encabezado de la aplicación cuando se seleccionan. La lógica predeterminada es la misma que la de backgroundHover.
  • ForegroundSelected – El color del texto de los botones en el encabezado de la aplicación cuando se seleccionan. La lógica predeterminada es la misma que la de backgroundHover.

XML de ejemplo para un tema moderno

Como ejemplo, este XML especifica un color de fondo verde para el encabezado de la aplicación con texto blanco, con colores de fondo más oscuros para los distintos estados de interacción de los botones. Para una usabilidad óptima, recomendamos especificar diferentes valores de color para cada estado.

<AppHeaderColors 
  background="#12783F"
  foreground="#FFFFFF" 
  backgroundHover="#165A31" 
  foregroundHover="#FFFFFF"
  backgroundPressed="#0F1C12"
  foregroundPressed="#FFFFFF"
  backgroundSelected="#153D23" 
  foregroundSelected="#FFFFFF"
/>

Crear el recurso web

  1. Utilizando un editor de texto o XML, guarde el XML que se utiliza para crear el recurso web. XML de ejemplo para un tema moderno
  2. Inicie sesión en Power Apps.
  3. Seleccione Soluciones en el panel de navegación izquierdo y, a continuación, cree una Solución nueva.
  4. Seleccione Nuevo > Más > Recurso.
  5. En el panel de propiedades del recurso Nueva web, introduzca los valores siguientes:
    • Nombre para mostrar: introduzca un nombre para mostrar, como XML para temas modernos.
    • Nombre. Introduzca el nombre único del recurso web.
    • Tipo: Datos (XML)
  6. Seleccionar Elegir archivo, busque y luego seleccione el archivo XML que creó anteriormente con el tema.
  7. Seleccione Guardar. Publique esta personalización con los pasos de la siguiente sección.

Aplique colores de encabezado de aplicación personalizados a las aplicaciones de su entorno

Después de seleccionar los colores y crear el recurso web, siga estos pasos para habilitar el estilo del encabezado de esta aplicación para todas las aplicaciones de su entorno que tengan el Nuevo aspecto activado.

  1. En la solución que utilizó para crear el recurso web, seleccione Agregar existente > Más > Configuración.
  2. Escriba Anular en el cuadro Buscar , seleccione Anular color del encabezado de la aplicación, seleccione Siguiente y luego seleccione Agregar.
  3. En la solución, seleccione Anular color del encabezado de la aplicación y luego seleccione Editar en la barra de comandos.
  4. En el panel derecho Editar anulación del color del encabezado de la aplicación, seleccione Configurar valor de entorno e ingrese el nombre único de su recurso web que creó anteriormente. Asegúrese de agregar el prefijo del editor para el recurso web y no incluya comillas. Por ejemplo, el nombre podría aparecer como contoso_xmlfor-modern-theme como en este ejemplo. Configuración de entorno para un tema con nombre único de recurso web contoso_xmlfor-modern-theme.
  5. Seleccione Guardar.
  6. En la lista de comandos, seleccione Publicar todas las personalizaciones. (Este comando aparece cuando no se selecciona ningún componente en la solución).

Con los colores de ejemplo, el encabezado de la aplicación debería verse así cuando reproduzcas la aplicación (es posible que tenga que actualizar la pestaña del navegador).
Encabezado de aplicación verde en una aplicación basada en modelos

Verificar los colores del encabezado de la nueva aplicación

Después de publicar los nuevos colores del encabezado de la aplicación, querrá validar las imágenes del encabezado de la aplicación, incluidos todos los estados de los botones, para asegurarse de que todo aparezca como espera y que haya suficientes relaciones de contraste para la accesibilidad. Debe verificar las siguientes opciones de color:

  • Los colores deseados se muestran para el encabezado de la aplicación en reposo y para cada estado de interacción del botón.
  • Hay una relación de contraste mínima de 4,5:1 entre los colores de primer plano y de fondo para el estado de reposo y cada estado de interacción de los botones.

Consulte también

Aspecto moderno y renovado

Nota

¿Puede indicarnos sus preferencias de idioma de documentación? Realice una breve encuesta. (tenga en cuenta que esta encuesta está en inglés)

La encuesta durará unos siete minutos. No se recopilan datos personales (declaración de privacidad).