Exercice : créer votre première application dans Power Apps

  • 15 minutes

Dans l’exercice suivant, vous allez créer votre première application à l’aide d’un tableau Excel comme source de données. Vous pouvez utiliser tout tableau Excel, à condition que les données soient formatées sous forme de tableau et stockées à un emplacement accessible par Microsoft Power Apps, par exemple OneDrive.

Cet exercice comprend deux parties :

  • Générer une application à trois écrans à partir d’un tableau Excel

  • Créer une application canevas vide que vous améliorerez dans les prochaines unités

Les deux applications utilisent les mêmes données. L’application à trois écrans sert de référence pour comprendre comment les contrôles fonctionnent ensemble pour afficher des données.

Obtenir les données

Pour mener cet exercice à bien, vous aurez besoin de télécharger les fichiers App in a Day. Cliquez sur le lien pour télécharger les fichiers. Ensuite, extrayez les fichiers du fichier zip téléchargé. Après avoir extrait les fichiers, recherchez et ouvrez le fichier Excel nommé Machine-Order-Data.xslx.

  1. Ouvrez OneDrive dans un navigateur. Cliquez sur + Ajouter nouveau>Chargement de fichiers.

    Capture d’écran de l’interface de fichiers OneDrive avec le bouton Chargement de fichiers mis en évidence.

  2. Dans la boîte de dialogue Ouvrir, accédez à votre dossier Downloads et sélectionnez Machine-Order-Data.xlsx.

  3. Cliquez sur Ouvrir. Recherchez ensuite « Machine-Order-Data » dans OneDrive pour vérifier que le chargement a réussi.

Créer une application à trois écrans

Vous allez maintenant créer une application mobile à trois écrans.

  1. Accédez à Power Apps Maker Portal make.powerapps.com, puis connectez-vous.

  2. Dans le volet de navigation gauche, cliquez sur Applications.

  3. Sélectionnez Démarrer avec un modèle d’application.

    Capture d’écran de Power Apps avec l’onglet Créer et le bouton Excel mis en évidence.

  4. Sous Applications mobiles centrées sur les données, sélectionnez À partir d’Excel.

  5. Sous Sélectionner le tableau, développez OneDrive Entreprise, recherchez le fichier Machine-Order_Data.xlsx, sélectionnez le tableau Machines, puis cliquez sur Créer une application.

    Capture de l’écran Créer une application, avec l’option Machines sélectionnée sous Sélectionner le tableau et le bouton Créer l’application mis en évidence.

    Power Apps génère alors une application mobile fonctionnelle. Si votre application ressemble à l’image ci-dessous, passez à l’étape suivante. Si ce n’est pas le cas, passez à l’étape 17.

    Capture d’écran de la nouvelle application mobile.

  6. Développez BrowseGallery1, puis sélectionnez Title1. Avec Title1 sélectionné, déplacez votre curseur vers le haut dans la liste déroulante Propriété (au-dessus de l’en-tête de l’Arborescence) et sélectionnez la propriété appelée Text.

  7. Dans la barre de formule, supprimez la valeur existante et tapez ThisItem. (Veillez à saisir le point.) La fonctionnalité d’autocomplétion affiche une liste de tous les champs disponibles pour l’élément actuel dans la galerie.

    Capture d’écran de la formule Power Fx pour la propriété Text de Title1.

  8. Comme vous souhaitez que le nom de la machine s’affiche dans le titre, sélectionnez 'Machine Name' dans la liste déroulante. Notez que la barre de formule affiche désormais ThisItem.'Machine Name'. Il s’agit d’une formule Power Fx qui indique à Power Apps d’afficher le champ 'Machine Name' pour chaque élément de la galerie.

    Notez que chaque élément de la galerie affiche désormais son propre nom de machine. C’est la puissance de l’utilisation de ThisItem dans une galerie : il fait référence dynamiquement à l’enregistrement en cours, de sorte que chaque contrôle dans la galerie affiche des données spécifiques à cet élément.

  9. Revenez au volet Arborescence sous BrowseGallery1, puis sélectionnez Subtitle1. Avec Subtitle1 toujours sélectionné, sélectionnez la propriété Text. Cette fois-ci, tapez ThisItem.Price dans la barre de formule.

    Capture d’écran du texte du sous-titre.

    Notez que chaque élément de la galerie affiche désormais son prix.

  10. Ensuite, vous allez ajouter une couleur de machine à chaque élément de la galerie. Sélectionnez Body1 sous BrowseGallery1 dans l’Arborescence. Avec Body1 toujours sélectionné, sélectionnez Text dans la liste déroulante Propriété, puis tapez ThisItem.Color.

    Capture d’écran de la formule Power Fx pour la propriété Text de Body1.

  11. Vous pouvez également ajouter une photo de la machine à café à la galerie. Vous devez d’abord déplacer les champs de titre, de sous-titre et de corps légèrement vers la droite pour faire de la place à l’image. Tout en maintenant enfoncée la touche Maj de votre clavier, sélectionner les champs Title1, Subtitle1 et Body1 dans le volet Arborescence ou le canevas de la galerie. Votre écran devrait ressembler à l’image ci-dessous.

    Capture d’écran de l’ajout d’une photo à la formule Power Fx.

  12. Avec les trois champs toujours sélectionnés, sélectionnez X dans la liste déroulante Propriété. La valeur X est l’emplacement horizontal des champs sur l’écran. Définissez la valeur dans la barre de formule sur 80. (Vous pouvez également faire glisser les champs vers la droite dans le canevas.)

  13. Cliquez dans l’espace vide que vous avez créé à gauche des champs Body1, Subtitle1 et Title1. Les champs sont alors désélectionnés et votre écran devrait ressembler à l’image ci-dessous.

    Capture d’écran de la désélection d’un champ.

  14. Dans la barre de commandes, Cliquez sur + Insérer, tapez image dans la barre de recherche, puis sélectionnez le contrôle Image.

    Capture d’écran du clic sur le bouton + Insérer et de la sélection du contrôle Image.

  15. Redimensionnez et déplacez l’image sur l’élément supérieur dans le canevas jusqu’à ce qu’elle s’affiche correctement à gauche des champs de titre, de sous-titre et de corps.

  16. Dans le volet Arborescence ou le canevas, sélectionnez l’image et Image dans la liste déroulante Propriété, puis tapez ThisItem.Photo. Les images de la machine à café s’affichent désormais dans votre galerie.

    Capture d’écran de la propriété Image.

    À l’aide des compétences que vous venez d’acquérir, mettez à jour les autres écrans, DetailScreen1 et EditScreen1, de votre application afin d’afficher les champs souhaités.

  17. Pour avoir une idée de ce à quoi l’application ressemble sur un appareil mobile, cliquez sur le bouton Aperçu qui ressemble à un bouton « Lire » en haut à droite (en regard de l’icône « Enregistrer »). Cliquez sur le bouton « Lire » (ou appuyez sur F5) et essayez l’interface.

    Capture d’écran de l’application Machines produite par Power Apps. Le bouton Lire est mis en évidence.

    Notez que vous pouvez parcourir la liste des éléments, en sélectionner un, voir certains détails d’un élément, modifier les détails d’un élément et enregistrer/annuler vos modifications. Lorsque vous créez une application avec le bouton Excel, vous pouvez rapidement disposer d’une application entièrement fonctionnelle.

    Quittons le mode Aperçu en appuyant sur le X dans le coin supérieur droit, puis enregistrons cette application.

  18. Cliquez sur le bouton Enregistrer et saisissez un nom pour cette application dans le volet Enregistrer sous. Ensuite, cliquez sur Enregistrer.

  19. Cliquez sur le bouton Précédent en haut de la barre de commandes à gauche pour quitter l’application.

Après avoir découvert comment Power Apps crée une application pour vous, vous pouvez commencer à créer notre propre application à partir de zéro.

Créer une application canevas

  1. À partir de Power Apps Maker Portal (make.powerapps.com), cliquez sur l’onglet Créer.

  2. Dans la fenêtre contextuelle Créer, cliquez sur Démarrer avec une application canevas vide.

    Capture d’écran des sélections de menu Power Apps avec l’option Application vide et le bouton Créer mis en évidence.

  3. Dans la fenêtre contextuelle Démarrer avec un canevas vide qui s’affiche, cliquez sur Taille de la tablette.

  4. Vous êtes alors redirigé vers le canevas d’édition Power Apps. Si la fenêtre contextuelle Bienvenue dans Power Apps Studio s’affiche, vous pouvez cliquer sur Ignorer.

  5. Cliquez sur Enregistrer en haut de l’écran à droite, puis nommez votre application Contoso Coffee Machines dans la fenêtre Enregistrer sous. Cliquez sur Enregistrer.

    Capture d’écran de l’attribution du nom de l’application à partir de l’option de menu Enregistrer sous.

  6. Commencez par créer une galerie pour afficher les enregistrements de données. Cliquez sur le bouton Insérer dans la barre de commandes, puis recherchez et sélectionnez Galerie verticale. Il s’agit du même type de galerie que celui que Power Apps a créé automatiquement pour vous dans l’application mobile.

    Capture d’écran de Gallery1, du bouton Insérer et de l’option Galerie verticale mis en évidence.

  7. Un contrôle nommé Gallery1 s’affiche alors sur votre écran. Il n’est actuellement pas connecté aux données, donc Power Apps vous invite à Sélectionner une source de données. Avec tous les différents types de données, vous devez indiquer à Power Apps le type de données auquel vous souhaitez vous connecter. Dans ce cas, vous allez vous connecter à la feuille de calcul Excel que vous avez enregistrée sur OneDrive avec la connexion OneDrive Entreprise. Cette connexion vous permet d’accéder aux documents de votre compte professionnel OneDrive et de toute bibliothèque de documents SharePoint à laquelle vous avez accès.

  8. Recherchez et sélectionnez OneDrive Entreprise. Vous pouvez saisir OneDrive dans le champ de recherche pour la trouver rapidement. Ensuite, vous devrez peut-être cliquer sur Ajouter une connexion et authentifier votre connexion.

    Capture d’écran de la galerie nouvellement insérée illustrant le champ Données. OneDrive est saisi dans la zone de recherche et l’option OneDrive Entreprise est sélectionnée.

  9. Une fois la connexion à OneDrive Entreprise établie, un volet s’affiche sur le côté droit de l’écran vous invitant à Choisir un fichier Excel. Recherchez et sélectionnez le document Excel que vous avez copié dans OneDrive nommé « Machine-Order-Data.xlsx ». Si vous ne parvenez pas à le trouver, vous pouvez saisir le nom du fichier dans le champ de recherche pour affiner les choix.

    Capture d’écran de la boîte de dialogue Choisir un fichier Excel avec machine-ord comme paramètre de recherche, affichant Machine-Order-Data.xlsx comme résultat de la recherche.

  10. Après avoir sélectionné « Machine-Order-Data.xlsx », le volet vous invite à Choisir un tableau. Il devrait y avoir deux options : « Machines » et « MachineTypes ». Cochez la case en regard de « Machines », puis cliquez sur le bouton Connecter en bas du volet.

    Capture d’écran de l’invite Choisir un tableau, de l’option Machines sélectionnée et du bouton Connecter mis en évidence.

  11. Vous recevez alors une notification indiquant que la source de données a été ajoutée à votre application.

  12. Sélectionnez à nouveau votre galerie. Sur le côté droit de l’écran se trouve un volet Propriétés pour votre contrôle Galerie. Assurez-vous que la propriété Source de données est définie sur Machines. Si votre galerie n’a pas renseigné l’image, le titre et le prix, ajoutez-les maintenant en suivant les mêmes instructions que celles que vous avez utilisées avec l’application mobile ci-dessus. (Conseil : utilisez ThisItem.'Machine Name', ThisItem.Price et ThisItem.Photo.)

    Capture d’écran du contrôle Galerie sélectionné. Dans le volet Propriétés, la source de données est mise en évidence et affiche le tableau Machines.

  13. Redimensionnez votre galerie pour l’étendre jusqu’au bas de l’écran et toucher le côté gauche de l’écran.

  14. À présent, vous pouvez ajouter un contrôle Formulaire pour mettre à jour les données s’affichant dans la galerie. Cliquez sur une partie vide de l’écran pour désélectionner la galerie, puis cliquez sur le bouton Insérer dans le menu d’en-tête. Recherchez et sélectionnez Formulaire de modification.

    Capture d’écran du bouton Insérer cliqué dans la barre de commandes et du menu Insérer affichant l’option Formulaire de modification sélectionnée.

  15. Le contrôle Form1 s’affiche alors sur votre écran. Faites-le glisser vers la moitié droite de votre écran, puis repositionnez-le et redimensionnez-le afin qu’il occupe la moitié droite de votre écran.

  16. Notez que le nouveau contrôle Formulaire vous invite à « Se connecter aux données ». Avec le contrôle Formulaire sélectionné, examinez le volet Propriétés sur le côté droit de l’écran. Directement sous Propriétés, vous voyez Source de données et une liste déroulante indiquant Aucune. Cliquez sur la liste déroulante et sélectionnez le tableau Machines.

    Capture d’écran de l’onglet Propriétés de Form1 avec Machines comme source de données.

  17. À présent, vous pouvez ajouter des champs à votre formulaire, puisqu’il est actuellement vide. Dans le volet Propriétés, cliquez sur le lien Modifier les champs. Il se trouve juste en dessous de la liste déroulante Source de données.

  18. Dans le volet contextuel Champs, cliquez sur le bouton Ajouter un champ.

  19. Cochez la case en regard de chacun des champs suivants sous Choisir un champ : Photo, ID de la machine, Nom de la machine, Prix, Couleur, Description, Fonctionnalité, Type de machine, ID du type de machine, Nombre moyen de tasses/semaine et Nombre moyen d’expressos/semaine. Veillez à les cocher dans l’ordre indiqué. Vous devrez peut-être faire défiler vers le bas pour tous les afficher. Ensuite, cliquez sur Ajouter. Vous pouvez fermer le volet Champs.

    Capture d’écran de l’image illustrant les propriétés de Form1 avec le volet Champs affichant tous les champs mis en évidence. Le lien Modifier les champs et les boutons Ajouter un champ et Ajouter sont tous mis en évidence.

    Votre formulaire affiche désormais les champs de saisie disposés dans un format à trois colonnes. Notez que les champs ont été ajoutés dans l’ordre dans lequel vous les avez sélectionnés. Tous les champs devraient être vides.

  20. Ensuite, vous pouvez désigner l’élément de vos données à afficher dans le formulaire. Examinez le contrôle Galerie sur le côté gauche de votre écran. Le contrôle Galerie affiche toutes les cafetières, donc vous souhaitez que le formulaire en affiche une. Une fois votre formulaire sélectionné, accédez à la barre de formule (fx) en haut de l’écran. À gauche de la barre de formule se trouve une liste déroulante permettant de rechercher les propriétés du contrôle Formulaire. Cliquez sur la liste déroulante et recherchez/sélectionnez la propriété Item.

    Capture d’écran de la liste déroulante des propriétés de Form1 avec la propriété Item sélectionnée.

  21. Dans le champ Item de la zone de saisie de formule fx, saisissez Gallery1.Selected. Vous devriez immédiatement voir des données renseigner les champs de votre formulaire.

    Capture d’écran de Form1 avec la propriété Item définie sur Gallery1.Selected. Tous les champs du formulaire sont renseignés.

  22. L’image photo a été ajoutée en tant que zone de texte plutôt qu’en tant que contrôle Image. Voilà pourquoi vous pouvez voir l’URL de l’image plutôt que l’image elle-même. Vous pouvez résoudre ce problème en sélectionnant la carte de données photo (dans l’exemple, Photo_DataCard2). Dans la carte de données photo, sélectionnez la valeur de la carte de données (dans l’exemple, DataCardValue12). Supprimez la valeur de la carte de données.

    Capture d’écran de la valeur de la carte de données à supprimer.

  23. Lorsque vous supprimez la valeur de la carte de données, deux x rouges s’affichent sur le canevas, indiquant qu’il existe des erreurs de formule. Vous pourrez les corriger dans un instant. Mais tout d’abord, sélectionnez à nouveau la carte de données photo, puis cliquez sur Insérer. Recherchez le mot image, puis sélectionnez Image.

  24. Vous recevez alors un message d’erreur contextuel indiquant que la carte de données est verrouillée. Vous devez déverrouiller la carte de données avant de pouvoir insérer un contrôle Image. Cliquez sur Déverrouiller et ajouter. Un contrôle Image devrait maintenant être inséré dans la carte de données photo.

  25. Sélectionnez votre contrôle Image nouvellement inséré, puis saisissez ThisItem.Photo dans la barre de formule. Votre écran devrait ressembler à l’image ci-dessous.

    Capture d’écran du contrôle Image inséré mettant l’accent sur le contrôle et la barre de formule.

  26. Vous pouvez maintenant corriger les erreurs de formule qui se sont affichées lorsque vous avez supprimé la valeur de la carte de données de saisie de texte d’image. Cliquez sur le x rouge le plus à droite, puis sur Modifier dans la barre de formule.

    Capture d’écran de l’avertissement d’erreur de formule mettant l’accent sur le bouton Modifier dans la barre de formule.

  27. La barre de formule affiche DataCardValue12.Y + DataCardValue12.Height (ou le nom équivalent des valeurs de la carte de données que vous avez supprimées précédemment). Vous vous souviendrez que DataCardValue12 est la carte de données que vous avez supprimée. Modifiez la formule pour supprimer toute référence à la valeur de la carte de données et incluez le nom de votre contrôle Image. Dans l’exemple, le contrôle Image est Image2, donc la formule mise à jour serait Image2.Y + Image2.Height. (Votre formule doit inclure le nom de votre image réelle.) Le premier message d’erreur disparaît.

  28. Sélectionnez le message d’avertissement d’erreur restant (le x rouge), puis recliquez sur Modifier dans la barre de formule. La barre de formule indique que la propriété Update est définie sur DataCardValue12.Text. Supprimez la valeur de la carte de données dans la formule et remplacez-la par le nom de votre contrôle Image. Dans l’exemple, la formule serait redéfinie sur Image2.Text.

    L’erreur n’a pas disparu cette fois-ci, car l’image n’a pas de propriété appelée Text. Vous devez modifier davantage la formule. Redéfinissez la formule sur Image2.Image. L’avertissement d’erreur de formule devrait maintenant disparaître.

  29. Prévisualisez votre application en cliquant sur l’icône « Lire » en haut de la barre de commandes à droite, en appuyant sur la touche de fonction F5 ou en sélectionnant et en maintenant enfoncée la touche Alt tout en cliquant sur les contrôles. Avec votre application en mode Aperçu, essayez de parcourir votre galerie et de sélectionner quelques cafetières différentes. Observez comment le formulaire est renseigné avec l’élément que vous sélectionnez.

  30. Ensuite, vous allez ajouter un contrôle Bouton pour enregistrer toutes les modifications que vous apportez aux données. Commencez par sélectionner Screen1 dans le volet Arborescence. Cliquez sur le bouton Insérer dans la barre de commandes, puis recherchez et sélectionnez Bouton.

    Capture d’écran de l’image illustrant un contrôle Bouton avec la propriété Text définie sur Enregistrer les modifications et la propriété OnSelect définie sur SubmitForm(Form1).

  31. Ajustez la taille et l’emplacement du bouton et du formulaire de sorte que le bouton se trouve immédiatement sous le formulaire, sur le côté droit de l’écran.

  32. Remplacez le texte « Bouton » du contrôle Bouton par « Enregistrer les modifications ». Dans le volet Propriétés à droite, le premier élément est la propriété Text. Remplacez « Bouton » par « Enregistrer les modifications » et saisissez-le.

    Capture d’écran du volet des propriétés Button mettant l’accent sur la propriété Text et la valeur redéfinie sur Enregistrer les modifications.

  33. Une fois votre contrôle Bouton sélectionné, accédez à la barre de formule fx. Redéfinissez la propriété OnSelect en remplaçant « false » par SubmitForm(Form1). (Si votre formulaire ne s’appelle pas Form1, utilisez le nom réel de votre formulaire.)

  34. À présent, remettez votre application en mode Aperçu. Ensuite, mettez à jour l’un des champs de votre formulaire, par exemple Machine Price. Cliquez sur le bouton Enregistrer pour enregistrer les modifications.

  35. Ensuite, vous allez ajouter un en-tête pour votre application. Sélectionnez Screen1 Dans le volet Arborescence. Recliquez sur le bouton Insérer, puis recherchez et sélectionnez un contrôle Rectangle.

  36. Placez le contrôle Rectangle dans le coin supérieur gauche de votre écran et étirez-le afin qu’il s’étende complètement du côté gauche au côté droit de l’écran. Dans le volet Propriétés de votre contrôle Rectangle, recherchez le champ de saisie Height et saisissez 75.

    Capture d’écran de l’image illustrant les propriétés du contrôle Rectangle et mettant en évidence la propriété Height définie sur 75.

    Conseil

    Tout élément du volet Propriétés a une valeur correspondante visible dans la barre de formule (fx). Si vous ne la trouvez pas dans le volet Propriétés, vous pouvez cliquer sur la liste déroulante juste à gauche du champ de saisie de la barre de formule. Dans ce cas, vous pouvez rechercher/sélectionner la propriété Height.

  37. Redimensionnez maintenant vos contrôles Galerie et Formulaire, afin qu’ils tiennent juste sous le contrôle Rectangle.

  38. Insérez un contrôle Libellé de texte. Redéfinissez la propriété Text sur « Contoso Coffee Machines ».

  39. Ensuite, redéfinissez la propriété Size de votre contrôle Libellé de texte sur la taille de police 24, puis redimensionnez le contrôle afin que le titre tienne sur une seule ligne.

  40. Ensuite, modifiez la couleur de la police en sélectionnant le paramètre Couleur dans la barre de commandes. Sous Couleurs standard, sélectionnez le cercle blanc.

  41. Avec le contrôle Libellé de texte toujours sélectionné, recherchez Text alignment dans le volet Propriétés. Redéfinissez l’alignement afin qu’il soit centré.

  42. Enfin, repositionnez votre contrôle Libellé de texte afin qu’il soit centré au milieu de l’écran au milieu du contrôle Rectangle. Notez que des lignes pointillées s’affichent lorsque vous vous approchez du centre de votre écran pour vous aider à aligner le contrôle Libellé de texte. Votre écran devrait ressembler à l’image ci-dessous.

    Capture d’écran de l’application Contoso Coffee Machines à la fin de l’exercice.

Vous venez de créer une application canevas à écran unique à partir de zéro qui lit et met à jour les données des machines à café. Dans l’unité suivante, vous allez vous appuyer sur cette application pour découvrir des concepts Power Apps supplémentaires.