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

Artículo
03/16/2023

Este artículo proporciona sugerencias para diseñar una página personalizada para su uso en una aplicación basada en modelos.

Importante

Las páginas personalizadas son una nueva característica con cambios significativos en el producto y actualmente tienen una serie de limitaciones conocidas descritas en Problemas conocidos de la página personalizada.

Controles admitidos en una página personalizada

La creación de páginas personalizadas actualmente admite un subconjunto de controles de aplicaciones de lienzo. La tabla inferior muestra los controles admitidos actualmente.

Control	Tipo de control	Notas
Etiqueta¹	Mostrar
Cuadro de texto¹	Entrada
Selector de fecha¹	Entrada
Botón¹	Entrada
Cuadro combinado¹	Entrada
Casilla de comprobación¹	Entrada
Alternar ¹	Entrada
Grupo de botones de opción¹	Entrada
Barra deslizante¹	Entrada
Clasificación¹	Entrada
Contenedor vertical	Diseño	Nuevo contenedor de diseño horizontal receptivo
Contenedor horizontal	Diseño	Nuevo contenedor de diseño horizontal receptivo
Editor de texto enriquecido	Entrada
Galería	Lista
Icono	Medios
Imagen	Medios
Editar formulario	Entrada
Mostrar formulario	Entrada
Componentes de código	Personalizadas	Agregar componentes de código a una página personalizada
Componentes de lienzo (versión preliminar)	Personalizadas	Agregar componentes de lienzo a una página personalizada

¹ Control es un nuevo control moderno. El control fue introducido para aplicaciones de lienzo en Teams. El control se basa en Biblioteca de Fluent UI envuelto con 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 obtener artículos sobre extensibilidad de UX específicos de páginas personalizadas, consulte agregar componentes de lienzo a una página personalizada para su aplicación basada en modelos y agregar componentes de código a una página personalizada para su aplicación basada en 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:

Habilite el diseño receptivo con control de contenedores

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 el diseñador de aplicaciones de lienzo 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 admitir páginas que se ajustan desde el escritorio con un ancho estrecho, habilite estas propiedades en un contenedor horizontal con 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. Considere el relleno del contenedor o el control, así como en los contenedores principales.

Envoltura vertical de un contenedor de ancho flexible

Para admitir páginas que se ajustan desde el escritorio con un ancho estrecho, habilite 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. Considere el relleno del contenedor o el control, así como en los contenedores principales.

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

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

En Contenedor vertical, establezca Alinear (horizontal) a Stretch
Inserte tres controles Contenedor horizontal controles dentro del Contenedor vertical primario
En el primer y tercer control de contenedor horizontal secundario, establezca Estirar la altura y reduzca la altura al espacio necesario, como Altura = 80.

Recipiente horizontal con dos contenedores secundarios iguales

En el Contenedor horizontal primario, establezca Alinear (vertical) a Stretch.
Inserte dos controles Contenedor vertical controles dentro del Contenedor horizontal primario.

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

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

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. Tabulaciones individuales dentro de elementos de agrupación más grandes como componentes, los contenedores se navegan primero antes de que la pestaña se mueva al siguiente elemento en el árbol del modelo de objetos de documento (DOM).

A continuación, se muestra un ejemplo de navegación con la página que contiene controles, código y componentes y contenedores de lienzo.

Nota

Los controles y elementos superpuestos en la página personalizada no tendrán su DOM combinado, por lo que las tabulaciones pueden estar desincronizadas con respecto al diseño visual. Lo mismo ocurre con el posicionamiento dinámico de elementos mediante fórmulas.