Partager via


Concevoir une page personnalisée pour votre application pilotée par modèle

Cet article fournit des conseils pour concevoir une page personnalisée à utiliser dans une application basée sur un modèle.

Important

Les pages personnalisées sont une nouvelle fonctionnalité avec des modifications importantes du produit et présentent actuellement un certain nombre de limitations connues décrites dans Problèmes connus de la page personnalisée.

Contrôles pris en charge dans une page personnalisée

La création de pages personnalisées prend actuellement en charge un sous-ensemble de contrôles d’application canevas. Le tableau ci-dessous répertorie les contrôles actuellement pris en charge.

Control Type de contrôle Notes
Étiquette1 Affichage
Zone de texte1 Entrée
Sélecteur de dates1 Entrée
Bouton1 Entrée
Zone de liste déroulante1 Entrée
Case à cocher1 Entrée
Bascule1 Entrée
Groupe de cases d’option1 Entrée
Curseur1 Entrée
Évaluation1 Entrée
Conteneur vertical Disposition Nouveau conteneur de mise en page horizontale réactive
Conteneur horizontal Disposition Nouveau conteneur de mise en page horizontale réactive
Éditeur de texte enrichi Entrée
Galerie Liste
Icône Médias
Image Médias
Modifier le formulaire Entrée
Formulaire d’affichage Entrée
Composants de code Personnalisé(e) Ajouter des composants de code à une page personnalisée
Composants de canevas (version préliminaire) Personnalisé(e) Ajouter des composants canevas à une page personnalisée

1 Le contrôle est un nouveau contrôle moderne. Le contrôle a été introduit pour les applications canevas dans Teams. Le contrôle est basé sur la Bibliothèque Fluent UI enveloppé avec le Power Apps Component Framework.

Prise en charge des composants personnalisés pour la page personnalisée

Vous pouvez ajouter à la fois des composants UX personnalisés low-code (composants canevas) et pro-code (composants code) à votre environnement et les rendre disponibles pour tous les créateurs. Pour les articles d’extensibilité UX spécifiques aux pages personnalisées, consultez Ajouter des composants canevas à une page personnalisée pour votre application basée sur un modèle et Ajouter des composants de code à une page personnalisée pour votre application basée sur un modèle.

En général, l’approche d’extensibilité low-code est plus simple à construire, à tester et a un coût de maintenance plus faible. Nous vous recommandons d’évaluer d’abord les composants canevas, puis d’utiliser des composants de code uniquement si une personnalisation plus complexe et avancée est nécessaire.

Pour plus d’informations :

Activer la mise en page réactive avec le contrôle Conteneur

Les mises en page personnalisées réactives sont définies en créant une hiérarchie de contrôles Conteneur de disposition horizontale et Conteneur de disposition verticale. Ces contrôles se trouvent dans le concepteur d’application canevas sous Disposition sur l’onglet Insérer.

Réglez la hauteur et la largeur minimales de l’écran sur l’objet Application pour empêcher les barres de défilement au niveau de la page et utiliser une barre de défilement de corps verticale.

MinScreenHeight=200
MinScreenWidth=200

En option, la taille de conception de page personnalisée peut être ajustée dans Paramètres > Affichage avec Taille paramétré sur Personnalisé. Ensuite, paramétrez la Largeur et la Hauteur à une taille de page personnalisée de bureau plus typique comme la largeur 1080 et la hauteur 768. La modification de ce paramètre après l’ajout de contrôles à l’écran peut entraîner la réinitialisation de certaines propriétés de mise en page.

Définissez le conteneur le plus haut pour remplir tout l’espace et redimensionnez-le en fonction de l’espace disponible.

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

Retour à la ligne horizontal d’un conteneur à hauteur flexible

Pour prendre en charge l’ajustement des pages du bureau à une largeur étroite, activez ces propriétés sur un conteneur horizontal avec une hauteur flexible. Sans ces paramètres, la page coupera les contrôles lorsque la page est étroite.

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

Les conteneurs enfants ou les contrôles directement sous ce conteneur doivent être définis pour avoir une largeur minimale permettant à la page de tenir dans une largeur de 300 px. Tenez compte du remplissage du conteneur ou du contrôle ainsi que des conteneurs parents.

Retour à la ligne vertical d’un conteneur de largeur flexible

Pour prendre en charge l’ajustement des pages du bureau à une largeur étroite, activez ces propriétés sur un conteneur vertical avec une largeur flexible. Sans ces paramètres, la page coupera les contrôles lorsque la page est étroite.

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

Les conteneurs enfants ou les contrôles directement sous ce conteneur doivent être définis pour avoir une hauteur minimale permettant à la page de tenir dans une largeur de 300 px. Tenez compte du remplissage du conteneur ou du contrôle ainsi que des conteneurs parents.

Pour plus d’informations : Création d’une disposition dynamique.

  1. Dans le Conteneur vertical, définissez Align (horizontal) sur Étirer

  2. Insérez trois contrôles Conteneur horizontal au sein du Conteneur vertical parent

  3. Sur les premier et troisième contrôles Conteneur horizontal enfants, définissez Hauteur d’étirement et réduire la hauteur à l’espace nécessaire, à Height=80.

Conteneur horizontal avec deux conteneurs enfants pairs

  1. Sur le conteneur horizontal parent, définissez Aligner (vertical) sur Étirer.

  2. Insérez deux contrôles Conteneur vertical au sein du Conteneur horizontal parent.

Styliser les contrôles de page personnalisés pour s’aligner sur les contrôles d’application basés sur un modèle

En créant la page personnalisée à partir du concepteur d’applications moderne, ces fonctionnalités utilisent les valeurs par défaut.

  • Thème pour la page personnalisée. Les valeurs de thème pour les contrôles utilisés dans une page personnalisée sont automatiquement définies pour correspondre au thème bleu par défaut de Unified Interface. Ce thème par défaut est utilisé à la fois dans le studio et lors de l’exécution de l’application. La sélection explicite de thème est supprimée de l’expérience de création de page personnalisée.

  • Les contrôles doivent utiliser une taille de police différente, en fonction de leur position dans la hiérarchie des pages.

    Notes

    Le texte de la page personnalisée a une mise à l’échelle de 1,33, vous devez donc diviser la cible Taille de police par 1,33 pour obtenir la taille désirée.

    Type d’étiquette Taille de police cible Taille de police à utiliser
    Titre de la page 17 12.75
    Étiquettes normales 14 10.52
    Petites Étiquettes 12 9.02
  • Les contrôles Bouton principal et secondaire nécessitent les modifications de style suivantes :

    Boutons principaux

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

    Boutons secondaires

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

Navigation par onglets et accessibilité au clavier pour les pages personnalisées

Les pages personnalisées suivent la même conception de navigation par onglets que celle utilisée par l’application basée sur un modèle d’hébergement. La structure HTML sémantique visuellement alignée aide les utilisateurs à naviguer de manière transparente dans les pages personnalisées lorsqu’ils utilisent un clavier ou un écran Lecteur. Notez que contrairement aux applications canevas autonomes, les contrôles de page personnalisés et d’autres éléments UX n’ont pas besoin d’attributions explicites de numéros d’onglet. Les commandes modernes n’ont pas de la propriété TabIndex et utiliser la structure HTML sémantique pour la navigation.

Divers éléments tels que les contrôles, les composants canevas et de code, les conteneurs, etc. peuvent être tabulés en fonction de leur position dans la mise en page personnalisée. La navigation par onglet suit la navigation dans l’ordre Z. Taquets de tabulation individuels à l’intérieur d’éléments de regroupement plus grands tels que des composants, les conteneurs sont d’abord parcourus avant que l’onglet ne passe à l’élément suivant dans l’arborescence du modèle d’objet de document (DOM).

Voici un exemple de navigation avec la page contenant les contrôles, le code et les composants et conteneurs canevas.

Navigation par onglet de page personnalisée.

Notes

Les contrôles et les éléments qui se chevauchent sur la page personnalisée n’auront pas leur DOM fusionné, les taquets de tabulation peuvent donc être désynchronisés par rapport à la disposition visuelle. Il en est de même pour le positionnement dynamique des éléments à l’aide de formules.

Voir aussi

Présentation d’une page personnalisée d’application pilotée par modèle

Utilisation de PowerFx dans une page personnalisée

Création d’une disposition réactive

Ajouter une page personnalisée à votre application pilotée par modèle