Dissenyar una pàgina personalitzada per a una aplicació basada en models (versió preliminar)

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

Important

  • La funcionalitat base de les pàgines personalitzades s'ha traslladat a la disponibilitat general en totes les regions. No obstant això, algunes capacitats específiques o noves encara estan en visualització prèvia pública i estan marcades amb (vista prèvia).
  • Les característiques de visualització prèvia no estan dissenyades per a un entorn de producció i poden tenir una funcionalitat restringida. Aquestes característiques estan disponibles abans d’un llançament oficial de producte per tal que els clients el puguin utilitzar abans i enviar-nos els seus comentaris.
  • 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
Etiqueta1 Visualització
Quadre de text1 Entrada
Selector de dades1 Entrada
Botó1 Entrada
Combo Box1 Entrada
Check Box1 Entrada
Commutador1 Entrada
Grup d'opcions1 Entrada
Lliscador1 Entrada
Valoració1 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ç (visualització prèvia) Personalització Afegir components de llenç a una pàgina personalitzada

1 El control és un control modern nou. El control es va introduir per aplicacions de llenç a Teams. El control es basa en la biblioteca d'interfície d'usuari fluida embolicada amb Power Apps Marc de components.

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ínimes de la pantalla a l'objecte Aplicació per evitar les barres de desplaçament del nivell de pàgina i utilitzeu una barra de desplaçament del cos vertical.

MinScreenHeight=200
MinScreenWidth=200

Opcionalment, la mida del disseny de pàgina personalitzada es pot ajustar a Configuració De la pantalla amb la mida establerta a Personalitzat > · · ·. A continuació, establiu l'amplada i l'alçada a una mida de pàgina personalitzada de l'escriptori més típica, com ara l'amplada 1080 i l'alçada 768. Si canvieu aquesta configuració després d'afegir controls a la pantalla, és possible que algunes propietats de disposició es restableixin.

Establiu el contenidor superior per omplir tot l'espai i canviar la mida en funció de l'espai disponible.

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

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

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

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

Els contenidors o controls secundaris directament sota aquest contenidor s'han de configurar perquè tinguin una amplada mínima que permeti que la pàgina s'ajusti a una amplada de 300 px. Penseu en el farciment al contenidor o control, així com els contenidors principal.

Ajustament vertical d'un contenidor d'amplada flexible

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

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

Els contenidors o controls secundaris directament sota aquest contenidor s'han de configurar perquè tinguin una alçada mínima que permeti que la pàgina s'ajusti a una amplada de 300 px. Penseu en el farciment al contenidor o control, així com els contenidors principal.

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

  1. Al Contenidor vertical, establiu Alinea (horitzontalment) a Estira

  2. Insereix tres controls de Contenidor horitzontal dins del Contenidor vertical principal

  3. 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

  1. Al Contenidor horitzontal principal, establiu Alinea (horitzontal) a Estira.

  2. 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 FontSize per 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
  • 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
    

Navegació per pestanyes i accessibilitat del teclat per a pàgines personalitzades

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ç.

Navegació de pestanyes de pàgina personalitzada.

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.

Consulteu també

Versió preliminar d'una pàgina personalitzada d'una aplicació basada en models

Utilitzar el PowerFx en una pàgina personalitzada

Crear una disposició amb capacitat de resposta

Afegir una pàgina personalitzada a l'aplicació basada en models