Faire une application Power Apps métier de A à Z

Pour faire une application Power Apps métier de A à Z, vous pouvez suivre ces conseils pratiques et concrets qui vont vous guider tout le long du développement.

C’est aussi l’occasion d’apprendre une technique de développement, orientée interface.

Notamment, 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.

Si vous rencontrez des erreurs dans les manipulations ci-dessous, lisez l’article qui explique comment débuguer les erreurs dans Power Apps.

Gardez à l’esprit que l’interface a pu évoluer fortement depuis que cet article a été rédigé.

Modifier une application Power Apps existante

Pour faire une application Power Apps métier, vous allez améliorer grandement une application précédente.

Pour ce faire, ouvrez le site web Microsoft Power Apps.

Ensuite, dans le volet de gauche, cliquez sur Applications.

Puis, 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.

Ensuite, dans la liste qui apparaît, cliquez sur Modifier.

Puis patientez quelques instants.

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

Se connecter aux données dans votre application Power Apps

Pour faire une application Power Apps métier, vous allez connecter des données métiers.

Pour ce faire, dans le menu du haut, cliquez sur le ruban Affichage.

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

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

Ensuite, 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.

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

Puis, dans cette liste, sélectionnez votre site SharePoint.

Ensuite, 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 contrôle Bouton

Votre application Power Apps 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.

Pour ce faire, dans l’écran EcranPrincipal, supprimez le contrôle Hexagone avec le bouton Suppr de votre clavier.

Ensuite, 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érer un nouveau contrôle Bouton

Puis, 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érer un contrôle Rectangle

Ensuite, insérez un contrôle Rectangle avec les propriétés suivantes :

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

Enfin, 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

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

Dupliquer l’écran principal pour lister

Dans l’arborescence (à gauche) de votre application Power Apps, 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

Sur l’écran EcranListe, vous allez insérer un contrôle Galerie vertical dans votre application Power Apps.

Pour ce faire, dans l’arborescence (à gauche), cliquez sur l’écran EcranListe.

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

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

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

Enfin, 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.

Affecter les champs de la liste SharePoint au contrôle Galerie

Vous allez affecter les champs de la liste SharePoint au contrôle de type Galerie verticale de votre application Power Apps.

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

Ensuite, 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

Puis, 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.

Ensuite, 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.

Paramétrer finement le contrôle Galerie de votre application Power Apps

Vous allez paramétrer finement le contrôle de type Galerie verticale de votre application Power Apps.

Pour ce faire, 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) & ")"

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

Insérer un contrôle Icône

Vous allez insérer un contrôle de type icône dans votre application Power Apps. Ce contrôle permet d’ajouter un élément à la liste SharePoint.

Pour ce faire, sur l’écran EcranListe, vous allez insérer un contrôle Icône Ajouter.

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

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

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

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

Enfin, 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. Vous allez dupliquer l’écran existant pour réutiliser le paramétrage de votre application Power Apps.

Pour ce faire, 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

Sur l’écran EcranDetail, vous allez insérer un contrôle Formulaire dans votre application Power Apps. Le rôle de ce contrôle est d’afficher un élément sélectionné de la liste SharePoint.

Cet élément est sélectionné à partir de la galerie ajoutée plus haut.

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.

Paramétrer finement le contrôle formulaire

Vous allez paraméter finement le contrôle de type formulaire de votre applicatin Power Apps.

Pour ce faire, 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.

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

Sur l’écran EcranDetail de votre application Power Apps, vous allez insérer un contrôle Bouton. Le rôle de ce bouton sera de demander la modification d’un élément.

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

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

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

Ajouter les champs aux formulaires dans votre application Power Apps

Vous allez indiquer les champs du formulaire dans votre application Power Apps.

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

Puis, 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.

Ensuite, cochez :

• Producteur
• Saisons
• Stock
• Titre

Puis cliquez sur le bouton Ajouter.

Paramétrer le formulaire de modification dans votre application Power Apps

Vous allez paramétrer finement le formulaire de modification dans votre application Power Apps.

Pour ce faire, 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.

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

• Titre
• Stock
• Saisons
• Producteur

Enfin, fermez le volet Champs.

Augmenter la taille des polices

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).

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 Power Apps, 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.

Pour ce faire, dans l’arborescence (à gauche), cliquez sur l’écran EcranListe.

Ensuite, cliquez sur le contrôle NextArrow2.

Puis définissez la propriété suivante de NextArrow2 :

OnSelect = Navigate(EcranDetail;ScreenTransition.Fade)

Ensuite, cliquez sur le contrôle Icon1.

Puis, définissez la propriété suivante de Icon1 :

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

Finaliser la navigation de l’écran de détails de votre application Power Apps

Vous allez finaliser la navigation de l’écran de détails dans votre application Power Apps.

Pour ce faire, dans l’arborescence (à gauche), cliquez sur l’écran EcranDetail.

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

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

Text = "Modifier"

Puis, 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 votre application Power Apps

Avant d’exécuter votre application Power Apps, vous allez l’enregistrer.

Pour ce faire, appuyez sur les touches suivantes de votre clavier : Ctrl + S.

Ensuite, cliquez sur EcranListe.

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

Enfin, 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.

Puis, 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 Power Apps.

La manipulation est terminée.