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

Article
12/14/2023

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
Étiquette¹	Affichage
Zone de texte¹	Entrée
Sélecteur de dates¹	Entrée
Bouton¹	Entrée
Zone de liste déroulante¹	Entrée
Case à cocher¹	Entrée
Bascule¹	Entrée
Groupe de cases d’option¹	Entrée
Curseur¹	Entrée
Évaluation¹	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

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

Conteneur vertical avec en-tête fixe, corps flexible, pied de page fixe

Dans le Conteneur vertical, définissez Align (horizontal) sur Étirer
Insérez trois contrôles Conteneur horizontal au sein du Conteneur vertical parent
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

Sur le conteneur horizontal parent, définissez Aligner (vertical) sur Étirer.
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

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

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.

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.