Labo : créer une application canevas avec des contrôles uniques

Effectué

Important

Pour ce labo, ne vous connectez pas avec vos informations d’identification. Pour vous connecter à votre environnement de labo avec les informations d’identification correctes, procédez comme suit :

1. Sélectionnez Se connecter pour lancer le mode Machine virtuelle dans cette unité.
2. Une fenêtre PowerShell et une invite de commande Windows s’affichent alors. Après deux à trois minutes, elles se ferment et Power Apps s’ouvre automatiquement. Attendez l’affichage de l’écran d’accueil Power Apps.

Pour consulter les instructions du labo, cliquez sur l’onglet Instructions dans l’encadré du labo.

Dans cet exercice, plusieurs contrôles mentionnés dans les unités précédentes vont vous permettre de créer une application canevas qui évolue à mesure que vous interagissez avec les contrôles. Vous aurez ainsi une idée des fonctionnalités des contrôles et de la manière dont vous pouvez les adapter à vos besoins.

Remarque

Power Apps requiert une licence Office 365, une version d’évaluation gratuite ou un compte développeur gratuit.

1. Si vous disposez toujours de l’application avec City Populations que nous avons créée dans l’unité 3 de ce module d’apprentissage, vous pouvez passer à l’étape 9. Sinon, connectez-vous à Power Apps.

2. Sur l’écran d’accueil, cliquez sur Créer>Application vide, puis sur Créer sous Application canevas vide dans la fenêtre contextuelle.

3. Nommez votre application New Controls App, puis cliquez sur Créer.

4. Ignorez le message de bienvenue. Ensuite, cliquez sur le bouton Insérer, puis sélectionnez un contrôle Bouton. Définissez sa propriété OnSelect sur la formule suivante :

   ClearCollect(CityPopulations, {City:"London",
   Country:"United Kingdom", Population:8615000}, {City:"Berlin",
   Country:"Germany", Population:3562000}, {City:"Madrid",
   Country:"Spain", Population:3165000}, {City:"Rome",
   Country:"Italy", Population:2874000}, {City:"Paris",
   Country:"France", Population:2273000}, {City:"Hamburg",
   Country:"Germany", Population:1760000}, {City:"Barcelona",
   Country:"Spain", Population:1602000}, {City:"Munich",
   Country:"Germany", Population:1494000}, {City:"Milan",
   Country:"Italy", Population:1344000})
   

5. Maintenez enfoncée la touche Alt, puis sélectionnez le contrôle Bouton. (Vous allez ainsi créer votre collection et y stocker toutes les informations.)

6. Cliquez sur le bouton Insérer, sélectionnez un contrôle Galerie verticale, puis CityPopulations dans la fenêtre contextuelle Sélectionner une source de données.

   

7. Avec la galerie sélectionnée, dans le volet Propriétés à droite, redéfinissez la propriété Layout en remplaçant Image, titre et sous-titre par Titre, sous-titre et corps.

8. Sélectionnez le dernier (ou troisième) libellé dans le premier élément de la galerie, puis redéfinissez la propriété Text sur ThisItem.Population.

   

9. Sélectionnez Screen1 dans l’Arborescence (afin de ne pas l’insérer dans la galerie). Ensuite, cliquez sur le bouton Insérer, puis recherchez/sélectionnez un contrôle Curseur.

10. Redéfinissez la propriété Max du curseur sur 10000000.

11. Insérez un contrôle Libellé de texte et redéfinissez la propriété Text sur Slider1.Value.

12. Sélectionnez le premier élément de la galerie, puis cliquez sur Insérer. Ensuite, recherchez et sélectionnez une icône représentant une Coche. Placez-la à droite de la galerie.

    Remarque

    Des coches devraient s’afficher dans chaque ligne de la galerie. Une galerie répète le format du premier élément pour tous les autres. Si vous ne voyez pas plusieurs coches, veillez de nouveau à sélectionner le premier élément de la galerie et insérer une icône représentant une Coche.

13. Redéfinissez la propriété Visible de l’icône représentant une coche sur :

    ThisItem.Population > Slider1.Value
    

    

Placez l’application en mode Aperçu et essayez d’ajuster le curseur. Lorsque vous ajustez le curseur, des coches devraient apparaître et disparaître par élément de la galerie, car vous définissez la visibilité afin qu’elle change en fonction du contrôle du curseur. En substance, vous avez créé une galerie qui indique si la population d’une ville est supérieure ou non à la valeur du curseur.