Applications canevas : écrans, contrôles et propriétés

Première leçon du cours Power Apps : applications métier sans code, en accès libre : environ 15 minutes, 3 exercices et 3 questions de quiz. C'est la leçon de base du catalogue ; dans l'espace étudiant, elle est réécrite pour ton profil.

Objectifs

  • Distinguer application canevas et application pilotée par modèle
  • Se repérer dans Power Apps Studio : écrans, arborescence, propriétés, barre de formule
  • Écrire ses premières formules de propriété et de comportement

Application canevasPower Apps StudioContrôles et propriétésNavigation entre écrans

Qu’est-ce que Power Apps ?

Power Apps permet de créer des applications métier sans développement traditionnel : saisie de demandes d’achat, inventaire, inspection sur le terrain, suivi de visites. Les applications fonctionnent dans un navigateur, sur mobile (application Power Apps) et dans Teams. Elles s’appuient sur des sources de données (listes SharePoint, Dataverse, Excel, SQL…) et peuvent déclencher des flux Power Automate.

On les construit sur make.powerapps.com et l’on distingue deux types :

Type Principe Quand l’utiliser
Canevas vous dessinez chaque écran, pixel par pixel, et écrivez des formules interfaces sur mesure, mobile, sources variées
Pilotée par modèle l’application est générée à partir des tables, formulaires et vues Dataverse processus riches en données, interface standardisée

Ce cours porte sur les applications canevas.

Le studio

Créer > Application vide > Application canevas vide ouvre Power Apps Studio :

  • l’arborescence (à gauche) : les écrans et leurs contrôles ;
  • le canevas (au centre) : l’écran en cours de conception ;
  • le volet des propriétés (à droite) : les réglages du contrôle sélectionné ;
  • la barre de formule (en haut) : la liste déroulante des propriétés et la formule de la propriété choisie ;
  • le menu Insérer : étiquettes, boutons, zones de texte, listes déroulantes, galeries, formulaires, icônes.

Choisissez au départ le format (téléphone ou tablette) : il fixe les proportions des écrans.

Des propriétés qui sont des formules

Chaque contrôle a des propriétés : Text, Fill (couleur de fond), Color, Visible, X, Y, Width, Height, DisplayMode… La valeur d’une propriété est une formule Power Fx, recalculée automatiquement dès qu’une valeur dont elle dépend change, exactement comme une cellule Excel.

Exemple : une zone de texte txtNom et une étiquette dont la propriété Text vaut :

"Bonjour " & txtNom.Text

Dès que l’utilisateur tape son nom, l’étiquette se met à jour, sans bouton ni code supplémentaire. De même, la propriété Visible d’un bouton peut valoir !IsBlank(txtNom.Text) : le bouton n’apparaît que si le nom est saisi.

Les noms de fonctions sont toujours en anglais (If, Filter, Navigate). En revanche, dans un Power Apps configuré en français, les séparateurs suivent la langue : ; entre les arguments (au lieu de ,), ;; pour enchaîner des actions (au lieu de ;), et la virgule comme séparateur décimal (1,5). La documentation de Microsoft, rédigée en anglais, utilise , et ; : adaptez en conséquence.

Les propriétés de comportement

Certaines propriétés ne calculent pas une valeur mais exécutent des actions lors d’un événement : OnSelect (clic ou appui), OnChange, OnVisible (affichage d’un écran), App.OnStart (ouverture de l’application). Exemple sur un bouton :

Navigate(EcranDetail; ScreenTransition.Fade)

Navigate affiche un autre écran, Back() revient au précédent. Plusieurs actions s’enchaînent avec ;; :

Notify("Demande enregistrée"; NotificationType.Success);; Navigate(EcranAccueil)

Nommer, tester, publier

  • Nommez écrans et contrôles avec un préfixe : scrAccueil, lblTitre, btnValider, txtMontant, galDemandes. Les formules deviennent lisibles.
  • Testez avec Aperçu (F5) ; quittez avec Échap. Dans le studio, maintenez Alt pour cliquer sur un bouton sans quitter le mode conception.
  • Enregistrer crée une version ; Publier rend cette version disponible pour les utilisateurs. Tant que vous ne publiez pas, ils continuent d’utiliser la précédente.
  • Le vérificateur d’application (icône stéthoscope) liste les erreurs de formule et les problèmes d’accessibilité.

Exercices

Les solutions et les tests restent sur le serveur. Dans l'espace étudiant, ton code est exécuté et corrigé, et le tuteur donne des indices avant la solution.

  1. TâcheDifficulté 12 indices

    Premier écran réactif

    Environnement : utilisez le compte Microsoft 365 et l’environnement Power Apps fournis par la formation (make.powerapps.com). Les fonctionnalités et connecteurs disponibles dépendent de la licence de votre organisation. Les formules sont écrites avec les séparateurs d’un Power Apps en français : ; entre les arguments, ;; entre deux actions.

    1. Créez une application canevas vide au format téléphone nommée Demandes d’achat.
    2. Renommez l’écran scrAccueil. Insérez une zone de texte txtNom, une étiquette lblBonjour et un bouton btnContinuer.
    3. lblBonjour.Text : "Bonjour " & txtNom.Text.
    4. btnContinuer.Visible : !IsBlank(txtNom.Text).
    5. Ajoutez un second écran scrDemandes avec une étiquette « Mes demandes » et une icône flèche dont OnSelect vaut Back().
    6. btnContinuer.OnSelect : Navigate(scrDemandes; ScreenTransition.Cover).
    7. Testez en aperçu en saisissant Alice, puis enregistrez et publiez.
    • L'étiquette affiche « Bonjour Alice » pendant la saisie
    • Le bouton est masqué tant que la zone de texte est vide
    • Le bouton ouvre scrDemandes et l'icône revient à scrAccueil
    • L'arborescence montre des noms préfixés (scr, txt, lbl, btn)
  2. TâcheDifficulté 12 indices

    Couleur conditionnelle

    Dans l’application Demandes d’achat, sur scrAccueil :

    1. Ajoutez une zone de texte txtMontant (propriété Format : TextFormat.Number).
    2. Ajoutez une étiquette lblAlerte dont Text vaut If(Value(txtMontant.Text) > 500; "Validation du responsable requise"; "Validation automatique").
    3. Sa propriété Color : If(Value(txtMontant.Text) > 500; Color.Red; Color.DarkGreen).
    4. Testez avec 280, puis 820.
    • Avec 280, l'étiquette affiche « Validation automatique » en vert
    • Avec 820, l'étiquette affiche « Validation du responsable requise » en rouge
    • Aucune erreur n'apparaît dans le vérificateur d'application
  3. QCMDifficulté 11 indice

    Propriété de comportement

    Où écrire la formule Navigate(scrDetail) pour qu’elle s’exécute quand l’utilisateur appuie sur un bouton ?

    • Dans la propriété Text du bouton
    • Dans la propriété OnSelect du bouton
    • Dans la propriété Visible de l'écran
    • Dans la propriété Fill du bouton

Quiz de fin de leçon

  1. Quel séparateur d’arguments utilise un Power Apps configuré en français ?

    • Le point-virgule ;
    • La virgule ,
    • Le point .
  2. Quelle est la particularité d’une application pilotée par modèle ?

    • Elle est générée à partir des tables Dataverse
    • Elle se dessine pixel par pixel
    • Elle ne fonctionne pas sur mobile
  3. Que se passe-t-il pour les utilisateurs si vous enregistrez sans publier ?

    • Ils continuent d'utiliser la version publiée précédente
    • Ils voient la nouvelle version
    • L'application est supprimée

La suite du cours

  1. Sources de données et délégation20 min
  2. Formules Power Fx : variables, filtres et logique20 min
  3. Galeries et formulaires : afficher, créer, modifier20 min
  4. Partage, sécurité et cycle de vie15 min

Power Apps : applications métier sans code · Intermédiaire · 1 h 30