Diseñe una página personalizada para su aplicación basada en modelo

Este artículo proporciona sugerencias para diseñar una página personalizada para su uso en una aplicación basada en modelos. Una página personalizada te permite crear una página similar a una aplicación de lienzo en la aplicación basada en modelos.

Controles admitidos en una página personalizada

La creación de páginas personalizada admite un subconjunto de controles de aplicación de lienzo. En la tabla siguiente se enumeran los controles admitidos actualmente.

¹ Control es un control nuevo y moderno. El control fue introducido para aplicaciones de lienzo en Teams. El control se basa en la biblioteca Fluent UI, encapsulada en Power Apps Component Framework.

Soporte de componentes personalizados para página personalizada

Puede agregar componentes UX personalizados de código bajo (componentes de lienzo) y código profesional (componentes de código) a su entorno y ponerlos a disposición de todos los fabricantes. Para ver artículos sobre extensibilidad de la experiencia de usuario (UX) específicos de páginas personalizadas, vaya a agregar componentes de lienzo a una página personalizada para su aplicación controlada por modelos y agregar componentes de código a una página personalizada para su aplicación controlada por modelos.

En general, el enfoque de extensibilidad de código bajo es más simple de construir, probar y tiene un costo de mantenimiento más bajo. Recomendamos evaluar primero los componentes del lienzo y luego usar los componentes de código solo si existe la necesidad de una personalización más compleja y avanzada.

Más información:

• Galería de componentes de lienzo
• Muestras de componentes de código
• Recursos de la comunidad de componentes de código

Habilitar diseño adaptable con control de contenedor

Los diseños de página personalizados receptivos se definen mediante la construcción de una jerarquía de controles Contenedor de diseño horizontal y Contenedor de diseño vertical. Estos controles se encuentran en Power Apps Studio en Diseño en la pestaña Insertar.

Establezca la altura y el ancho mínimos de la pantalla en el objeto Aplicación para evitar las barras de desplazamiento en el nivel de página y utilizar una barra de desplazamiento vertical del cuerpo.

MinScreenHeight=200
MinScreenWidth=200

Opcionalmente, el tamaño del diseño de página personalizado se puede ajustar en Configuración>Pantalla con Tamaño ajustado a Personalizado. Luego configure el Ancho y la Altura a un tamaño de página personalizado de escritorio más típico, como ancho de 1080 y alto de 768. Cambiar esta configuración después de agregar controles a la pantalla puede hacer que algunas propiedades de diseño se restablezcan.

Configure el contenedor superior para llenar todo el espacio y cambie el tamaño según el espacio disponible.

X=0
Y=0
Width=Parent.Width
Height=Parent.Height

Envoltura horizontal de un contenedor de altura flexible

Para permitir que las páginas se ajusten desde la vista de escritorio hasta un ancho reducido, active estas propiedades en un contenedor horizontal de altura flexible. Sin esta configuración, la página recortará los controles cuando la página sea estrecha.

Direction=Horizontal
FlexibleHeight=true
Justify=Stretch
Align=Stretch
VerticalOverflow=Scroll
Wrap=True

Los contenedores o controles secundarios directamente dentro de este contenedor deben configurarse para que tengan un ancho mínimo que permita que la página se ajuste a un ancho de 300 px. Tenga en cuenta el relleno del contenedor o del control, así como el de los contenedores padre.

Envoltura vertical de un contenedor de ancho flexible

Para permitir que las páginas se ajusten desde el escritorio hasta un ancho reducido, active estas propiedades en un contenedor vertical con anchura flexible. Sin esta configuración, la página recortará los controles cuando la página sea estrecha.

Direction=Vertical
FlexibleWidth=true
Justify=Stretch
Align=Stretch
HorizontalOverflow=Scroll
Wrap=True

Los contenedores o controles secundarios directamente dentro de este contenedor deben configurarse para que tengan una altura que permita que la página se ajuste a un ancho de 300 px. Tenga en cuenta el relleno del contenedor o del control, así como el de los contenedores padre.

Más información: Crear diseño dinámico.

Contenedor vertical con encabezado fijo, cuerpo flexible, pie de página fijo

1. En el Contenedor vertical, configure Alinear (horizontal) como Estirar

2. Inserte tres controles Contenedor horizontal dentro del Contenedor vertical principal.

3. En el primer y el tercer controles secundarios de contenedor horizontal, desactive Estirar altura y reduzca la altura al espacio necesario, como Altura=80.

Contenedor horizontal con dos contenedores hijos del mismo tamaño

1. En el Contenedor horizontal primario, establezca Alinear (vertical) a Stretch.

2. Inserte dos controles Contenedor vertical dentro del Contenedor horizontal principal.

Aplicar estilos a los controles de página personalizados para alinearlos con los controles de aplicaciones controlados por modelos

Al crear la página personalizada desde el diseñador de aplicaciones moderno, estas características utilizan los valores predeterminados.

• Tema para la página personalizada. Los valores de tema para los controles utilizados en una página personalizada se configuran automáticamente para que coincidan con el tema azul predeterminado de Interfaz unificada. Este tema predeterminado se usa tanto en el estudio como en el tiempo de ejecución de la aplicación. La selección explícita de temas se elimina de la experiencia de creación de páginas personalizadas.

• Los controles deben usar un tamaño de fuente diferente, que se basa en su posición en la jerarquía de la página.

  Nota

  El texto de la página personalizada tiene una ampliación de 1,33, por lo que debe dividir el objetivo Tamaño de fuente por 1,33 para obtener el tamaño deseado.

  Tipo de etiqueta	Tamaño de fuente de destino	Tamaño de fuente que se usará
  Título de página	17	12.75
  Etiquetas normales	14	10,52
  Etiquetas pequeñas	12	9,02

• Los controles de botones primarios y secundarios necesitan los siguientes cambios de estilo:

  Botones principales

  Color=RGBA(255, 255, 255, 1)
  Fill=RGBA(41,114,182,1)
  Height=35
  FontWeight=Normal
  

  Botones secundarios

  Color=RGBA(41,114,182,1)
  Fill=RGBA(255, 255, 255, 1)
  BorderColor=RGBA(41,114,182,1)
  Height=35
  FontWeight=Normal
  

Navegación por pestañas y accesibilidad del teclado para páginas personalizadas

Las páginas personalizadas siguen el mismo diseño de navegación de pestañas que utiliza la aplicación basada en el modelo de alojamiento. La estructura HTML semántica alineada visualmente ayuda a los usuarios a navegar por las páginas personalizadas sin problemas cuando usan un teclado o un lector de pantalla. Tenga en cuenta que, a diferencia de las aplicaciones de lienzo independientes, los controles de página personalizados y otros elementos de UX no necesitan asignaciones explícitas de números de pestaña. Los controles modernos no tienen propiedad TabIndex y utilizan la estructura HTML semántica para la navegación.

Varios elementos como controles, componentes de código y lienzo, contenedores, etc., se pueden colocar en pestañas según su posición en el diseño de página personalizado. La navegación por pestañas sigue la navegación por orden Z. Las posiciones de tabulación individuales dentro de elementos de agrupación más grandes, como componentes y contenedores, se recorren primero antes de pasar al siguiente elemento del árbol del modelo de objetos del documento (DOM).

Aquí tienes un ejemplo de navegación con una página que incluye controles, código y componentes y contenedores de lienzo.

Consultar también

Descripción general de las páginas personalizadas en aplicaciones basadas en modelos

Usar PowerFx en una página personalizada

Crear un diseño dinámico

Agregar una página personalizada a su aplicación basada en modelo

Actualización de controles de la interfaz de usuario de Fluent a controles modernos