Créer et personnaliser un écran

Le contrôle "Écran"

L’écran (screen) est un objet de type "surface de dessin" sur lequel on insère des objets que l’on appelle des "contrôles".

Plus précisément, l’objet "écran" est lui-même un contrôle dans lequel on peut insérer d’autres contrôles comme des boutons, des galeries ou des entrées texte.

Ces contrôles servent à la présentation (étiquette ou liste déroulante par exemple), à la saisie (case à cocher ou bascule par exemple) ou à opérer certaines actions (comme le minuteur).

Exemple d’écran prédéfini intitulé "Écran avec défilement" (dans le format Tablette à gauche et dans le format Téléphone à droite)

À l’instar du contrôle non graphique "App" (situé en première position de l’arborescence), le contrôle "Écran" n’a pas de parent (si ce n’est l’application elle-même).

Pour cette raison, les objets "Écran" se trouvent à la racine de l’arborescence, tout comme un dossier qui se trouve à la racine d’un disque dur.

Vue sur l’écran nommé "ec04_EcranDefilement"

Les types d’écrans prédéfinis

Les écrans prédéfinis sont des modèles qui intègrent déjà quelques contrôles prédéfinis.

Ils sont conçus pour gagner du temps. Choisissez le modèle qui se rapproche le plus possible des besoins de votre App.

Lorsqu’un nouvel écran prédéfini est ajouté, il reste personnalisable pour s’adapter plus finement à l’App que l’on souhaite réaliser.

Pour ajouter un nouvel "Écran" prédéfini, procédez comme suit :

Liste des écrans prédéfinis disponibles en mode Tablette et Téléphone

Les écrans prédéfinis avec mise en page automatique

Ces types d’écrans ont la particularité d’être "adaptables" (responsive) à tout type de format. Ils contiennent des sections d’affichage (Layout) qui permettent d’ajuster la taille de leurs contenus (les contrôles) en fonction de la taille de l’écran de l’application.

Les trois modèles d’écrans disponibles sont les suivants :

Vue sur les conteneurs de dispositions horizontal et vertical...

Les propriétés et actions d’un Écran

L’écran dispose de peu de propriétés et d’actions par rapport à d’autres contrôles.

RGBA
(255; 255; 255; 1) 

Red 

Aucun 

'FondBleuDégradé' 

Ajuster 

Centre, 
Remplir, 
Étirer, 
Vignette 

Le panneau "Avancé" des propriétés

D’une part, le panneau Avancé vous permet d’accéder à d’autres propriétés étendues, notamment de disposition de l’écran ; d’autre part, il vous permet d’effectuer la recherche d’une propriété en particulier dans tout l’objet écran.

<vide> 

Set(varEdit;false) 

<vide> 

Set(varEdit;true) 

Les écrans dans l’App

À la création d’une nouvelle App, un premier écran vide nommé "Screen1" est présent. Lorsque vous insérez un nouvel écran, celui-ci portera le nom générique "Screen2". À chaque nouvel écran, le nom générique est incrémenté.

Naviguer entre écrans

La navigation entre écrans s’effectue au travers des fonctions Navigate() ou Back(). On place ces fonctions dans la propriété OnSelect d’un contrôle (comme un bouton ou une icône par exemple).

Ici, la propriété d’action OnSelect (Action d’un clic), dont la formule (pour l’instant false) sera exécutée lorsqu’on cliquera/tapera dessus :

Les fonctions de comportement Navigate() et Back() sont utilisées pour naviguer d’un écran vers un autre. Ces fonctions ne sont supportées que dans une propriété d’ACTION comme OnSelect (Clic/Tape) ou OnChange (Modification de valeur). On ne peut pas les utiliser dans des propriétés de DONNEES de type "Default", "Text", ou "Tooltip" par exemple.

Une propriété de données ne peut contenir qu’une valeur littérale (par exemple une valeur directe comme 123) ou une expression dont le résultat est une valeur (par exemple Today() qui donne la date du jour comme valeur) ; une propriété d’action ne doit contenir qu’une fonction de comportement, c’est-à-dire une action à faire (envoyer un e-mail, afficher une notification, naviguer vers un écran, mettre à jour une variable, etc.).

Les propriétés "ACTION"	Les propriétés "DONNEES"

Le contrôle Bascule permet à l’utilisateur de faire un choix booléen de type oui/non,c’est l’équivalent - en plus moderne - de la case à cocher.

Exemple des types de propriétés d’un contrôle "BASCULE" (Toggle) nommé Toggle2

Le "design" de l’écran (l’application)

Lors du design de l’App, il faut réfléchir au type de périphérique principal auquel l’App sera destinée. Bien que Power Apps produise des Apps responsives (adaptables à tous les types d’écrans), le choix du format Tablette ou Téléphone ne se fait qu’une seule fois lors de la création de votre App.

Le type de périphérique écran (form factor)

À la création de l’App, le choix "Téléphone" est plus restreint et n’offre que la possibilité de gérer l’Orientation Portrait/Paysage.

Le mode "Tablette" offre la possibilité de gérer l’Orientation Paysage/Portrait en plus du format de la Taille (16:9 par défaut, 3:2 Surface Pro, 4:3 iPad et Personnalisé).

Les deux modes offrent les mêmes paramètres avancés :

• Mettre à l’échelle pour ajuster

• Verrouiller le rapport hauteur/largeur

• Verrouiller l’orientation

Pour modifier ces paramètres, procédez comme suit :

 Depuis votre App, cliquez sur Paramètres :

 Puis cliquez sur Affichage :

Exemple de design et source d’inspiration

Pour dépasser l’aspect basique des écrans Power Apps, on peut s’inspirer de nombreux designs disponibles sur des plateformes comme Pinterest (https://pinterest.fr) ou encore dribble (https://dribbble.com). Il est également possible d’utiliser une recherche de mots-clés comme "dashboard collection", ou "Design graphics desktop Application" par exemple.

Voici une capture d’écran Power Apps d’une application de gestion d’incidents, réalisée pour le compte d’un client :

Pour des questions...

Quelques règles de bonne pratique

La conception des écrans doit suivre quelques règles pour permettre une lecture claire (UI ou interface utilisateur) et une navigation légère (UX ou expérience utilisateur) de l’App :