Claude Couderc Consulting

Développer une véritable application PowerApps de A à Z

L’objectif de cet exercice est de découvrir le développement d’une véritable application PowerApps de A à Z.

C’est aussi l’occasion d’apprendre une technique de développement, orientée interface. Outre les explications techniques, les choix ergonomiques et de développement sont explicités : taille des contrôles, choix de boutons et non d’icônes, etc.

Vous verrez aussi une alternative possible dans la méthodologie de développement.

Préparation

Modifier une application existante

Ouvrez le site web Microsoft PowerApps et identifiez-vous avec votre compte de tenant.

https://make.powerapps.com/

Dans le volet de gauche, cliquez sur Applications.

Dans le volet central de droite, sous l’onglet Applications récentes, cliquez sur les 3 petits points en face du nom de votre application tabEcrans.

Pour vous aider, regardez la copie d’écran ci-dessous.

Modification de l'application PowerApps TabEcrans
Modification de l’application PowerApps TabEcrans

Dans la liste qui apparaît, cliquez sur Modifier. Patientez quelques instants. Si vous obtenez un pop-up de bienvenue, cliquez sur le bouton Ignorer : votre application s’ouvre en modification.

Pour vous aider, regardez la copie d’écran ci-dessous.

Application PowerApps TabEcrans en modification (vue partielle)
Application PowerApps TabEcrans en modification (vue partielle)

Se connecter aux données

Dans le menu du haut, cliquez sur le ruban Affichage.

Sous Affichage, cliquez sur Source de données : le volet Source de données apparaît à gauche.

En haut du volet Source de données, cliquez dans la zone Rechercher…

Dans cette zone de recherche, saisissez SharePoint puis cliquez sur l’icône bleue SharePoint aide les organisations à partager : ne cliquez pas sur les icônes violettes Common Data Service.

Dans la liste qui s ‘affiche, cliquez sur la première connexion SharePoint : la liste des sites récents apparaît. Patientez quelques instants.

Dans cette liste, sélectionnez votre site SharePoint.

Sous Choisir une liste, cochez la case lstFruits, puis cliquez sur Se connecter (en bas du volet).

Lorsque la connexion est terminée, cliquez sur la croix en haut et à droite du volet Source de données pour fermer ce volet.

Modifier le premier écran

L’application sera utilisée par des personnes qui travaillent sur des tablettes durcies, dans un environnement hostile avec beaucoup de poussière. Dans ce cas, il est préférable d’utiliser des gros boutons, plutôt que des icones.

Dans l’écran EcranPrincipal, supprimez le contrôle Hexagone avec le bouton Suppr de votre clavier.

Définissez le contrôle Bouton avec les propriétés suivantes :

Color = Couleurs.Color
Fill = Couleurs.Fill
Height = 84
Size = 28
Width = 304
X = 1046
Y = 668

Insérez un autre contrôle Bouton avec les propriétés suivantes :

Color = Couleurs.Color
Fill = Couleurs.Fill
Height = 84
Size = 28
Width = 304
X = 22
Y = 668

Vous pouvez aussi copier-coller un contrôle puis modifier les valeurs des propriétés de la copie.

Insérez un contrôle icône de type Rectangle avec les propriétés suivantes :

Fill = Couleurs.Fill
Height = 100
Width = 1366
X = 0
Y = 0

Insérez un contrôle Étiquette avec les propriétés suivantes :

Align = Align.Center
Color = Couleurs.Color
Fill = Couleurs.Fill
Height = 100
Size = 28
Text = "Fruits frais"
Width = 1366
X = 0
Y = 0

Pour vous aider, regardez la copie d’écran ci-dessous.

Écran mis à jour
Écran mis à jour

Cet écran va vous servir de modèle pour l’écran suivant.

Dupliquer l’écran principal pour lister

Dans l’arborescence (à gauche), cliquez sur l’écran EcranPrincipal puis cliquez sur les points de suspension (…) et sélectionnez Dupliquer l’écran.

Maintenant, vous allez renommer l’écran dupliqué.

Pour ce faire, dans l’arborescence (à gauche), double-cliquez sur l’écran EcranPrincipal_1 puis tapez son nouveau nom : EcranListe.

Ensuite, dans l’écran EcranListe, supprimez les deux contrôles Bouton avec le bouton Suppr de votre clavier.

Puis vous allez déplacer l’écran dupliqué, afin de le remonter tout en haut.

Pour ce faire, dans l’arborescence (à gauche), cliquez sur l’écran EcranListe puis cliquez sur les points de suspension (…) et sélectionnez Monter.

Insérer un contrôle Galerie (Gallery)

Sur l’écran EcranListe, vous allez insérer un contrôle Galerie vertical.

Dans l’arborescence (à gauche), cliquez sur l’écran EcranListe.

Cliquez sur le ruban Insérer : la liste des sous-menus apparaît (sous Insérer).

Sous Insérer, cliquez sur Galerie : la liste des modèles apparaît.

Dans la liste des modèles, sélectionnez Verticale.

Par défaut, le contrôle Gallery1 est sélectionné. Si ce n’est pas le cas, dans l’arborescence (à gauche), cliquez sur le contrôle Gallery1.

Ensuite, cliquez dans ses propriétés (à droite), cliquez sur la flèche vers le bas du menu Disposition.

Dans la liste des dispositions, cliquez sur Titre, sous-titre et corps.

Ensuite, définissez les propriétés suivantes de Gallery1 :

Height = 568
Items = lstFruits
Width = 1366
X = 0
Y = 100

Dans l’onglet Propriétés du volet de droite, sélectionnez Modifier à côté de l’étiquette Champs.

  • Dans la zone Body1, sélectionnez Stock.
  • Dans la zone Subtitle2, sélectionnez Saisons.
  • Dans la zone Title2, sélectionnez Title.

Cliquez sur la croix en haut et à droite du volet Données pour fermer ce volet.

Vous obtenez l’affichage de la liste des fruits.

Pour vous aider, regardez la copie d’écran ci-dessous.

Galerie mise en forme (vue partielle)
Galerie mise en forme (vue partielle)

Ensuite, définissez les propriétés suivantes de NextArrow2 :

Color = Couleurs.Color

Puis, définissez les propriétés suivantes de Separator2 :

Fill = Couleurs.Fill

Vous allez faire apparaître le nom du producteur entre parenthèse, à coté du nom du fruit.

Pour ce faire, définissez les propriétés suivantes de Title2 :

Text = ThisItem.Titre & " (" & Producteur & ")"

Le champ producteur de la liste SharePoint est volontairement vide, il est donc normal que la parenthèse soit vide. Toutefois, vous devez vous mettre à la place de l’utilisateur de votre application. Celui-ci peut ne pas comprendre la présence de cette paire de parenthèse vide. Vous allez donc rajouter une information qui indique que la provenance est inconnue quand le champ producteur est vide.

Pour ce faire, redéfinissez les propriétés suivantes de Title1 :

Text = ThisItem.Titre & " (" & If(IsBlank(Producteur); "Provenance inconnue"; Producteur) & ")"

Pour vous aider, regardez la copie d’écran ci-dessous.

Nouvelle mise en forme de la galerie (vue partielle)
Nouvelle mise en forme de la galerie (vue partielle)

Cependant, cette mise en forme ne vous convient pas. Vous voulez que le contenu formaté du champ producteur se trouve à côté du champ titre.

Avec la souris, redimensionnez le champ Title2 pour qu’il occupe moins de la moitié de la largeur. La hauteur reste inchangée.

Title2.Height = Title2.Size * 1,8 (soit 36)
Title2.Width = Parent.TemplateWidth – 740 (soit 626)

Ensuite, copiez-collez le champ Title2: vous obtenez un nouveau champ Title2_1. Renommez Title2_1 en Producteur1. Ensuite, avec la souris, déplacez Producteur1 à coté de Title1.

Producteur1.X = 675
Producteur1.Y = 18 

Définissez les propriétés suivantes de Producteur1:

Producteur1.Text = If(IsBlank(Producteur); "Provenance
inconnue"; "Producteur: " & Producteur)

Définissez les propriétés suivantes de Title2 :

Title2.Text = ThisItem.Titre

Pour vous aider, regardez la copie d’écran ci-dessous.

Dernière mise en forme de la galerie (vue partielle)
Dernière mise en forme de la galerie (vue partielle)

Insérer un contrôle Icône (Icon)

Sur l’écran EcranListe, vous allez insérer un contrôle Icône Ajouter.

Dans l’arborescence (à gauche), cliquez sur l’écran EcranListe.

Cliquez sur le ruban Insérer : la liste des sous-menus apparaît (sous Insérer).

Sous Insérer, cliquez sur Icônes : la liste des icônes apparaît.

Dans la liste des modèles, sélectionnez + Ajouter.

Ensuite, définissez les propriétés suivantes de Icon1 :

Color = Couleurs.Color
X = 1276
Y = 18

Dupliquer l’écran principal pour afficher

Il faut ensuite développer l’écran détail pour afficher le détail d’un élément.

Dans l’arborescence (à gauche), cliquez sur l’écran EcranPrincipal puis cliquez sur les points de suspension (…) et sélectionnez Dupliquer l’écran.

Maintenant, vous allez renommer l’écran dupliqué.

Pour ce faire, dans l’arborescence (à gauche), double-cliquez sur l’écran EcranPrincipal_1 puis tapez son nouveau nom : EcranDetail.

Puis vous allez déplacer l’écran dupliqué, afin de le remonter au-dessus de l’écran EcranPrincipal.

Pour ce faire, dans l’arborescence (à gauche), cliquez sur l’écran EcranDetail puis cliquez sur les points de suspension (…) et sélectionnez Monter.

Insérer un contrôle Formulaire (Form)

Sur l’écran EcranDetail, vous allez insérer un contrôle Formulaire.

Dans l’arborescence (à gauche), cliquez sur l’écran EcranDetail.

Cliquez sur le ruban Insérer : la liste des sous-menus apparaît (sous Insérer).

Sous Insérer, cliquez sur Formulaire : la liste des modèles apparaît.

Dans la liste des modèles, sélectionnez Affichage.

Par défaut, le contrôle FormViewer1 est sélectionné. Si ce n’est pas le cas, dans l’arborescence (à gauche), cliquez sur le contrôle FormViewer1.

Ensuite, définissez les propriétés suivantes de FormViewer1 :

DataSource = lstFruits
Height = 568
Item = Gallery1.Selected
Width = 1366
X = 0
Y = 100

Dans l’onglet Propriétés du volet de droite, sélectionnez Modifier les champs à côté de l’étiquette Champs.

Cliquez sur Ajouter un champ : une petite fenêtre s’ouvre dans le volet Champs. Descendez l’ascenseur de cette petite fenêtre jusqu’en bas, pour faire apparaître les champs qui vous intéressent.

Cochez :

  • Producteur
  • Saisons
  • Stock
  • Titre

Puis cliquez sur le bouton Ajouter.

Cliquez sur la flèche à gauche du nom de chaque champ, pour réduire le détail affiché. Vous devrez donc le faire 4 fois.

Avec la souris, déplacez les champs pour être dans cet ordre.

  • Titre
  • Stock
  • Saisons
  • Producteur

Fermez le volet Champs.

Ce formulaire est utilisé par des personnes qui travaillent sur des tablettes durcies, dans un environnement hostile avec beaucoup de poussière. Vous allez grossir la taille des polices.

Pour ce faire, modifiez la Hauteur de toutes les cartes à 250.

Puis, modifiez la Taille de police de tous les DataCardKey à 32.

Ensuite, modifiez la Taille de police de tous les DataCardValue à 48.

Enfin, modifiez la Hauteur de tous les DataCardValue à 87.

Vous allez afficher les champs sur 2 colonnes.

Pour ce faire, cliquez sur FormViewer1, puis changez la valeur de la propriété Colonnes à 2 (au lieu de 3).

Pour vous aider, regardez la copie d’écran ci-dessous.

Formulaire de détail mis en forme (vue partielle)
Formulaire de détail mis en forme (vue partielle)

Enfin, définissez les propriétés du bouton de gauche : Button2_1.

OnSelect = Navigate(EcranListe;ScreenTransition.Fade)
Text = "Accueil"

Le choix a été fait d’associer un bouton pour revenir à l’accueil.

Insérer un contrôle Bouton (Button)

Sur l’écran EcranDetail, vous allez insérer un contrôle Bouton.

Dans l’arborescence (à gauche), cliquez sur l’écran EcranDetail.

Cliquez sur le ruban Insérer : la liste des sous-menus apparaît (sous Insérer).

Sous Insérer, cliquez sur Bouton : un bouton s’affiche.

Définissez le contrôle Bouton avec les propriétés suivantes :

Color = Couleurs.Color
Fill = Couleurs.Fill
Height = 84
Size = 28
Width = 304
X = 534
Y = 668

Dupliquer l’écran principal pour modifier

Dans l’arborescence (à gauche), cliquez sur l’écran EcranPrincipal puis cliquez sur les points de suspension (…) et sélectionnez Dupliquer l’écran.

Maintenant, vous allez renommer l’écran dupliqué.

Pour ce faire, dans l’arborescence (à gauche), double-cliquez sur l’écran EcranPrincipal_1 puis tapez son nouveau nom : EcranModification.

Puis vous allez déplacer l’écran dupliqué, afin de le remonter au-dessus de l’écran EcranPrincipal.

Pour ce faire, dans l’arborescence (à gauche), cliquez sur l’écran EcranModification puis cliquez sur les points de suspension (…) et sélectionnez Monter.

Insérer un contrôle Formulaire (Form)

Sur l’écran EcranModification, vous allez insérer un contrôle Formulaire.

Dans l’arborescence (à gauche), cliquez sur l’écran EcranModification.

Cliquez sur le ruban Insérer : la liste des sous-menus apparaît (sous Insérer).

Sous Insérer, cliquez sur Formulaire : la liste des modèles apparaît.

Dans la liste des modèles, sélectionnez Modifier.

Par défaut, le contrôle Form1 est sélectionné. Si ce n’est pas le cas, dans l’arborescence (à gauche), cliquez sur le contrôle Form1.

Ensuite, définissez les propriétés suivantes de Form1 :

DataSource = lstFruits
Height = 568
Item = Gallery1.Selected
Width = 1366
X = 0
Y = 100

Dans l’onglet Propriétés du volet de droite, sélectionnez Modifier les champs à côté de l’étiquette Champs.

Cliquez sur Ajouter un champ : une petite fenêtre s’ouvre dans le volet Champs. Descendez l’ascenseur de cette petite fenêtre jusqu’en bas, pour faire apparaître les champs qui vous intéressent.

Cochez :

  • Producteur
  • Saisons
  • Stock
  • Titre

Puis cliquez sur le bouton Ajouter.

Cliquez sur la flèche à gauche du nom de chaque champ, pour réduire le détail affiché. Vous devrez donc le faire 4 fois.

Avec la souris, déplacez les champs pour être dans cet ordre.

  • Titre
  • Stock
  • Saisons
  • Producteur

Fermez le volet Champs.

Ce formulaire est utilisé par des personnes qui travaillent sur des tablettes durcies, dans un environnement hostile avec beaucoup de poussière. Vous allez grossir la taille des polices.

Pour ce faire, modifiez la Hauteur de toutes les cartes à 250.

Puis, modifiez la Taille de police de tous les DataCardKey à 32.

Ensuite, modifiez la Taille de police de tous les DataCardValue à 48.

Enfin, modifiez la Hauteur de tous les DataCardValue à 87.

Vous allez afficher les champs sur 2 colonnes.

Pour ce faire, cliquez sur Form1, puis changez la valeur de la propriété Colonnes à 2 (au lieu de 3).

Pour vous aider, regardez la copie d’écran ci-dessous.

Formulaire de modification mis en forme (vue partielle)
Formulaire de modification mis en forme (vue partielle)

Maintenant, définissez les propriétés du bouton de gauche : Button2_2.

OnSelect = Back(ScreenTransition.Fade)
Text = "Retour"

Ensuite, définissez les propriétés du bouton de droite : Button1_2.

OnSelect = SubmitForm(Form1);;Navigate(EcranListe;ScreenTransition.Fade)
Text = "Valider"

Finaliser la navigation de l’écran qui liste

La navigation entre les écrans a été partiellement mise en œuvre. Toutefois, certaines actions de navigation ne peuvent être mises en œuvre que lorsque les éléments sont présents. C’est la raison pour laquelle cette navigation est faite à la fin.

Bien évidemment, vous pourriez changer de méthode de développement. Pour des raisons pédagogiques, le choix a été fait de rentrer tout de suite dans le détail de chaque écran afin de diminuer les manipulations.

Toutefois, si vous avez une vision d’ensemble des tous les composants de PowerApps, vous pouvez d’abord créer tous les objets nécessaires à votre application : écrans, formulaires, etc. Ensuite, vous pouvez préciser le paramétrage de chaque contrôle.

Dans l’arborescence (à gauche), cliquez sur l’écran EcranListe.

Cliquez sur le contrôle NextArrow2.

Définissez la propriété suivante de NextArrow2 :

OnSelect = Navigate(EcranDetail;ScreenTransition.Fade)

Cliquez sur le contrôle Icon1.

Définissez la propriété suivante de Icon1 :

OnSelect = NewForm(Form1);;Navigate(EcranModification;ScreenTransition.Fade)

Finaliser la navigation de l’écran qui détaille

Dans l’arborescence (à gauche), cliquez sur l’écran EcranDetail.

Définissez les propriétés du contrôle Bouton de droite : Button1_1.

OnSelect = EditForm(Form1);;Navigate(EcranModification;ScreenTransition.Fade)
Text = "Modifier"

Définissez les propriétés du contrôle Bouton du milieu : Button3.

OnSelect = Remove(lstFruits;Gallery1.Selected);;Navigate(EcranListe;ScreenTransition.Fade)
Text = "Supprimer"

Enregistrer et exécuter l’application

Avant d’exécuter l’application, vous allez l’enregistrer. Pour ce faire, appuyez sur les touches suivantes de votre clavier : Ctrl + S.

Ensuite, cliquez sur EcranListe.

Cliquez sur l’icône Aperçu en forme de triangle (en haut, à droite) ou appuyez sur la touche F5.

Vérifiez que vous pouvez :

  • Afficher la liste des éléments.
  • Afficher un élément.
  • Ajouter un élément.
  • Modifier un élément.
  • Supprimer un élément.
  • Naviguer d’un écran à un autre.

Fin des manipulations

Fermez l’onglet de votre application : un pop-up apparaît pour confirmer la fermeture. Dans ce pop-up, cliquez sur le bouton Quitter la page. Vous retrouverez votre application sous le menu Applications de l’accueil du site PowerApps.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez découvert le développement d’une véritable application PowerApps de A à Z, à travers une technique de développement, orientée interface.

Article mis à jour le 24.09.2019.

Office365 Addict

Ajouter un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.