Chapitre 3 : Construction d’un prototype low-code

Notes

Chapitre 2 fait référence à l’application mobile utilisée par les techniciens et ingénieurs de terrain, et à l’application de bureau utilisée par le personnel de local. Les chapitres suivants se concentrent sur la conception, la mise en œuvre et le déploiement des applications mobiles créées avec Power Apps. Les applications de bureau sont laissées comme un exercice pour le Lecteur.

Kiana est sceptique à l’égard des solutions low-code et Power Apps. Mais elle et Maria décident quand même de créer une application pour aider les techniciens sur le terrain à vérifier l’inventaire (et à commander des pièces, si nécessaire), à interroger la base de connaissances et à vérifier leur prochain rendez-vous lorsqu’ils sont absents du bureau. Kiana et Maria prévoient d’utiliser cette expérience pour explorer comment ajouter des contrôles et utiliser des formules dans Power Apps.

Bien que la création d’un prototype low-code initial soit en principe une tâche de développeur citoyen, Kiana décide de prêter attention au processus afin de comprendre comment l’application est construite. Kiana a besoin de ces informations pour pouvoir aider Maria à intégrer les sources de données réelles, les API web et d’autres services requis dans l’application.

Point 1 : Gestion des stocks sur le terrain

L’objectif initial de Maria est de créer une application canevas qui affiche une liste de pièces et permet à l’utilisateur d’afficher les détails de n’importe quelle pièce. Finalement, l’utilisateur devrait également pouvoir commander une pièce ; cependant, cette version initiale de l’application sera simplement un prototype et ne sera pas encore connectée à un back-end. Après avoir obtenu les commentaires de Caleb (le principal technicien sur le terrain), Maria travaille avec Kiana sur l’intégration de l’application canevas avec le système d’inventaire qui s’exécute en local.

Maria connaît très bien le système de gestion des stocks existant et comprend les informations qu’il contient. Maria commence par créer un classeur Excel qui contient des tableaux avec des données fictives sur certains exemples de pièces. Les champs du tableau sont ID, Nom, ID de catégorie, Prix, Aperçu, NumberInStock, et Image (une URL qui fait référence à une image de la pièce). Ce classeur peut être utilisé pour créer et tester l’application canevas, afin de s’assurer qu’elle affiche correctement les données requises. Maria stocke ce classeur dans son compte OneDrive sous le nom BoilerParts.xlsx.

Notes

Vous pouvez trouver une copie de ce classeur dans le dossier Actifs dans le référentiel Git pour ce guide.

Si vous êtes un concepteur de base de données relationnelle, vous remarquerez que le classeur Excel présente une vue dénormalisée des données. Par exemple, dans une base de données relationnelle, CategoryID serait très probablement un identificateur numérique faisant référence à un tableau séparé contenant les détails de la catégorie, y compris le nom.

Notes

Les URL dans la colonne Image ne sont actuellement que des espaces réservés. Dans l’application terminée, ces URL seront remplacées par les adresses de fichiers image réels.

Pour créer l’application avec Power Apps, procédez comme suit.

1. Connectez-vous à Power Apps.

2. Sur la page Accueil, sous Partir des données, sélectionnez Excel Online.

   

3. Sur la page Connexions, sélectionnez OneDrive for Business, puis sélectionnez Créer.

   

4. Sur la page OneDrive for Business, sélectionnez le fichier BoilerParts.xlsx.

   

5. Sélectionnez le tableau dans le fichier Excel (Maria a créé le tableau en utilisant le nom par défaut, Tableau 1), puis sélectionnez Connecter.

   

6. Patiente pendant que Power Apps génère l’application.

   

7. Une fois l’application générée, vous verrez l’écran Parcourir, affichage les champs CategoryID, ID, et Image de chaque ligne de la table des pièces dans le classeur.

   

8. Les champs actuellement affichés ne sont pas très utiles pour aider un ingénieur à sélectionner un produit. Sur le volet affichant l’écran Parcourir, sélectionnez l’étiquette Échangeur de chaleur dans la première ligne de données. Dans la barre de formule, sélectionnez la propriété Texte dans la liste déroulante. Remplacez la valeur de cette propriété par ThisItem.Name. Le texte dans le premier champ de chaque ligne basculera pour afficher le nom de la pièce.

   Notes

   Dans l’image suivante, l’étiquette Échangeur de chaleur initialement affichée sur le formulaire a été remplacée par le nom du produit, Chauffage 3,5 W/S.

   

9. Répétez l’étape précédente pour les Étiquettes ID et Image. Changer la propriété Texte du champ ID à CategoryID, et la propriété Texte du champ Image sur Aperçu. L’écran Parcourir devrait maintenant ressembler à l’image suivante, qu’un ingénieur de terrain est plus susceptible de trouver utile pour sélectionner les pièces.

   

10. La fonction de recherche de l’écran Parcourir utilise par défaut les champs initialement sélectionnés lors de la création de l’écran — dans ce cas, CategoryID, ID, et Image. Les résultats sont triés par CategoryID. Il est logique de basculer cela sur les champs Nom, ID de catégorie, et Aperçu, avec les résultats triés par Nom. Sélectionnez le contrôle BrowseGallery1 sur le volet Vue arborescente. Dans la liste déroulante sur le côté gauche de la barre de formule, sélectionnez la propriété Items. Faites glisser le bord inférieur de la barre de formule vers le bas pour que la formule soit complètement visible. La formule contient l’expression suivante :

    **SortByColumns(Search([\@Table1], TextSearchBox1.Text, "CategoryID","ID","Image"), "CategoryID", If(SortDescending1, Descending, Ascending))
    

    

11. Changer l’expression Rechercher pour référencer les champs Nom, CategoryID, et Aperçu en utilisant la formule suivante :

    SortByColumns(Search([\@Table1], TextSearchBox1.Text, "Name", "CategoryID", "Overview"), "Name", If(SortDescending1, Descending, Ascending))
    

12. Le titre dans l’en-tête du formulaire n’est pas utile et le thème par défaut ne correspond pas à l’apparence d’entreprise de VanArsdel. Dans l’écran Parcourir, sélectionnez l’étiquette Tableau 1, et sur la barre de Formule, changez la propriété Texte de l’étiquette sur "Parcourir les pièces" (incluez les guillemets doubles dans la valeur).

13. Dans la barre d’outils, sélectionnez Thème (vous devrez peut-être développer la barre d’outils pour afficher plus d’éléments), puis sélectionnez le thème Forêt. Les couleurs et le style de l’écran Parcourir changera pour correspondre au thème.

    

Rendre l’écran Détails plus utile

Vous avez créé l’application de base et modifié l’écran Parcourir pour afficher les champs qu’un ingénieur peut utiliser pour identifier une pièce. L’application contient également un écran Détails, qui affiche toutes les informations pour une pièce sélectionnée. Les champs de cet écran ne sont actuellement pas affichés dans une séquence logique, vous devez donc les réorganiser. Vous pouvez également supprimer le champ ID de cet écran, car ces informations ne sont pas pertinentes pour un ingénieur.

1. Sur le volet Vue arborescente, faites défiler vers le bas et sélectionnez DetailScreen1. Cet écran affiche des détails sur la pièce qu’un utilisateur sélectionne sur l’écran Parcourir.

   

2. Dans l’en-tête de l’écran Détails dans le volet central, sélectionnez l’étiquette Tableau 1. Dans le volet droit, sur l’onglet Propriétés, remplacez la propriété Texte par Part Details.

   Notes

   Dans de nombreux cas, vous pouvez obtenir les mêmes résultats en utilisant la barre de formule comme le volet Propriétés. Cependant, certaines propriétés qui ne sont disponibles que via le volet Propriétés.

   

3. Dans le volet Vue de l’arborescence, sous DetailScreen1, sélectionnez DetailForm1. Sur le volet droit, sous l’onglet Propriétés, cliquez sur Modifier les champs en regard de Champs. Dans le volet central, sélectionnez et faites glisser les champs afin qu’ils s’affichent dans l’ordre suivant, de haut en bas :

   • Nom
   • CategoryID
   • Présentation
   • Prix
   • NumberInStock
   • Image
   • ID

   

4. Sélectionnez le champ ID, sélectionnez les points de suspension qui apparaissent sur le côté droit du champ, puis sélectionnez Supprimer dans le menu déroulant qui apparaît. Cette action supprime le champ ID du formulaire.

   

5. Dans le volet Vue de l’arborescence, sous DetailForm1, sélectionnez CategoryID_DataCard1. Cet élément est un contrôle DataCard qui affiche le nom d’un champ (appelé la clé) et sa valeur.

   

   Sur le volet droit, sous l’onglet Avancé, cliquez sur Débloquer pour modifier les propriétés. Dans la section Données, modifiez le champ DisplayName à "Category" (incluez les guillemets).

   Notes

   Comme avec l’onglet Propriétés, de nombreuses propriétés de l’onglet Avancé sont également accessibles via la barre de formule. Pour définir ces propriétés, vous pouvez utiliser la barre de formule si vous préférez.

   

6. Répétez l’étape précédente pour changer la clé pour NumberInStock_DataCard1 à "Nombre en stock" (incluez les guillemets).

7. Vous devez ajuster le formatage du champ Prix pour afficher les données sous forme de valeur monétaire. Dans le volet Vue de l’arborescence, sous DetailForm1, sous Price_DataCard1, sélectionnez DataCardValue7. c’est le champ qui affiche la valeur du champ Prix. Sur le volet DataCardValue7 à droite, sur l’onglet Avancé, modifiez la propriété Texte à Text(Value(Parent.Default), "[$-en-US]$ ###,##0.00")

   

   L’expression Parent Par défaut fait référence à l’élément de données auquel le contrôle parent (le DataCard) est attaché — dans ce cas, la colonne Prix. La fonction Texte reformate cette valeur en utilisant le format spécifié comme deuxième argument ; dans cet exemple, il s’agit de la devise locale avec deux décimales.

8. La carte de données d’image doit afficher une image de la pièce plutôt que l’URL du fichier image. Sur le volet Vue arborescente, sous DetailForm1, en dessous de Image_DataCard1, sélectionnez DataCardValue3, puis sélectionnez Supprimer pour supprimer ce contrôle.

9. Sélectionner Image_DataCard1. Dans le volet de gauche, sélectionnez + Insérer. Sur le volet Insérer, développez Média, puis sélectionnez Image.

   

10. Revenir au volet Vue arborescente et vérifiez que le contrôle de texte Image1 a été ajouté au contrôle Image_DataCard1.

    

11. Dans le volet Arborescence, sélectionnez Image_DataCard1. Dans le volet droit, sur l’onglet Avancé, changer Hauteur à 500, pour laisser suffisamment d’espace pour qu’une image soit affichée.

    

12. Dans le volet Arborescence, sélectionnez Image1. Définissez les propriétés suivantes :

    • Image : Parent.Default
    • ImagePosition : ImagePosition.Fit
    • Largeur : 550
    • Hauteur : 550

    Notes

    L’image affichée est actuellement vide car l’URL du classeur Excel n’est qu’un espace réservé. Vous allez résoudre ce problème et récupérer une véritable URL lorsque vous liez l’application à une API web dans un chapitre ultérieur.

L’application contient également un écran Modifier, qui permet à un utilisateur de modifier les informations d’une pièce. Un ingénieur ne doit pas être en mesure de modifier les détails d’une pièce, de créer de nouvelles pièces ou de supprimer des pièces du catalogue.

1. Dans le volet Arborescence, sélectionnez EditScreen1. Cliquez sur les points de suspension, puis sélectionnez Supprimer pour supprimer cet écran.

   

2. Dans le volet Arborescence, sélectionnez DetailsScreen1. Remarquez que Power Apps Studio affiche un message d’erreur pour cet écran. Cette erreur se produit car DetailsScreen1 contient des expressions qui font référence à l’écran EditScreen1, qui n’existe plus.

3. Dans l’en-tête de DetailsScreen1, sélectionnez l’icône de crayon (IconEdit1). La propriété OnSelect de ce contrôle contient l’expression EditForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None). Quand l’icône Modifier est sélectionnée, cette expression s’exécute et tente de se déplacer vers l’écran EditScreen1.

   

4. Sur le volet Vue arborescente, sélectionnez IconEdit1, puis sélectionnez Supprimer. Cette icône n’est plus nécessaire.

5. Sélectionnez IconDelete1, puis sélectionnez Supprimer. Cette icône est utilisée pour supprimer la pièce actuelle et n’est pas non plus requise.

   

6. Notez que le texte Détails de la pièce a disparu de l’en-tête de l’écran et à la place Power Apps Studio affiche un message d’erreur. Cela s’est produit car la largeur du contrôle d’étiquette qui affiche le texte est calculée. Dans le volet Arborescence, sélectionnez LblAppName2. Examiner la propriété Width. La valeur de cette propriété est le résultat de l’expression Parent.Width - Self.X - IconDelete1.Width - IconEdit1.Width.

   

7. Changer l’expression pour la propriété Largeur à Parent.Width - Self.X. L’erreur devrait disparaître et le texte Détails de la pièce doit réapparaître dans l’en-tête de l’écran.

8. Dans le volet Arborescence, sélectionnez BrowseScreen1. Cet écran affichera également un message d’erreur. L’icône + dans la barre d’outils (IconNewItem1) permet à l’utilisateur d’ajouter une nouvelle pièce. La propriété OnSelect propriété de cette icône fait référence à l’écran EditScreen1.

   

9. Sélectionnez IconNewItem1, puis sélectionnez Supprimer. Comme précédemment, le texte de l’en-tête de l’écran disparaît et un message d’erreur s’affiche, et pour la même raison.

10. Dans le volet Vue de l’arborescence, sous BrowseScreen1, sélectionnez LblAppName1. Modifiez l’expression pour la propriété Width en supprimant la référence à IconNewItem1.Width. La nouvelle expression devrait être Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

    

11. Il y a toujours un problème au niveau de l’en-tête. Bien que le texte Parcourir les pièces ait réapparu, une erreur est affichée et les icônes d’actualisation et de tri sont au mauvais endroit. Dans le volet Arborescence, sélectionnez IconSortUpDown1. Trouvez la propriété X pour ce contrôle. Cette propriété détermine la position horizontale de l’icône dans l’en-tête. Il est actuellement calculé en fonction de la largeur du contrôle IconNewItem1.

    

12. Changer l’expression pour la propriété X à Parent.Width - Self.Width.

13. Dans le volet Arborescence, sélectionnez IconRefresh1. Changer l’expression pour la propriété X à Parent.Width - IconSortUpDown1.Width - Self.Width. Les erreurs devraient toutes disparaître.

Enregistrez le flux et testez l’application

Maintenant vous pouvez enregistrer et tester l’application.

1. Sélectionnez Fichier > Enregistrer sous.

2. En dessous de Enregistrer sous, sélectionnez Le cloud, entrez le nom VanArsdelApp, puis sélectionnez Enregistrer.

   

3. Sélectionnez la flèche Précédent pour revenir dans l’écran Accueil.

   

4. Sélectionner F5 pour prévisualiser l’application. Sur la page Parcourir les pièces, sélectionnez le crochet droit (>) à droite de n’importe quelle partie. L’écran Détails de la pièce apparaît.

   

5. Sélectionnez le crochet gauche (<) dans l’en-tête d’écran Détails pour revenir à l’écran Parcourir.

6. Sur l’écran Parcourir les pièces, saisissez du texte dans la zone Rechercher. Au fur et à mesure que vous tapez, les éléments seront filtrés pour n’afficher que ceux qui ont le texte correspondant dans les champs Nom, CategoryID, ou Aperçu des champs.

   

7. Fermez la fenêtre d’aperçu et revenez à Power Apps Studio.

Point 2 : Base de connaissances sur le terrain

Pour accéder à la base de connaissances, Maria et Caleb (le technicien) envisagent une interface simple où l’utilisateur saisit un critère de recherche et l’application affiche tous les articles de la base de connaissances qui mentionnent le terme. Maria sait que ce processus impliquera la recherche cognitive Azure, mais n’a pas besoin, ni envie de comprendre comment cela fonctionne. Par conséquent, Maria décide de fournir uniquement l’interface utilisateur de base et de travailler avec Kiana ultérieurement pour ajouter la fonctionnalité réelle.

Maria décide de créer un écran basé sur le modèle Liste disponible dans Power Apps Studio.

1. Sur la barre d’outils de l’écran Accueil de Power Apps Studio, sélectionnez Nouvel écran, puis sélectionnez Liste.

   

2. Dans l’en-tête de l’écran, sélectionnez l’étiquette qui affiche le texte [Title]. Changer la propriété Texte à "Query" (incluez les guillemets).

   

3. Dans l’en-tête de l’écran, sélectionnez le signe plus (+), puis sélectionnez Supprimer. L’icône + est destinée à permettre à l’utilisateur d’ajouter plus d’éléments à la liste. La base de connaissances est uniquement basée sur des requêtes, cette fonctionnalité n’est donc pas nécessaire.

   

   Notez que la suppression de cette icône provoque une erreur dans l’en-tête en raison de la façon dont l’emplacement et les largeurs des autres éléments sont calculés. Vous l’avez vu précédemment avec l’écran de gestion des stocks, et la solution est la même, comme décrit dans les étapes suivantes.

4. Sur le volet Arborescence, faites défiler vers le bas la section Screen1, et sélectionnez LblAppName3. Changer la propriété Largeur à la formule Parent.Width - LblAppName3.X - IconSortUpDown2.Width - IconRefresh2.Width.

   

5. Dans le volet Arborescence, sélectionnez IconSortUpDown2. Modifier la propriété X à la formule Parent.Width - IconSortUpDown2.Width.

6. Dans le volet Arborescence, sélectionnez IconRefresh2. Modifier la propriété X à Parent.Width - IconSortUpDown2.Width - IconRefresh2.Width. Cela devrait résoudre toutes les erreurs avec l’écran.

7. Sélectionnez Fichier > Enregistrer.

8. Dans la zone Note de version, entrez le texte Ajout de l’interface utilisateur de la base de connaissances, puis sélectionnez Enregistrer.

9. Revenir à l’écran Accueil et sélectionnez F5 pour prévisualiser le nouvel écran. comme dans l’image suivante.

   

   Notez que si vous sélectionnez l’icône > à côté de l’une des entrées factices, la fonctionnalité de détails ne fonctionne pas actuellement. Vous aborderez ce problème plus tard lorsque vous intégrerez la recherche cognitive Azure dans l’application.

10. Fermez la fenêtre d’aperçu et revenez à Power Apps Studio.

Point 3 : Planification sur le terrain et notes

Maria travaille avec Malik, le réceptionniste du bureau, pour concevoir l’interface pour la planification et les rendez-vous sur le terrain dans l’application. Malik fournit un classeur Excel avec quelques exemples de données que Maria peut utiliser pour créer l’écran des rendez-vous. Le classeur contient un tableau avec les colonnes suivantes :

• ID (ID du rendez-vous)
• ID client (un Identificateur unique pour le client)
• Nom du client
• Adresse du client
• Détails du problème (une description textuelle du problème rencontré par le client)
• Numéro du contact
• Statut
• Date de rendez-vous
• Heure du rendez-vous
• Notes (une description textuelle avec toutes les notes ajoutées par l’ingénieur)
• Image (une photographie de l’appareil, soit en état de fonctionnement après réparation, soit comme photo supplémentaire pour les notes de l’ingénieur)

Notes

Comme pour les données de gestion de l’inventaire sur le terrain, ce classeur présente une vue dénormalisée des données. Dans le système de rendez-vous existant, ces données sont stockées dans des tables séparées qui contiennent des données de rendez-vous et des données client.

Maria stocke ce fichier dans un compte OneDrive sous le nom Appointments.xlsx. Maria se souvient qu’elle utilisait auparavant le nom par défaut du tableau dans le classeur et qu’elle devait ensuite changer le titre dans les différents écrans, elle renomme donc le tableau du classeur sous le nom Rendez-vous.

Notes

Ce classeur est disponible dans le dossier Actifs du référentiel Git pour ce guide.

Maria souhaite créer la section des rendez-vous de l’application directement à partir du fichier Excel. Maria décide de suivre une approche similaire à celle de la fonctionnalité de gestion des stocks sur le terrain, sauf que cette fois l’ingénieur sera autorisé à créer et à modifier les rendez-vous.

Maria décide de créer les écrans de rendez-vous initialement en tant qu’application distincte. De cette façon, Maria peut utiliser Power Apps Studio pour générer une grande partie de l’application automatiquement. Power Apps Studio ne vous permet pas actuellement de générer des écrans supplémentaires à partir d’une connexion de données dans une application existante. Après avoir créé et testé les écrans, Maria les copie dans l’application de base de connaissances et de gestion des stocks sur le terrain.

Notes

Une autre approche consiste à ajouter la table Rendez-vous dans le fichier Excel en tant que deuxième source de données à l’application existante, puis créez à la main les écrans pour les rendez-vous. Maria a choisi de générer les nouveaux écrans à partir du classeur et de copier les écrans. Elle a plus l’habitude des faire du copier-coller que de créer des écrans manuellement, mais elle apprend progressivement à créer des écrans au fur et à mesure qu’elle avance dans la création de cette application.

Pour créer l’application de rendez-vous

1. Dans la barre de menu Power Apps Studio, sélectionnez Fichier.

   

2. Sélectionnez Nouveau dans le volet de gauche. Dans le volet principal, cochez la case OneDrive Entreprise – Disposition du téléphone.

   

3. Sur le volet Connexions, sélectionnez Rendez-vous.xlsx.

   

4. Dans le fichier Excel, sélectionnez la table Rendez-vous, puis sélectionnez Connecter.

   

5. Patiente pendant l’application est générée. Lorsque la nouvelle application apparaît, elle contiendra un écran Parcourir, un écran Détails, et un écran Modifier, en utilisant le thème par défaut.

   

6. Sur le volet Arborescence, dans la section BrowseScreen1 sous BrowseGallery1, sélectionnez Image1, puis sélectionnez Supprimer. L’écran Parcourir doit simplement lister les rendez-vous, pas les images qui leur sont associées.

   

   Notez que la suppression du contrôle Image1 provoque plusieurs erreurs à l’écran car les largeurs et l’emplacement du contrôle Titre1 font référence au contrôle Image. Vous résoudrez ces problèmes à l’étape suivante.

7. Dans le volet Vue de l’arborescence, sous BrowseGallery1, sélectionnez Title1. Définissez la valeur de la propriété X sur 16. Changez la formule dans la propriété Largeur à Parent.TemplateWidth - 104. Cela devrait résoudre toutes les erreurs de l’écran.

8. Dans le volet Vue de l’arborescence, sous BrowseGallery1, sélectionnez Body1. Cette commande affiche actuellement les coordonnées téléphoniques du client. Modifiez la valeur dans la propriété Texte à ThisItem.’Customer Name’ (incluez les guillemets simples).

   

   Les détails sur le nom d’écran Parcourir affiche maintenant le nom du client.

9. Dans le volet Arborescence, sélectionnez BrowseGallery1. À l’aide de la barre de formule, examinez l’expression dans la propriété Items. Le contrôle recherche les rendez-vous à l’aide de la date, de l’heure et du numéro de contact du rendez-vous. Modifiez cette formule pour rechercher le nom du client plutôt que le numéro de contact :

   SortByColumns(Search([@Appointments], TextSearchBox1.Text, "Appointment_x0020_Date","Appointment_x0020_Time","Customer_x0020_Name"), "Appointment_x0020_Date", If(SortDescending1, Descending, Ascending)).
   

   Notez que les rendez-vous sont classés par date puis par heure (les deux premiers champs affichés).

10. Dans le volet Arborescence, supprimez IconNewItem1. Seul le personnel de local peut réserver de nouveaux rendez-vous pour les ingénieurs et les techniciens. Notez que cette action entraîne des erreurs dans le formulaire car la largeur et la position des autres contrôles dans l’en-tête font référence à l’icône que vous venez de supprimer.

11. Dans le volet Arborescence, sélectionnez LblAppName1. Changer la formule de la propriété Width. en Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

12. Dans le volet Arborescence, sélectionnez IconRefresh1. Changer la valeur de la propriété X à Parent.Width - IconSortUpDown1.Width - Self.Width.

13. Dans le volet Arborescence, sélectionnez iconSortUpDown1. Changer la valeur de la propriété X à Parent.Width - Self.Width.

14. Sur le volet Arborescence, sélectionnez BrowseScreen1, puis sélectionnez le bouton points de suspension (...). Dans le menu déroulant qui apparaît, sélectionnez Renommer et changez le nom de l’écran en BrowseAppointments.

    

15. En utilisant la même technique, changez le nom du contrôle BrowseGallery1 à BrowseAppointmentsGallery.

Cela complète l’écran Parcourir.

Pour créer l’écran des détails

Vous pouvez maintenant porter votre attention sur l’écran Détails.

1. Sur le volet Arborescence, faites défiler vers la section DetailsScreen1. Vous pouvez voir que les détails sont présentés par ordre alphabétique par nom de champ et quelques informations utiles — comme le champ Remarques — ne sont pas affichés du tout.

   

2. Dans le volet Arborescence, sélectionnez DetailForm1. Sur le volet droit, sous l’onglet Propriétés, cliquez sur Modifier les champs en regard de Champs. Dans le volet central, sélectionnez chacun des champs suivants, puis sélectionnez Supprimer :

   • Date de rendez-vous
   • Heure du rendez-vous
   • ID client
   • ID

3. Sélectionnez + Ajouter champ et cliquez sur les champs suivants :

   • Notes
   • Détails du problème
   • Statut

   

4. Faites glisser chaque champ pour qu’il s’affiche dans l’ordre suivant, de haut en bas :

   • Nom du client
   • Adresse du client
   • Numéro du contact
   • Détails du problème
   • Statut
   • Notes
   • Image

5. Dans le volet Arborescence, sélectionnez Notes_DataCard1. Changez la propriété Height sur 320.

   

6. Dans le volet Arborescence, supprimez IconDelete1. Les ingénieurs ne devraient pas pouvoir supprimer les rendez-vous du système.

7. Sélectionnez LblAppName2 et changez la propriété Width à Parent.Width - Self.X - IconEdit1.Width.

8. En utilisant la technique décrite précédemment, changez le nom de DetailsScreen1 à AppointmentDetails.

Pour modifier l’écran de modification

Le dernier écran à regarder, pour l’instant, est l’écran Modifier.

1. Dans le volet Arborescence, sélectionnez EditScreen1.

2. Dans le volet Arborescence, dans la section EditScreen1, sélectionnez EditForm1. Sur le volet droit, sous l’onglet Propriétés, cliquez sur Modifier les champs en regard de Champs.

3. Supprimer les champs suivants :

   • Adresse du client
   • ID
   • ID client
   • Date de rendez-vous
   • Heure du rendez-vous

4. Ajouter les champs suivants :

   • Détails du problème
   • Statut
   • Notes

5. Faites glisser chaque champ pour qu’il s’affiche dans l’ordre suivant, de haut en bas :

   • Nom du contact
   • Numéro de client
   • Détails du problème
   • Statut
   • Notes
   • Image

6. Sélectionnez le champ Nom du client et développez-le pour afficher ses propriétés. Changer le Type de contrôle à Afficher le texte. Cette modification rend le contrôle en lecture seule ; il est utile de voir le nom du client sur l’écran Modifier, mais un ingénieur ne devrait pas être en mesure de le modifier.

   

7. Sélectionnez le champ Numéro du contact et développez-le pour afficher ses propriétés. Changer le Type de contrôle à Afficher le texte. Ce champ doit également être en lecture seule.

8. Sélectionnez le champ Remarques, développez-le et modifiez le Type de contrôle à Modifier le texte multiligne. Ce paramètre permet à l’ingénieur d’ajouter des notes détaillées pouvant s’étendre sur plusieurs lignes.

9. Sélectionnez le champ Statut, développez-le et modifiez le Type de contrôle à Valeurs autorisées.

10. Dans le volet Arborescence, sélectionnez Statut_DataCard5. Sur le volet droit, sous l’onglet Propriétés, cliquez sur Débloquer pour modifier les propriétés. Faites défiler vers le bas la propriété AllowedValues et remplacez le texte par ["Fixed", "Parts Ordered", "Unresolved"] (inclure les crochets). L’ingénieur de terrain ne peut régler le Statut que sur l’une de ces valeurs définies.

    

11. Sur le volet Arborescence, renommez EditScreen1 comme EditAppointment.

Maintenant vous pouvez enregistrer et tester l’application.

1. Sélectionnez Fichier > Enregistrer sous.

2. En dessous de Enregistrer sous, sélectionnez Le cloud, entrez le nom VanArsdelAppointments, puis sélectionnez Enregistrer.

3. Sélectionnez la flèche dans la barre d’outils Power Apps Studio pour revenir dans l’écran Accueil.

4. Sélectionner F5 pour prévisualiser l’application. Sur la page Rendez-vous, sélectionnez l’icône > à côté de n’importe quel rendez-vous. L’écran Détails du rendez-vous doit apparaître. Dans l’en-tête, sélectionnez Modifier pour mettre à jour le rendez-vous. Vérifiez les détails suivants :

   • Les champs du nom du client et du numéro de contact sont en lecture seule.
   • Le champ de statut est limité aux valeurs de la liste déroulante.
   • Vous pouvez saisir des notes qui s’étendent sur plusieurs lignes.
   • Vous pouvez charger un fichier image dans le champ image.

   Notes

   Une amélioration que vous ajouterez plus tard vous permettra de prendre une photo avec votre téléphone à partir de l’application et de l’ajouter au champ d’image.

   

Combiner les écrans dans une seule application

Maria a créé deux applications, mais elle souhaite les combiner en une seule application. Pour ce faire, elle copie les écrans de l’application de rendez-vous dans l’application de gestion des stocks et de base de connaissances sur le terrain, comme suit :

1. Ouvrez une nouvelle fenêtre de navigateur et connectez-vous à Power Apps Studio avec les détails de votre compte.

2. Dans le volet gauche, sélectionnez Applications, sélectionnez VanArdselApp, puis sélectionnez Modifier.

   

3. Dans la barre d’outils, sélectionnez Nouvel écran, puis Vide. Cette action ajoutera un nouvel écran à l’application dans laquelle vous copiez les contrôles pour l’écran Parcourir pour l’application VanArsdelAppointments.

   

4. Le nouvel écran sera nommé Screen2. Sur le volet Arborescence, renommez le comme BrowseAppointments.

5. Répétez deux fois l’étape précédente pour ajouter deux autres écrans vides (Screen3 et Screen4).

6. Renommer Screen3 comme AppointmentDetails et renommer Screen4 comme EditAppointment.

7. Dans la barre d’outils gauche de Power Apps Studio, sélectionnez l’icône Données. Dans le volet Données, sélectionnez Ajouter des données. Dans la liste déroulante Sélectionner une source de données, dans le champ Rechercher, entrez OneDrive, puis sélectionnez OneDrive Entreprise.

   

8. Sélectionnez le fichier Excel Appointments.xlsx, sélectionnez la table Rendez-vous, puis sélectionnez Connecter.

9. Basculez vers la fenêtre du navigateur qui affiche l’application VanArsdelAppointments.

10. Dans la barre d’outils, sélectionnez Thème (vous devrez peut-être développer la barre d’outils pour afficher plus d’éléments), puis sélectionnez le thème Forêt. c’est le même thème utilisé par l’application VanArsdel.

11. Dans la barre d’outils de gauche, sélectionnez l’icône Arborescence, sélectionnez l’écran BrowseAppointments, puis sélectionnez Ctrl+A. Cette action sélectionne toutes les commandes de l’écran.

12. Sélectionnez Ctrl+C pour copier ces contrôles dans le presse-papiers.

13. Revenez à la fenêtre du navigateur qui affiche l’application VanArsdelApp.

14. Dans la barre d’outils de gauche, sélectionnez l’icône Arborescence, puis sélectionnez l’écran BrowseAppointments.

15. Sélectionnez Ctrl+V pour coller les contrôles sur l’écran.

    Notes

    Parfois, l’en-tête de l’écran apparaît légèrement trop bas. Pour résoudre ce problème, sélectionnez les contrôles IconSortUpDOwn1_1, IconRefresh1_1, LblAppName1_1 et RectQuickActionBar1_1 commandes sur le volet Arborescence (maintenez Majuscule enfoncé en cliquant pour sélectionner plusieurs contrôles à la fois), puis utilisez la souris ou les touches fléchées pour les déplacer vers le haut dans le volet d’affichage de conception.

16. Revenez à la fenêtre du navigateur qui affiche l’application VanArsdelRendez-vous, puis sélectionnez et copiez les contrôles dans l’écran AppointmentDetails dans le presse-papiers (Ctrl+A suivi par Ctrl+C).

17. Revenez à la fenêtre du navigateur qui affiche l’application VanArsdelApp, sélectionnez l’écran AppointmentDetails, puis collez les contrôles (Ctrl+V). Ajustez la position des commandes dans l’en-tête de l’écran, si nécessaire.

    Notes

    Vous verrez une erreur signalée dans l’en-tête de l’écran AppointmentDetails. Cette erreur se produit car l’écran fait référence aux contrôles dans l’écran EditAppointment, qui n’a pas encore été copié. Les étapes suivantes devraient résoudre cette erreur.

18. Revenez à la fenêtre du navigateur qui affiche l’application VanArsdelAppointments, puis sélectionnez et copiez les contrôles dans l’écran EditAppointment dans le presse-papiers.

19. Revenez à la fenêtre du navigateur qui affiche l’application VanArsdelApp, sélectionnez l’écran EditAppointment, puis collez les contrôles. Encore une fois, déplacez les contrôles dans l’en-tête de l’écran si nécessaire.

20. Sur le volet Arborescence, sélectionnez l’écran AppointmentDetails et vérifiez que l’erreur indiquée précédemment a maintenant disparu.

21. Dans le volet Arborescence, sélectionnez l’écran BrowseScreen1. Renommez cet écran comme BrowseParts.

22. Renommez l’écran DetailsScreen1 comme PartDetails.

23. Renommez l’écran Screen1 comme Knowledgebase.

    Notes

    Il est recommandé de renommer les écrans pour refléter leur fonction plutôt que d’utiliser les noms par défaut générés par Power Apps Studio, surtout si une application contient plusieurs écrans. Cela peut aider à éviter toute confusion plus tard si l’application est modifiée par un autre développeur.

Ajouter un écran d’accueil à l’application

La dernière étape consiste à ajouter un écran Accueil à l’application. L’écran Accueil permettra à l’ingénieur de se déplacer entre les différentes parties de l’application (gestion des stocks, base de connaissances et rendez-vous).

1. Dans l’application VanArsdelApp dans la barre d’outils, sélectionnez Nouvel écran, puis sélectionnez Vierge.

2. Sur le volet Arborescence, renommez Screen2 à Accueil.

3. Dans la barre d’outils, sélectionnez Insérer. Dans la liste des contrôles, développez Média, puis sélectionnez Image. Le contrôle sera ajouté à l’écran.

   

4. Met la position X de la commande à 16, et la position Y à 22. Changer la Largeur à 605, et la Hauteur à 127. Changer la Position de l’image à Remplir.

   

5. Toujours sur l’onglet Propriétés, dans la liste déroulante Image, sélectionnez +Ajouter un fichier image, puis chargez l’image VanArsdelLogo.png dans le contrôle.

   Notes

   Ce fichier image est disponible dans le dossier Actifs du référentiel Git pour ce guide.

   

6. Dans la liste des contrôles, ajoutez quatre contrôles Étiquette de texte au formulaire et positionnez-les de manière à ce qu’ils soient empilés sous le logo VanArsdel.

   

7. Sélectionnez le contrôle le plus haut Étiquette de texte. Dans le volet droit, sur l’onglet Propriétés, définissez la propriété Texte sur Prochain rendez-vous. Met la Taille de police à 30 et utilisez le sélecteur de couleurs pour définir la couleur de la police sur le vert (pour correspondre au logo).

   

8. Sélectionnez le second contrôle Étiquette de texte. Modifiez la valeur dans la propriété Texte à First(Appointments).'Customer Name' (incluez les guillemets). Cette formule récupère le nom du client à partir de la première ligne du tableau des rendez-vous.

   

   Notes

   Actuellement, cette formule agit simplement comme un espace réservé. Vous modifierez l’étiquette plus tard pour récupérer le prochain rendez-vous de l’ingénieur, plutôt que d’afficher toujours le premier.

9. Sélectionnez le troisième contrôle Étiquette de texte, et définissez la propriété Texte à First(Appointments).'Appointment Date'.

10. Définissez la propriété Texte du quatrième contrôle Étiquette sur First(Appointments).'Appointment Time'. Vous définissez la propriété Taille de police sur 30.

11. Dans la liste des contrôles, ajoutez un contrôle Rectangle. Définissez les propriétés suivantes pour ce contrôle :

    • Mode d’affichage : Afficher
    • X : 0
    • Y : 632
    • Largeur : 635
    • Hauteur : 1

    Ce contrôle agit comme un séparateur visuel au milieu de l’écran.

12. Ajouter trois commandes Bouton à l’écran, disposées verticalement et espacées uniformément sous le séparateur. Définissez la propriété Texte du bouton supérieur sur Rendez-vous, la propriété Texte du bouton du milieu sur Pièces, et la propriété Texte du bouton inférieur sur Knowledgebase.

    

13. Sélectionner le bouton rendez-vous. Changer l’expression dans l’action OnSelect à la formule Navigate(BrowseAppointments, ScreenTransition.Fade). Cette action fait basculer l’affichage sur l’écran des rendez-vous lorsque l’utilisateur sélectionne le bouton.

    

14. Met l’action OnSelect pour le bouton Pièces pour Navigate(BrowseParts, ScreenTransition.Fade).

15. Met l’action OnSelect pour le bouton Knowledgebase pour Navigate(Knowledgebase, ScreenTransition.Fade).

En plus de naviguer depuis l’écran Accueil vers les autres écrans du système, les écrans Rendez-vous, Pièces, et Knowledgebase ont besoin d’un moyen pour permettre à l’utilisateur de revenir à l’écran Accueil. Maria décide d’ajouter des boutons de retour à ces écrans.

1. Dans le volet Arborescence, sélectionnez l’écran BrowseParts.

2. Sélectionnez le contrôle RectQuickActionBar1 pour lui donner le focus.

3. Sélectionnez le menu Insérer et sélectionnez Ajouter une icône. Déplacez l’icône vers la gauche du contrôle RectQuickActionBar1. Notez que l’icône masquera une partie de l’étiquette Parcourir les pièces.

   

4. Sur le menu Arborescence, remplacez le nom du nouveau contrôle Icône par IconReturn1.

5. Changer la formule de l’action OnSelect à l’expression Back(ScreenTransition.Fade). La fonction Retour permet à l’utilisateur de revenir à l’écran précédent qu’il a visité.

6. Sur l’onglet Propriétés, remplacez la propriété Icône par < Gauche.

7. Dans l’en-tête de l’écran, sélectionnez l’étiquette Parcourir les pièces. Définissez la propriété X sur IconReturn1.Width + 20. L’Étiquette Parcourir les pièces ne doit plus être partiellement masquée.

   

8. En suivant le processus décrit aux étapes 16 à 22, ajoutez une icône nommée IconReturn2 au contrôle RectQuickActionBar3 dans l’écran Knowledgebase.

9. De même, ajoutez une icône nommée IconReturn3 au contrôle RectQuickActionBar1_1 dans l’écran BrowseAppointments.

10. Dans le volet Arborescence, sélectionnez l’objet Application. Remplacez la propriété StartScreen par l’expression Home. Cette action garantit que l’écran Accueil s’affiche chaque fois que l’application démarre :

    

    Notes

    Si vous ne spécifiez pas l’écran à afficher au démarrage de l’application, l’écran qui apparaît en haut du volet Arborescence sera utilisé. Pour déplacer un écran au début de la liste, cliquez avec le bouton droit de la souris sur l’écran sur le volet Arborescence et sélectionnez Déplacer vers le haut jusqu’à ce qu’il soit au sommet.

Enfin, vous pouvez tester l’application.

1. Sélectionnez Fichier > Enregistrer. Dans la zone Notes de version, entrez Version complète avec écran d’accueil, puis sélectionnez Enregistrer.

2. Sélectionnez la flèche de retour pour revenir à l’écran Accueil, puis sélectionnez F5 pour exécuter l’application.

3. Vérifiez que l’écran Accueil de l’application apparaît.

4. Sélectionner rendez-vous. L’écran des rendez-vous devrait apparaître.

5. Sélectionnez la flèche Précédent pour revenir dans l’écran Accueil.

6. Sélectionner Pièces. Le navigateur de pièces devrait apparaître.

7. Sélectionnez la flèche Précédent pour revenir dans l’écran Accueil.

8. Sélectionner Knowledgebase. L’écran de requête de la base de connaissances doit apparaître.

9. Sélectionnez la flèche Précédent pour revenir dans l’écran Accueil.

10. Fermez la fenêtre d’aperçu et revenez à Power Apps Studio.

Le prototype de l’application est créé.

Précédent Suivant