Créer une application optimisée pour les appareils mobiles utilisant des conceptions dynamiques

Dans cet exercice, vous allez créer une application à un écran optimisée pour les mobiles à l’aide de Microsoft Power Apps et de données de Contoso Coffee Machines. Cette tâche pratique permet de comprendre plus facilement comment utiliser les conteneurs de disposition automatique et d’observer le comportement de la conception dynamique sur tous les appareils.

Vous allez commencer depuis la page d’accueil Power Apps. Procédez comme suit :

1. Téléchargez les fichiers App in a Day et extrayez-les. Ouvrez le fichier Excel nommé Machine-Order-Data.xlsx.

2. Accédez à make.powerapps.com. Cliquez sur Créer>Démarrer avec un canevas vide>Dynamique. Si une boîte de dialogue de bienvenue s’affiche, cliquez sur Ignorer.

3. Consultez l’image ci-dessous pour obtenir de l’aide concernant les étapes suivantes. Dans la barre de commandes, cliquez sur le bouton Paramètres. S’il n’est pas visible, cliquez sur App dans le volet Arborescence pour l’afficher.

   

4. Dans le volet contextuel Paramètres, cliquez sur l’onglet Affichage, puis faites défiler vers le bas pour vous assurer que le bouton bascule Mettre à l’échelle est réglé sur Désactivé. (Le bouton bascule Verrouiller les proportions est alors réglé sur Désactivé.)

5. Fermez la fenêtre contextuelle Paramètres.

6. Créer un écran en cliquant sur + Nouvel écran dans le volet Arborescence. Sélectionnez une disposition Encadré pour votre nouvel écran. Nommez-le Catalog Screen en double-cliquant sur le nom de l’écran (Screen2), puis en tapant « Catalog Screen ».

7. Créez un autre écran ; pour cet écran, utilisez le modèle Success. Nommez le nouvel écran « Success Screen ».

8. Supprimez Screen1 en cliquant sur l’écran dans l’Arborescence et sur les points de suspension à droite de l’écran, puis en sélectionnant Supprimer.

9. Ensuite, sélectionnez le conteneur de l’encadré de Catalog Screen. (Vous devez étendre plusieurs couches de conteneurs pour trouver le conteneur d’encadré.) Ajoutez une galerie verticale en cliquant sur + Insérer, puis en sélectionnant Galerie verticale avec l’option SidebarContainer1 sélectionnée.

10. Le volet Sélectionner une source de données devrait s’ouvrir automatiquement. Si ce n’est pas le cas, cliquez sur le bouton Ajouter des données dans la barre de commandes avec votre contrôle de galerie sélectionné dans le volet Arborescence.

11. Ensuite, recherchez et sélectionnez OneDrive Entreprise, puis créez la connexion. (Vous pouvez affiner votre recherche à l’aide du champ de saisie de recherche.)

12. Le volet Choisir un fichier Excel s’affiche alors sur le côté droit de votre écran. Sélectionnez le fichier Machine-Order-Data.xlsx, puis le tableau Machines. Connectez le tableau en cliquant sur Connecter en bas du volet. Vous devriez voir une notification en haut de l’écran ; vous pouvez la fermer.

13. Vous devrez peut-être mettre à jour les données s’affichant dans votre galerie. Si votre galerie ressemble à l’image ci-dessous, procédez comme suit. Si les champs corrects s’affichent, vous pouvez passer directement à l’étape 17 ci-dessous.

    

14. Développez la galerie, puis sélectionnez le champ Titre. Dans la barre de formule, redéfinissez la propriété Text du libellé de texte Titre sur ThisItem.'Machine Name'.

15. Ensuite, sélectionnez le champ Sous-titre. Dans la barre de formule, redéfinissez la propriété Text du libellé de texte Sous-titre sur ThisItem.Price.

16. Ensuite, sélectionnez le champ Image. Dans la barre de formule, redéfinissez la propriété Image du contrôle Image sur ThisItem.Photo.

17. Dans l’Arborescence, cliquez sur la liste déroulante en regard du conteneur d’encadré pour réduire son contenu.

18. Sélectionnez le conteneur principal nommé MainContainer2 sur le côté droit de votre écran.

    

19. Cliquez sur l’icône plus (+) (ou le bouton Insérer dans la barre de commandes) pour insérer un contrôle Formulaire de modification. Sélectionnez la table Machines comme source de données.

20. Dans le volet Propriétés à droite, cliquez sur le bouton Modifier les champs sous Source de données.

21. Dans le volet Champs, cliquez sur Ajouter un champ et ajoutez les champs suivants en cochant la case en regard de chaque nom de champ dans cet ordre : Photo, ID de la machine, Nom de la machine, Couleur, Description, Fonctionnalité, Prix, Type de machine, ID du type de machine, Nombre moyen de tasses/semaine et Nombre moyen d’expressos/semaine. Cliquez ensuite sur le bouton Ajouter en bas.

22. Fermez le volet Champs.

23. Notez que les champs ont été insérés dans le formulaire dans l’ordre dans lequel vous les avez sélectionnés.

24. Avec Form1 toujours sélectionné, dans le menu déroulant Propriété en haut de l’écran à gauche (au-dessus de l’en-tête Arborescence), sélectionnez la propriété Item, puis saisissez Gallery1.Selected dans le champ de formule (fx). (Si votre galerie ne s’appelle pas Gallery1, utilisez le nom de votre galerie.)

25. Enfin, avec votre formulaire toujours sélectionné, définissez la propriété Fill sur Color.LightSteelBlue.

26. À présent, vous allez effectuer un ajout à votre conteneur d’en-tête. Sélectionnez le contrôle HeaderContainer2 (Tout au long de cet exercice, utilisez le nom de votre contrôle d’en-tête s’il est différent.) et cliquez sur l’icône plus (+) pour insérer un contrôle Libellé de texte. Redéfinissez les propriétés du libellé de texte à l’aide de la liste déroulante des propriétés et de la barre de formule comme suit :

    Text : « Contoso Coffee Catalog »

    Size : remplacer 13 par 20

    Height : remplacer 40 par Parent.Height

    Width : remplacer 150 par 200

27. À l’aide de la liste déroulante Aligner dans la barre de commandes (à gauche du bouton Couleur ; sachant que vous pouvez également rechercher la sélection Text alignment dans le volet Propriétés à droite), redéfinissez le paramètre Aligner en remplaçant Aligner à gauche par Justifier.

28. Ensuite, sélectionnez le conteneur d’en-tête en dehors du libellé de texte pour désélectionner le contrôle Libellé de texte. Insérez un contrôle Image dans HeaderContainer2 et redéfinissez les propriétés comme suit :

    Image : User().Image

    Height : Parent.Height

29. Vous pouvez créer une icône de connexion en insérant une icône représentant un Globe dans HeaderContainer2. Redéfinissez les propriétés comme suit :

    Height : 20

    Width : 20

    Color : If(Connection.Connected, Color.Green, Color.LightSteelBlue)

30. À présent, vous pouvez justifier à droite les éléments du conteneur d’en-tête. Pour ce faire, cliquez sur HeaderContainer2 dans l’Arborescence et effectuez une recherche dans le volet Propriétés à droite. Recherchez l’option Justifier (horizontal). La troisième option est Fin (que vous pouvez voir si vous survolez l’icône). Sélectionnez-la.

31. Enfin, vous pouvez ajouter une couleur d’arrière-plan au conteneur d’en-tête. Redéfinissez la propriété Fill sur Color.LightSteelBlue.

32. Sélectionnez MainContainer2, où réside votre formulaire. Insérez un contrôle Bouton avec les propriétés suivantes :

    Text : « Enregistrer »

    Width : Parent.Width

    OnSelect : SubmitForm(Form1)

33. Sélectionnez le formulaire dans MainContainer2 et redéfinissez la propriété OnSuccess sur Navigate('Success Screen').

34. Dans votre volet Arborescence, cliquez sur l’écran Success Screen.

35. Cliquez sur l’icône représentant une Coche (iconCheck1) et redéfinissez la propriété OnSelect sur :

    Back()

36. Passez en mode Aperçu. Redéfinissez l’affichage sur l’iPhone 12 en cliquant sur la liste déroulante Téléphone. Observez comment la disposition s’ajuste sur différents appareils et dans toutes les orientations.

37. Enregistrez votre application si vous souhaitez l’utiliser ou la revoir plus tard.

Vous venez de créer une application dynamique utilisable sur toutes les plateformes.