Exercice : créer une application canevas

Objectif d’apprentissage

Dans cet exercice, les apprenants vont créer une application canevas à l’aide de Copilot permettant aux collaborateurs de signaler des problèmes de maintenance. Vous allez créer le modèle de données et la disposition d’application initiale à l’aide de Copilot.

À la fin de ce labo réussi, vous saurez comment :

• créer un modèle de données pour prendre en charge votre application à l’aide de Copilot ;
• modifier une application canevas.

Scénario

Contoso College est à la recherche d’une application permettant aux collaborateurs de signaler des problèmes de maintenance sur l’ensemble du campus. Contoso souhaite créer une application canevas à laquelle les collaborateurs peuvent accéder depuis leur téléphone si nécessaire.

À la fin de ce labo réussi, vous saurez comment :

• créer un modèle de données pour prendre en charge votre application à l’aide de Copilot ;
• modifier une application canevas.

Tâche 1 : créer un modèle de données et une application

1. Ouvrez un navigateur web et accédez à Power Apps Maker Portal.

2. À l’aide de la barre de navigation à gauche, cliquez sur Créer.

3. Sous Créer vos applications, choisissez Démarrer avec Copilot.

4. Sur l’écran Décrire les tables que vous souhaitez que Copilot crée, tapez : « Créer une table unique pour soumettre des problèmes de maintenance ».

5. Cliquez sur le bouton Options de table. Dans le menu qui s’affiche, sélectionnez Une seule table.

   

6. Cliquez sur le bouton Générer.

Copilot créé alors une table Maintenance Issue. Ensuite, nous allons ajouter d’autres colonnes à la table.

7. Dans le volet Copilot, saisissez : « Ajouter une colonne de choix nommée Issue Type ».

8. Dans le volet Copilot, ajoutez individuellement les invites suivantes :

   1. « Ajouter une colonne de texte nommée Location »
   2. « Ajouter une colonne de texte nommée Contact Number »
   3. « Ajouter une colonne de choix nommée Priority level »
   4. « Ajouter une colonne de texte nommée Access Instructions »
   5. « Ajouter une colonne de texte nommée Resolution Notes »

Ensuite, nous allons supprimer toutes les colonnes inutiles, car elles vont être remplacées par des colonnes de recherche.

9. Si votre table en comporte, saisissez les commandes suivantes pour les supprimer :

   1. « Supprimer la colonne Reported By »
   2. « Supprimer la colonne Assigned To / Technician »

Votre table Maintenance Issue devrait ressembler à l’image ci-dessous :

Ensuite, nous allons ajouter la table User au modèle de données afin de pouvoir associer des demandes de problème de maintenance à des utilisateurs spécifiques.

10. Dans la barre de commandes, cliquez sur + Table existante.

11. Remplacez Recommandé par Toutes les tables.

12. Dans le champ Rechercher, saisissez User.

13. Sélectionnez la table User, puis cliquez sur le bouton Ajouter l’élément sélectionné.

14. Dans la barre de commandes, cliquez sur Créer des relations.

15. Configurez la relation comme suit :

    • Un : User
    • Plusieurs : Maintenance Issue
    • Nom d’affichage : Requesting Employee

16. Cliquez sur Terminé.

17. Dans la barre de commandes, cliquez sur Créer des relations.

18. Configurez la relation comme suit :

    • Un : User
    • Plusieurs : Maintenance Issue
    • Nom d’affichage : Assigned to

19. Cliquez sur Terminé.

Une fois terminé, le modèle de données devrait ressembler à l’image ci-dessous :

20. Cliquez sur le bouton Enregistrer et ouvrir l’application.

Tâche 2 : personnaliser votre nouvelle application

Maintenant que votre application est créée, nous allons y apporter quelques modifications pour mieux répondre à nos besoins. Nous commençons par apporter quelques modifications à l’écran Welcome Screen.

1. Avec votre nouvelle application ouverte, cliquez sur l’espace réservé Image au-dessus du texte Problèmes de maintenance.
2. Dans le menu qui s’affiche, sélectionnez Modifier>Images en stock.
3. Dans le champ Rechercher, saisissez Medical, sélectionnez l’image du clavier d’ordinateur et du stéthoscope, puis cliquez sur Insérer.
4. Ensuite, cliquez sur l’espace réservé Image au-dessus du texte Utilisateurs.
5. Dans le champ Rechercher, saisissez People, sélectionnez l’image que vous souhaitez utiliser, puis cliquez sur Insérer.
6. Dans le menu qui s’affiche, sélectionnez Modifier>Images en stock.

À présent, nous allons ajuster la taille des images pour les rendre plus faciles à lire pour les utilisateurs. En outre, nous allons ajuster le texte qui s’affiche pour chaque élément.

7. Dans la barre de commandes, cliquez sur le bouton Propriétés (situé juste à droite du bouton Modifier).

8. Cliquez sur l’image au-dessus du texte Problèmes de maintenance.

9. Dans le volet Propriétés, configurez l’image comme suit :

   • Image Position : Remplissage
   • Width : 350
   • Height : 350

10. Répétez l’étape précédente pour définir les propriétés Height et Width de l’image Utilisateurs sur 350 et 350.

11. Cliquez sur le texte sous le texte Problèmes de maintenance.

12. Dans le volet Propriétés, cliquez sur le champ Text, puis remplacez le texte par : « Soumettre le problème de maintenance ».

13. Cliquez sur le texte Welcome Screen dans l’en-tête.

14. Dans le volet Propriétés, définissez la propriété Show Logo sur Désactivé.

15. Définissez la propriété Profile Picture sur Désactivé.

16. Dans le volet Propriétés, sous le groupe Styleand theme, cliquez sur l’icône Fill.

17. Redéfinissez la couleur sur Black.

18. Assurez-vous que l’en-tête est toujours sélectionné, puis redéfinissez la propriété Title sur Contoso Issue Reporting.

Votre application ressemble à l’image ci-dessous :

Tâche 3 : ajouter un nouvel écran à votre application

Nous déterminons qu’en plus de soumettre des problèmes de maintenance, il est logique que les utilisateurs ajoutent des actifs.

1. Avec votre application toujours ouverte, si nécessaire, développez le volet Copilot. Dans Copilot, saisissez le texte suivant : « Ajouter un nouvel écran appelé Assets ». Cliquez sur Envoyer.

2. Cliquez sur le bouton Conserver pour accepter l’écran.

3. Un nouvel écran nommé Assets est alors ajouté à votre application.

4. Sur l’écran, sélectionnez Avec des données.

5. Sur l’écran Sélectionner une source de données, cliquez sur Créer des tables.

6. Dans Copilot, saisissez le texte suivant : « Créer une table appelée Assets. Elle doit inclure les colonnes suivantes : Asset Name, Asset ID, Asset Type, Asset Location, Data Installed et Department ».

7. Si une autre table (Department) a été ajoutée, supprimez-la à l’aide de Copilot en saisissant : « Supprimer la table Department ».

8. Une fois votre table créée, cliquez sur Enregistrer et quitter.

9. De retour dans votre application, sélectionnez Avec des données à nouveau.

10. Un nouvel écran nommé Asset est alors ajouté à votre application.

11. Si nécessaire, dans la barre de commandes, cliquez sur le bouton Propriétés (en regard du bouton Modifier).

12. Ensuite, effectuez une sélection dans la liste Assets. Une icône représentant un crayon devrait s’afficher ; cliquez sur l’icône représentant un crayon.

13. Cliquez sur le bouton Insérer, puis sélectionnez Libellé de texte.

14. Positionnez le Libellé de texte de sorte qu’il soit situé près de l’élément Asset Location.

    

15. Avec le Libellé de texte sélectionné, dans la barre de formule, saisissez le texte suivant : ThisItem.’Asset Type’

    

16. Cliquez sur l’arrière-plan du formulaire.

17. Définissez la propriété Columns sur 1.

18. Une fois terminé, l’écran devrait ressembler à l’image ci-dessous :

    

Tâche 4 : mettre à jour l’écran Welcome Screen

Après examen, nous décidons que la possibilité de créer des utilisateurs dans cette application n’est pas nécessaire, donc nous modifions l’écran Welcome Screen pour autoriser l’accès à Assets.

1. À l’aide de l’Arborescence cliquez sur Welcome Screen.
2. Cliquez sur l’Image au-dessus du texte Utilisateurs/Contacts.
3. Dans le menu qui s’affiche, sélectionnez Modifier, puis Images en stock.
4. Dans le champ Rechercher, saisissez Equipment, puis sélectionnez une image à utiliser.
5. Définissez la propriété OnSelect de l’image sur : Navigate('Assets')

6. Cliquez sur le texte Utilisateurs/Contacts et définissez la propriété Text sur Assets.
7. Cliquez sur Text sous Equipment et redéfinissez la propriété Text sur « Afficher et créer des enregistrements d’actif ».

Tâche 5 : tester votre application

À présent, testons votre application pour nous assurer qu’elle fonctionne correctement.

1. Dans la barre de commandes, cliquez sur le bouton Lire.
2. Cliquez sur l’image Assets.
3. Dans le champ Rechercher, saisissez Office. (Notez que la liste est filtrée.)
4. Sélectionnez l’enregistrement Office Chair.
5. Cliquez sur le bouton Modifier (représentant un crayon). Redéfinissez le champ Category sur Furniture.
6. Redéfinissez le champ Asset Type sur Equipment.
7. Cliquez sur le bouton Enregistrer (représentant une coche).
8. Cliquez sur le bouton Enregistrer.
9. Notez que le champ Asset Type de Desk est redéfini sur Equipment.
10. Cliquez sur le bouton Accueil.
11. Cliquez sur le X violet pour quitter le mode Aperçu.

Tâche 6 : enregistrer et publier l’application

Objectif : enregistrer et publier l’application pour la rendre accessible sur différents navigateurs web, les appareils mobiles ou les plateformes intégrées comme SharePoint ou Teams.

1. Dans Power Apps Studio, cliquez sur le bouton Enregistrer.
2. Sur l’écran Enregistrer sous, définissez le champ Nom sur Contoso Issue Reporting, puis cliquez sur Enregistrer.
3. Cliquez sur le bouton Publier.