Écran de détail et écran de formulaire MS Power Apps

Dans ce didacticiel, nous allons expliquer comment créer l'écran de détail et l'écran de formulaire dans Power Apps à partir de rien.

Étant donné que Power Apps a été conçu pour être facile à utiliser, il est facilement fourni avec des modèles contenant des écrans, des galeries et d'autres éléments de base existants. Cependant, il y aura des moments où vous devrez créer votre propre application à partir de zéro en sachant que vous pourriez avoir des objectifs uniques dans la création de votre application.

C'est pourquoi il est important de comprendre les éléments constitutifs d'une application. L'écran en fait partie.

Table des matières

• Création de l'écran de détail dans MS Power Apps
• Lier la galerie à l'écran de détail
• Naviguer entre la galerie et l'écran de détail
• Création de l'écran de modification du formulaire
• Rendre le bouton Soumettre fonctionnel
• Navigation entre l'écran d'édition et l'écran de détail
• Création d'un nouvel écran de formulaire dans MS Power Apps
• Basculement entre le nouveau formulaire et le formulaire de modification dans MS Power Apps
• Utilisation de la fonction Retour
• Conclusion

Création de l'écran de détail dans MS Power Apps

Un écran de détail contient toutes les informations fournies avec chaque enregistrement de votre source de données.

Dans l'exemple ci-dessous, vous verrez une galerie affichant différents enregistrements. La galerie ne contient qu'un aperçu de cet enregistrement. Dans ce cas, vous verrez le prénom, le nom, l'emplacement et le niveau VIP si vous regardez l'entrée pour Viki Darling.

Mais cette entrée vient avec beaucoup d'autres détails. Si nous regardons la source de données, nous verrons qu'il y a aussi un numéro de client, une date d'adhésion, un numéro de passeport et un nom d'agent.

C'est à cela que sert l'écran de détail. C'est un écran que les utilisateurs atterriront au moment où ils cliqueront sur n'importe quel point d'entrée de la galerie. C'est là qu'ils verront tous les autres détails qui ne sont pas visibles dans la galerie.

Pour commencer à créer l'écran de détail, nous allons revenir au MasterScreen et le dupliquer.

Commencer à partir d'un écran principal était quelque chose dont nous avons discuté dans un tutoriel sur la façon de créer une application à partir de zéro. Avoir un écran maître qui contient les éléments de base de votre application permet de garder facilement tous vos écrans uniformes en termes d'apparence et de disposition.

Renommez l'écran dupliqué en DetailScreen.

Modifions également l'étiquette en haut et écrivons les détails du client.

Bien que nous créions cet écran à partir de zéro, il n'est pas nécessaire d'ajouter manuellement chaque détail. Power Apps a automatisé tout ce processus pour nous.

Nous allons commencer par ajouter un formulaire d'affichage, ce qui peut être fait sous le ruban Insertion.

Étant donné que cet écran n'aura pas vraiment d'autre usage que d'afficher les détails du client, nous pouvons laisser le formulaire remplir tout l'écran en faisant glisser les coins.

L'écran de détail nécessite une source de données. Nous pouvons lier une source de données ici dans le volet de droite sous Propriétés. Pour cette application, nous utilisons Table1.

Maintenant que nous avons une source de données d'où nous extrayons les détails, il est temps de décider quels détails nous voulons afficher à l'écran. Cela peut être fait en cliquant sur Modifier les champs.

Nous pouvons ajouter des champs en cochant tous les champs que nous estimons applicables à notre objectif. Dans ce cas, ajoutons tous ces champs.

Power Apps chargera ensuite tous les champs que nous avons choisis dans le formulaire que nous venons de créer, qui est FormViewer1.

Si nous cliquons dessus, cela montre qu'il a automatiquement configuré des cartes de données pour chacune des différentes colonnes de notre source de données.

Et pour chaque carte de données, il a en fait mis en place une clé, qui contient le nom de la carte de données.

Il a également mis en place une valeur, qui affichera la valeur réelle associée à cette colonne.

Pour le moment, ce formulaire n'affiche pas encore de valeurs. C'est parce que nous n'avons pas encore lié notre galerie à DetailScreen. Encore une fois, le but ici est que les détails ne soient affichés qu'après qu'un enregistrement a été choisi dans notre galerie.

Lier la galerie à l'écran de détail

L'avantage des galeries dans Power Apps est qu'elles possèdent une propriété appelée Selected. Il relie essentiellement la galerie à l'écran de détail afin que chaque fois que nous sélectionnons un enregistrement dans la galerie, il n'affiche que les détails de cette entrée spécifique.

Pour ce faire, nous allons mettre en surbrillance FormViewer1 et accéder à la propriété Item.

Assurez-vous que vous faites référence à la bonne galerie ici, surtout si votre application utilise plusieurs galeries. Dans ce cas, nous voulons utiliser Gallery2.

En revenant à la barre de formule de l'écran de détail, nous allons taper Gallery2.Selected et appuyer sur Entrée.

Maintenant, nous voyons ici des détails provenant de ce qui a été sélectionné en dernier dans la galerie.

Revenons à l'écran Afficher les clients et choisissons Viki Darling dans notre galerie.

Après avoir cliqué dessus, vous verrez que les détails sur l'écran de détail ont également changé et affichent maintenant des informations pour Viki Darling.

Cela met l'accent sur la relation entre ces écrans et les éléments qu'ils contiennent. Les champs de l'écran de détail sont pilotés par la propriété de l'élément dans la visionneuse de formulaires, qui, à son tour, est pilotée par l'enregistrement sélectionné dans la galerie.

Naviguer entre la galerie et l'écran de détail

Pour le moment, nous ne pouvons voir les détails que si nous choisissons une entrée dans la galerie et allons manuellement à l'écran de détail. Idéalement, les utilisateurs devraient être automatiquement dirigés vers l'écran de détail dès qu'ils cliquent sur une entrée. Nous allons donc ajouter un peu de navigation entre les écrans.

Commençons par la navigation depuis l'écran de détail pour revenir à la galerie. Nous allons ajouter une flèche vers la gauche via le bouton Icônes sous le ruban Insérer.

Changeons la couleur en blanc pour nous assurer qu'elle correspond aux autres éléments à l'écran.

Avec l'icône en surbrillance, utilisons la fonction Naviguer et référençons l'écran où nous voulons que l'icône atterrisse. Dans ce cas, il s'agit du ViewCustomersScreen.

Pour le rendre plus attrayant visuellement lorsque nous passons d'un écran à un autre, utilisons la transition Fondu.

Ensuite, nous avons appuyé sur Entrée pour verrouiller cette formule. Une fois que nous avons fait cela, tout ce que nous avons à faire est de cliquer sur l'icône.

Cela nous mènera à l'écran Afficher les clients.

Cette fois, passons de l'écran Afficher les clients à l'écran de détail.

Cette fois, nous avons affaire à différents disques au sein de la galerie. Mais cela ne signifie pas que nous devons créer une action différente pour chaque élément. Nous avons juste besoin de mettre en surbrillance la galerie et de choisir OnSelect dans la liste déroulante des propriétés.

Nous utiliserons à nouveau la fonction Navigate et référencerons le DetailScreen. Nous utiliserons la même transition que nous avons utilisée auparavant. Ensuite, appuyez sur Entrée pour verrouiller cette formule.

Maintenant que nous avons défini la formule, cliquons sur le record de Megan Rohman.

Maintenant, cela nous amène directement à l'écran de détail avec les détails de Megan Rohman automatiquement remplis à l'écran.

Et parce que nous avons configuré la navigation de l'écran de détail à l'écran de visualisation des clients, un simple clic sur l'icône de flèche vous ramènera directement à la galerie.

Création de l'écran de modification du formulaire

Bien que notre source de données nous fournisse toutes les informations, nous devons parfois mettre à jour les informations du client. Cela signifie que nous aurons également besoin d'un écran de formulaire d'édition.

Créons donc une autre copie de l'écran principal et renommez-le en EditScreen.

Nous allons également utiliser le même écran pour ajouter de nouveaux clients, alors changeons l'étiquette en Nouveau/Modifier les clients.

Pour cet écran, nous allons insérer un formulaire d'édition.

Tout comme le formulaire d'affichage que nous avons ajouté précédemment, nous devons encore ajouter une source de données. Nous choisirons à nouveau Table1.

L'ajout d'un champ dépendra des données dont vous disposez et de l'utilisateur final que vous avez en tête. Par exemple, le numéro de passeport d'un client ne changera pas vraiment. Donc, vous voudrez peut-être laisser cela en dehors du formulaire.

Pour l'instant, ajoutons tout. Cette fois, vous verrez qu'il y a des espaces sous chaque champ.

Ces espaces peuvent également être modifiés. Par exemple, sous DateJoined, nous n'aurons pas vraiment besoin de temps. Nous avons seulement besoin de la date.

Vous remarquerez également que les champs n'ont pas d'espaces. C'est une chose que nous pouvons aussi changer. Nous pouvons dire Prénom au lieu de Prénom.

We’ll deal with those changes later. For now, we need to make sure that the details of the customer we choose from the View Customers screen show up in this edit form screen.

With Form2 highlighted, let’s go to the Items property and equate that with Gallery2.Selected.

Now, it shows the details of one of our customers on the form.

Once we start editing, we’re going to need a button to click to submit the changes. So let’s add a button through the Insert ribbon.

Label the button and write Submit.

Forms have three modes — edit, new and view. At the moment, this form is in edit mode. This means we’re able to go to any of these fields and change the entries.

In contrast to this, the detail screen is technically a display gallery. That’s why if you look at the properties on the right pane, it does’t give us the option to edit even if this is also a form.

The display form is similar to how this edit screen will work if it’s in view mode. It locks in all the items so that none of them can be edited.

That’s why if we need to change any of the entries in our gallery, we need our form to be in edit mode. We’ll also need the submit button at the bottom to be functional so that it actually submits the form and updates the underlying records.

Making The Submit Button Functional

To lock in an action each time we click on the submit button, we need to go to the OnSelect property and write SubmitForm on the formula bar.

SubmitForm is a function that aggregates all the updates in the form and submits those changes. It also takes the actual form that we want to submit, which in this case is Form2.

Voyons ce qui se passe maintenant que la formule a été verrouillée. Pour le moment, l'emplacement de Coy Newell apparaît comme États-Unis.

Changeons-le en Canada et cliquez sur Soumettre.

Maintenant, quand nous revenons à l'écran de détail, il montre le Canada comme emplacement.

Revenons à l'écran d'édition et cette fois, changeons le nom de famille. Donc, au lieu de Newell, changeons cela en Smith et cliquez sur Soumettre.

Encore une fois, si nous allons à l'écran de détail, nous constatons que les modifications ont également été apportées ici.

Si nous allons à l'écran d'affichage du client, cela montre également que Coy Newell est maintenant Coy Smith, et l'emplacement est maintenant le Canada au lieu des États-Unis.

Cela montre que pendant que nous travaillons, les choses se mettent à jour en arrière-plan et modifient les données sur tous les écrans liés à ce sur quoi nous travaillons actuellement. Il est ainsi beaucoup plus facile de modifier les informations dont nous disposons.

Navigation entre l'écran d'édition et l'écran de détail

Maintenant que nous avons un écran d'édition, nous voulons avoir les moyens d'atterrir sur cette page provenant de l'écran de détail. Ajoutons donc l'icône d'édition.

Encore une fois, nous allons changer la couleur pour qu'elle soit uniforme avec tous les autres éléments.

Avec l'icône en surbrillance, nous allons choisir la propriété OnSelect, utiliser la fonction Navigate et référencer l'écran où nous voulons que cette icône mène, qui est l'écran d'édition. N'ajoutons pas de transition d'écran cette fois.

Maintenant, nous voulons également pouvoir revenir à l'écran de détail une fois que nous avons terminé de soumettre les modifications que nous avons apportées ici dans l'écran d'édition. Ajoutons donc l'icône de retour et utilisons la même formule, mais cette fois, en revenant au DetailScreen.

Avec la navigation supplémentaire, il sera plus facile pour les utilisateurs finaux de passer d'un écran à l'autre une fois notre application publiée.

Création d'un nouvel écran de formulaire dans MS Power Apps

Maintenant que nous avons l'écran de modification du formulaire, nous devrions également permettre aux utilisateurs d'ajouter des enregistrements qui n'existent pas encore dans la galerie. Cette fois, nous n'allons pas ajouter un nouveau formulaire. Au lieu de cela, nous allons utiliser celui existant puisque nous avons étiqueté le dernier écran Nouveau / Modifier les clients.

Nous avons mentionné précédemment que les formulaires dans Power Apps vous permettent non seulement de passer en mode édition et affichage, mais également de passer en nouveau mode.

Fondamentalement, passer en nouveau mode signifie que toutes les zones de texte sont vides. Si nous écrivons quelque chose dans les cases et que nous appuyons sur Soumettre, cela ajoute l'enregistrement au lieu de modifier une entrée existante.

Donc, ce que nous devons pouvoir faire, c'est changer le mode de ce formulaire de modifier à nouveau, puis de nouveau à modifier en fonction des besoins.

Commençons par l'écran d'accueil, que nous avons créé dans un didacticiel précédent sur la création d'écrans maîtres . Comme vous pouvez le voir, nous avons déjà un bouton ici pour ajouter de nouveaux clients.

Pour le moment, ce bouton ne mène à aucun écran pour l'instant. Alors mettons en surbrillance le bouton, allons à OnSelect et utilisons la fonction Navigate pour le faire mener à l'EditScreen.

Maintenant, nous allons atterrir sur l'écran d'édition chaque fois que nous cliquons sur ce bouton depuis la page d'accueil.

Le problème est que cet écran contient toujours tous les détails que nous éditions auparavant. Puisque nous ajoutons un nouveau client, nous préférons avoir un écran vide.

Revenons donc à l'écran d'accueil pour ajouter une autre fonction appelée NewForm. NewForm met d'abord le formulaire en nouveau mode avant d'atterrir dessus.

Cette fonction a besoin du formulaire réel que nous voulons passer en nouveau mode, nous faisons donc référence à Form2.

Notez que nous avons utilisé un point-virgule entre les deux fonctions. Fondamentalement, un point-virgule dicte l'ordre d'exécution de ces fonctions. Il exécute d'abord la fonction NewForm, et une fois que c'est fait, c'est la seule fois qu'il exécute la fonction Navigate.

Maintenant que nous avons corrigé la formule, cliquer sur le bouton Ajouter un nouveau client nous mènera maintenant à un formulaire vierge.

Basculement entre le nouveau formulaire et le formulaire de modification dans MS Power Apps

Revenons à notre galerie et cliquons sur le disque de Viki Darling.

Disons que nous voulons modifier certains des champs ici. Nous allons donc cliquer sur l'icône d'édition.

Le problème est que nous atterrissons sur un nouveau formulaire, et non sur un formulaire d'édition. C'est parce que nous l'avons laissé dans un nouveau formulaire lorsque nous avons créé la navigation pour le bouton Ajouter un nouveau client.

Donc, cette fois, nous voulons que l'icône d'édition bascule le formulaire en mode édition avant d'atterrir sur cet écran. Pour ce faire, nous allons utiliser la même formule que pour le nouveau formulaire, mais nous allons utiliser la fonction EditForm à la place.

La fonction EditForm fait passer le formulaire référencé de son mode actuel au mode édition. Une fois que nous avons cela en place, chaque fois que nous cliquons sur l'icône d'édition dans l'écran de détail, nous allons maintenant atterrir sur l'écran d'édition en mode édition.

Cela signifie également que lorsque nous soumettons le bouton Soumettre, il va mettre à jour l'enregistrement existant au lieu d'ajouter une nouvelle entrée.

Utilisation de la fonction Retour

Maintenant que nous avons les formulaires dont nous avons besoin, vérifions notre navigation pour nous assurer que nos utilisateurs finaux atterrissent sur les bons écrans.

Disons que nous sommes sur l'écran d'accueil et que nous décidons d'ajouter un nouveau client. Nous cliquons sur le bouton qui nous amène à un formulaire vierge. Mais ensuite, nous changeons d'avis et cliquons sur le bouton de retour.

Mais lorsque nous faisons cela, cela ne nous ramène pas à l'écran d'accueil. Au lieu de cela, cela nous amène à l'écran de détail.

Pour savoir ce qui s'est passé, allons à l'icône de retour et regardons l'action qui s'y rattache. Il s'avère que nous avons défini le bouton de retour pour accéder à l'écran de détail par défaut.

Ce que nous voulons qu'il se passe ici, c'est que nous atterrissions sur l'écran précédent sur lequel nous étions avant d'atterrir ici. Cela signifie qu'au lieu d'utiliser la fonction Naviguer et de faire référence à un écran spécifique, nous devons passer à la fonction Retour.

Cette fonction ne nous oblige pas à référencer un écran. Son comportement change en fonction de l'écran d'où nous venons. Cela signifie que, que nous venions de l'écran d'accueil ou de l'écran de détail, cliquer sur la fonction de retour nous amènera désormais au dernier écran que nous avons visité.

Présentation de Power Apps : définition, fonctionnalités, fonctions et importance
Environnements Power Apps : configuration correcte des éléments de l'application
Fonctions et formules PowerApps | Une introduction

Conclusion

Avec les détails, les modifications et les nouveaux écrans de formulaire en place, notre application prend lentement forme et est presque prête à être publiée. C'est la grande chose à propos de Power Apps. Que nous choisissions de commencer avec un modèle ou de créer une application à partir de zéro, tout est simple et assez facile à créer.

Nous avons également vu à quel point il est important de s'assurer que la navigation entre les pages fonctionne bien. Cela joue un rôle essentiel pour s'assurer que notre application est suffisamment intuitive pour les utilisateurs finaux une fois qu'elle sera mise en ligne.

Tous mes vœux,

Henri