Créer une application optimisée pour mobile utilisant des conceptions réactives
Dans cet exercice, nous créons une application à un écran optimisée pour les mobiles et basée sur nos données Contoso Coffee Machines. Le but de cet exercice est de vous donner l’expérience de la création d’une application avec des conteneurs à disposition automatique et de vous montrer directement comment se comportent les applications dynamiques. Nous créons une application, donc accédez à la page d’accueil Power Apps et procédez comme suit :
Téléchargez la feuille de calcul Excel CoffeeMachineData.xlsx. Cliquez sur le lien, puis sur le bouton Télécharger le fichier brut pour télécharger le fichier. Une fois le téléchargement effectué, passez à l’étape suivante.
Accédez à make.powerapps.com. Cliquez sur Créer>Application vide>Application canevas vide>Tablette. Nommez votre application et appuyez sur Créer.
Vous pouvez vous référer au schéma ci-dessous pour de l’aide pour les étapes suivantes, numérotées selon les étapes. Dans la barre de commandes, cliquez sur le bouton Paramètres. (Vous devrez peut-être cliquer sur Application dans le volet Arborescence pour l’afficher.)
Dans le volet contextuel Paramètres, cliquez sur l’onglet Affichage, puis faites défiler vers le bas et désactivez l’option Mettre à l’échelle. (Cette action entraîne la redéfinition automatique de l’option Verrouiller les proportions sur Désactivé.)
Fermez la fenêtre contextuelle Paramètres.
Créez un écran avec une disposition Encadré pour votre application. Nommez-le « Catalog Screen ».
Créez un écran sous Modèles>Success. Nommez-le « Success Screen ».
Supprimez Screen1.
Ensuite, cliquez sur le bouton Ajouter des données dans la barre de commandes. Ensuite, recherchez/sélectionnez OneDrive Entreprise.
Dans le volet Choisir un fichier Excel sur le côté droit de votre écran, sélectionnez votre fichier CoffeeMachineData.xlsx, puis le tableau CoffeeMachines. Connectez le tableau en cliquant sur Connecter en bas du volet.
Sélectionnez le conteneur horizontal nommé SidebarContainer1 sur le côté gauche de votre écran. Consultez l’image ci-dessous pour découvrir les étapes suivantes.
Cliquez sur l’icône Plus (+) dans le conteneur, insérez un contrôle Galerie verticale dans SidebarContainer1 et sélectionnez CoffeeMachines comme source de données. Définissez la propriété Fill sur Color.LightSteelBlue.
Nous allons ensuite insérer un formulaire dans l’écran Catalog Screen. Sélectionnez MainContainer1 sur le côté droit du canevas de votre application. Cliquez sur l’icône plus (+) (ou le bouton Insérer dans la barre de commandes) pour insérer un contrôle Modifier le formulaire. Dans le volet Propriétés sur le côté droit de l’écran, sélectionnez CoffeeMachines comme Source de données.
Toujours dans le volet Propriétés, cliquez sur le bouton Modifier les champs sous Source de données.
Dans le volet Champs, cliquez sur Ajouter un champ et ajoutez tous les champs en cochant la case en regard de chaque nom de champ dans la fenêtre contextuelle Choisir un champ. Cliquez ensuite sur le bouton Ajouter en bas.
Fermez le volet Champs.
Avec Form1 toujours sélectionné, dans le menu déroulant Propriété en haut de l’écran à gauche, sélectionnez la propriété Item, puis saisissez Gallery1.Selected dans le champ de formule (fx).
Enfin, toujours sur votre formulaire, définissez la propriété Fill sur Color.LightSteelBlue.
Ensuite, nous effectuons un ajout à notre conteneur d’en-tête. Sélectionnez le contrôle HeaderContainer et cliquez sur l’icône Plus (+) pour insérer un contrôle Libellé de texte, puis définissez les propriétés dans la liste déroulante comme suit :
Text : « Catalogue Contoso Coffee »
Size : remplacer 13 par 20
Height : remplacer 40 par Parent.Height
Width : remplacer 150 par 200
À l’aide du bouton 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.
Ensuite, insérez un contrôle Image dans HeaderContainer1 et définissez les propriétés comme suit :
Image : User().Image
Height : Parent.Height
Créons une icône de connexion en insérant une icône représentant un Globe dans HeaderContainer1. Définissez les propriétés comme suit :
Height : 20
Width : 20
Color : If(Connection.Connected, Color.Green, Color.LightSteelBlue)
Ensuite, nous justifions à droite nos éléments HeaderContainer. Pour ce faire, cliquez sur HeaderContainer1 dans votre Arborescence et recherchez l’option Justifier (horizontal) dans le volet Propriétés à droite. La troisième option est Fin. Sélectionnez-la.
Enfin, ajoutons une couleur d’arrière-plan à notre conteneur d’en-tête. Définissez la propriété Fill sur Color.LightSteelBlue.
Sélectionnez MainContainer1, 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)
Sélectionnez le formulaire dans MainContainer1 et définissez la propriété OnSuccess sur Navigate(’Success Screen’).
Dans votre volet Arborescence, cliquez sur l’écran Success Screen.
Cliquez sur l’icône représentant une Coche (iconCheck1) et redéfinissez la propriété OnSelect sur :
Back()Mettez l’application en mode Aperçu. Définissez l’affichage sur l’iPhone 12 en cliquant sur la liste déroulante Téléphone. Avez-vous noté que votre affichage a modifié les contrôles ? Essayez différentes tablettes et téléphones en changeant d’orientation pour voir comment l’écran change.
Notre application simple et dynamique est désormais utilisable sur toute plateforme. Voilà !