Dissenyar una pàgina personalitzada per a una aplicació basada en models

Article
03/14/2023

Aquest article proporciona consells sobre com dissenyar una pàgina personalitzada per utilitzar amb una aplicació basada en models.

Important

Les pàgines personalitzades són una característica nova amb canvis importants de productes i actualment tenen diverses limitacions conegudes destacades a Problemes coneguts de la pàgina personalitzada.

Controls admesos en una pàgina personalitzada

Crear una pàgina personalitzada actualment admet un subconjunt de controls de l'aplicació del lllenç. La taula a continuació indica els controls admesos actualment.

Control	Tipus de control	Notes
Etiqueta¹	Visualització
Quadre de text¹	Entrada
Selector de dades¹	Entrada
Botó¹	Entrada
Combo Box¹	Entrada
Check Box¹	Entrada
Commutador¹	Entrada
Grup d'opcions¹	Entrada
Lliscador¹	Entrada
Valoració¹	Entrada
Contenidor vertical	Disposició	Cpoontenidor de disposició horitzontal responsiu nou
Contenidor horitzontal	Disposició	Cpoontenidor de disposició horitzontal responsiu nou
Editor de text enriquit	Entrada
Galeria	Llista
Icona	Fitxer multimèdia
Image	Fitxer multimèdia
Editar el formulari	Entrada
Formulari de visualització	Entrada
Components de codi	Personalització	Afegir components de codi a una pàgina personalitzada
Components del llenç (versió preliminar)	Personalització	Afegir components de llenç a una pàgina personalitzada

¹ El control és un control modern nou. El control es va introduir per aplicacions de llenç a Teams. El control es basa en una biblioteca de IU embolcallada amb Power Apps Component Framework.

Personalitzar la compatibilitat de components per a una pàgina personalitzada

Podeu afegir components UX personalitzats de codi baix (components de llenç) i pro-codi (components de codi) al vostre entorn i fer-los disponibles per a tots els fabricants. Per als articles d'extensibilitat UX específics de pàgina personalitzada, vegeu afegir components de llenç a una pàgina personalitzada per a l'aplicació basada en models i afegir components de codi a una pàgina personalitzada per a l'aplicació basada en models.

En general, l'enfocament d'extensibilitat de codi baix és més senzill de construir, provar i té un cost de manteniment més baix. Recomanem avaluar primer els components del llenç i després utilitzar components de codi només si hi ha necessitat d'una personalització més complexa i avançada.

Més informació:

Habilita la disposició responsiva amb control de contenidor

Les disposicions de pàgines personalitzades responsives es defineixen mitjançant la creació d'una jerarquia de controls de Contenidors de disposició horitzontal i Contenidors de disposició vertical. Aquests controls es troben al dissenyador d'aplicacions del llenç, a Disposició, a la pestanya Insereix.

Definiu l'alçada i l'amplada mínima de la pantalla a l'objecte Aplicació per impedir l'ús de les barres de desplaçament del nivell de pàgina i utilitzeu una barra de desplaçament vertical del cos.

MinScreenHeight=200
MinScreenWidth=200

O bé, la mida del disseny de pàgina personalitzada es pot ajustar a Configuració > Visualització amb Mida definida en Personalitzada. A continuació, definiu l'amplada i l'alçada en una mida de pàgina personalitzada de l'escriptori més habitual, com ara l'amplada 1080 i l'alçada 768. Si canvieu aquesta opció després d'afegir els controls a la pantalla, pot ser que es restableixin algunes propietats de disposició.

Definiu el contenidor més superior per emplenar tot l'espai i canviar la mida segons l'espai disponible.

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

Ajustament horitzontal d'un contenidor d'alçada flexible

Per admetre les pàgines que s'ajusten des de l'escriptori fins a l'amplada estreta, habiliteu aquestes propietats en un contenidor horitzontal amb una alçada flexible. Sense aquesta configuració, la pàgina retallarà els controls quan la pàgina estigui estreta.

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

Els contenidors secundaris o els controls directament sota aquest contenidor s'han de definir com a amplada mínima que permet que la pàgina s'ajusti a una amplada de 300 píxels. Considereu l'espaiat al contenidor o al control i als contenidors principals.

Ajustament vertical d'un contenidor d'amplada flexible

Per admetre les pàgines que s'ajusten des de l'escriptori fins a l'amplada estreta, habiliteu aquestes propietats en un contenidor vertical amb una amplada flexible. Sense aquesta configuració, la pàgina retallarà els controls quan la pàgina estigui estreta.

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

Els contenidors secundaris o els controls directament sota aquest contenidor s'han de definir com a alçada mínima que permet que la pàgina s'ajusti a una amplada de 300 píxels. Considereu l'espaiat al contenidor o al control i als contenidors principals.

Més informació: Crear una disposició responsiva.

Contenidor vertical amb capçalera fixa, cos flexible i peu de pàgina fix

Al Contenidor vertical, establiu Alinea (horitzontalment) a Estira
Insereix tres controls de Contenidor horitzontal dins del Contenidor vertical principal
Al primer i tercer controls de contenidor horitzontals secundaris, desactiveu l'Alçada d'estirament i reduïu l'alçada a l'espai necessari, com ara Alçada=80.

Contenidor horitzontal amb dos contenidors secundaris iguals

Al Contenidor horitzontal principal, establiu Alinea (horitzontal) a Estira.
Insereix dos controls de Contenidor vertical dins del Contenidor horitzontal .principal

S'estan estilitzant els controls de pàgina personalitzats per alinear-se amb els controls d'aplicacions basades en models

En crear la pàgina personalitzada des del dissenyador d'aplicacions modern, aquestes característiques utilitzen els valors predeterminats.

Tema de la pàgina personalitzada. Els valors de tema dels controls utilitzats en una pàgina personalitzada s'estableixen automàticament perquè coincideixin amb el tema blau per defecte de la Interfície unificada. Aquest tema predeterminat s'utilitza tant en l' estudi com en el temps d'execució de l'aplicació. La selecció explícita de temes se suprimeix de l'experiència de creació de pàgines personalitzada.
Els controls han d'utilitzar una mida de lletra diferent, que es basa en la seva posició a la jerarquia de pàgines.

Nota

El text de la pàgina personalitzada té un escalat de 1,33, de manera que heu de dividir el Tipus de lletra objectiu FontSizeper 1,33 per obtenir la mida desitjada.

Tipus d'etiqueta Mida de FontSize FontSize a utilitzar

Títol de la pàgina 17 12.75

Etiquetes normals 14 10.52

Etiquetes petites 12 9.02

Tipus d'etiqueta	Mida de FontSize	FontSize a utilitzar
Títol de la pàgina	17	12.75
Etiquetes normals	14	10.52
Etiquetes petites	12	9.02

Els controls de botons primaris i secundaris necessiten els canvis d'estil següents:

Botons principals

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

Botons secundaris

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

Les pàgines personalitzades segueixen el mateix disseny de navegació de pestanyes que utilitza l'aplicació basada en models d'allotjament. L'estructura HTML semàntica alineada visualment ajuda els usuaris a navegar per les pàgines personalitzades sense problemes quan utilitzen un teclat o un lector de pantalla. Tingueu en compte que, a diferència de les aplicacions de llenç independent, els controls de pàgina personalitzats i altres elements d'UX no necessiten assignacions explícites de números de pestanya. Els controls moderns no tenen una propietat TabIndex i utilitzen l'estructura d'HTML semàntica per a la navegació.

Diversos elements, com ara controls, components de llenç i codi, contenidors, etc., es poden convertir en pestanyes en funció de la seva posició en la disposició de pàgina personalitzada. La navegació per pestanyes segueix la navegació per ordre Z. Tabuladors individuals dins d'elements d'agrupament més grans, com ara components o contenidors, es visiten primer abans que la pestanya es desplaci cap a l'element següent de l'arbre model d'objecte de document (DOM).

Aquí teniu un exemple de navegació amb la pàgina que conté controls, codi i components i contenidors del llenç.

Nota

Els controls i elements superposats de la pàgina personalitzada no tindran el seu DOM combinat de manera que els tabuladors podran estar fora de sincronització des de la disposició visual. El mateix passa amb el posicionament de l'element dinàmic mitjançant fórmules.