Power Platform - Apps - Automate - SharePoint

Power Platform  - Apps - Automate - SharePoint

Exos

Exo03 | Créer des applications dans Teams

Scénario

Il n'est pas rare que les organisations accumulent des périphériques informatiques, des cordons d'alimentation et d'autres appareils électroniques inutilisés. Votre organisation prend des mesures pour réutiliser les appareils et les périphériques informatiques existants avant de commander de nouveaux équipements.

Vous êtes invité à créer une application où les utilisateurs peuvent publier des appareils dont ils n'ont plus besoin et parcourir ce que leurs collègues ont publié.

Exigences

1. L'application doit utiliser Dataverse pour Teams.

2. Les utilisateurs doivent être en mesure de créer de nouveaux éléments (périphériques informatiques), de modifier les éléments qu'ils ont créés et de voir les éléments créés par d'autres utilisateurs.

3. Les éléments doivent être retirés de la liste s'ils ne sont plus disponibles.

4. Autoriser les utilisateurs à réserver un article.

5. Permet à l'utilisateur de marquer l'article pour le ramassage.

6. Si l'article est réservé, seul l'utilisateur réservé doit être en mesure de marquer l'article ramassé.

7. Les utilisateurs doivent être en mesure de rechercher des éléments.

Ce que vous apprendrez

1. Comment créer une application à l’aide de Dataverse for Teams.

2. Comment publier une application.

3. Comment accorder à d’autres utilisateurs l’autorisation d’accéder à votre application.

Ressources à télécharger

Le fichier Excel :

Recycle.xlsx

10 kB

⁠

Les images :

pl_100_images.zip

18.5 MB

⁠

Étapes détaillées

Exercice 1 : Prise en main de Microsoft Dataverse for Teams

Dans cet exercice, vous allez créer une équipe et installer Power Apps for Teams.

Tâche 1 : Créer une équipe

Dans cette tâche, vous allez créer une nouvelle équipe.

1. Accédez à

Microsoft Teams⁠

(https://teams.microsoft.com/).

2. Sélectionner Équipes, passez la souris sur Créer une équipe et sélectionner le bouton Créer une équipe.

⁠

3. Sélectionner À partir de zéro.

4. Sélectionner publique.

5. Entrer Green pour Nom de l’équipe et sélectionner Créer.

6. Sélectionner Ignorer dans l’écran Ajouter des membres à Green.

7. Vous devriez maintenant avoir une nouvelle équipe nommée Green.

⁠

8. Ne quittez pas cette page.

Tâche 2 : Installer Power Apps

Dans cette tâche, vous allez installer Power Apps for Teams.

1. Sélectionner... Obtenir plus d’applications, recherchez Power Apps et sélectionner Power Apps.

⁠

2. Sélectionner Ajouter puis Ajouter.

3. Cliquer avec le bouton droit sur l’onglet Power Apps et sélectionner Épingler.

⁠

Exercice 2 : Créer une application

Dans cet exercice, vous allez configurer Dataverse for Teams en créant une application et vous allez également créer une table Dataverse avec des colonnes.

Tâche 1 : Créer une application

Dans cette tâche, vous allez configurer Dataverse for Teams en créant une application.

1. Accédez à

Microsoft Teams⁠

(https://teams.microsoft.com/)

2. Sélectionner Power Apps et sélectionner Démarrer maintenant.

⁠

3. Sélectionner l’équipe Green que vous avez créée et sélectionner Créer.

4. Attendez que l’approvisionnement soit terminé.

5. Entrer Upcycle pour le nom de l’application et sélectionner Enregistrer :

⁠

6. Ne quittez pas cette page.

Tâche 2 : Créer une table

Dans cette tâche, vous allez créer une table et des colonnes.

1. Sélectionner Avec données, puis Créer une table.

⁠

2. Sélectionnez Démarrer avec une table vierge :

⁠

3. Cliquer sur Modifier les propriétés de table :

⁠

4. Entrer Gadget pour Nom de la table et sélectionner Créer :

⁠

5. Cliquer sur la colonne Nouvelle colonne puis Modifier la colonne.

6. Entrez Nom dans le champ Nom d'affichage, puis sélectionnez Mettre à jour.

7. Sélectionner + (Nouvelle colonne).

8. Entrer Description pour Nom complet, sélectionner Une seule ligne de texte pour Type de données et sélectionner Enregistrer.

9. Sélectionner à nouveau + Nouvelle colonne.

10. Entrer Disponibilité pour Nom, sélectionner Option > Option pour le Type données.

11. Entrer Disponibilité pour Nom complet.

12. Entrer Disponible pour le premier choix et sélectionner + Nouveau choix.

13. Entrer Réservé pour le deuxième choix et sélectionner + Nouveau choix.

14. Entrer Récupéré pour le troisième choix et sélectionner Enregistrer :

⁠

15. Sélectionner Disponible pour le Choix par défaut et Sélectionner Enregistrer.

16. Sélectionner + (Nouvelle colonne).

17. Saisir Emplacement pour le Nom complet, sélectionner Texte pour le Type de données, cocher Obligatoire et cliquer sur Enregistrer :

18. Cliquer sur + (Nouvelle colonne)

19. Saisir Photo pour le Nom complet, sélectionner Fichier > Image pour le Type de données, cocher la case Image principale et cliquer sur Enregistrer.

20. Cliquer sur + (Nouvelle colonne)

21. Saisir Réservé par pour le Nom complet, sélectionner Recherche pour le Type de données, sélectionner User pour la Table associée et cliquer sur Enregistrer :

⁠

22. Votre écran de table devrait maintenant ressembler à l’image ci-dessous.

⁠

23. Fermez l’éditeur de tableau en sélectionnant le bouton Enregistrer et fermer.

24. Ne quittez pas cette page.

Tâche 3 : Modifier l’application

Dans cette tâche, vous allez modifier l’application à l’aide de filtres pour les gadgets disponibles et modifier le formulaire.

REMARQUE Si Power Apps Studio n'est pas ouvert à partir de la dernière étape, accédez à l'application Power Apps, sélectionnez l'onglet Accueil et ouvrez l'application Upcycle que vous avez créée.

1. Sélectionner Screen1. Si l’écran contient déjà le formulaire, passez à l’étape suivante, sinon sélectionner Avec des données et sélectionner Table Gadgets sous Environnement actuel. Cela créera les éléments de l’écran, y compris le formulaire.

2. Assurez-vous que RightContainer1 est développé et sélectionner le contrôle EditForm1 dans l’arborescence.

⁠

3. Accédez au volet Propriétés (à droite) et sélectionner X champs sélectionnés (ou Modifier les champs).

⁠

4. Sélectionner le bouton + Ajouter un champ.

5. Si l’un des champs ci-dessous n’existe pas sur le contrôle EditForm, sélectionner le bouton + Ajouter un champ, sélectionner le champ manquant et sélectionner Ajouter :

Nom

Description

Disponibilité

Emplacement

Réservé par

Photo

6. Supprimez tous les champs supplémentaires et fermez le volet Champs. Votre formulaire ne doit comporter que les colonnes Nom, Description, Disponibilité, Emplacement, Réservé par et Photo.

7. Mettre 1 à Colonnes.

⁠

8. Sélectionner Photo_DataCard1 à l’intérieur de la zone de travail et définissez Largeur sur 400.

⁠

9. Développez le formulaire et sélectionner la carte Réservé par_DataCard1.

⁠

10. Accédez au volet Propriétés, sélectionner l’onglet Avancé, puis sélectionner Déverrouiller.

⁠

11. Recherchez la propriété DisplayMode et remplacez la valeur Parent.DisplayMode par DisplayMode.View.

12. Sélectionner la galerie BrowseGallery1 sous LeftContainer dans l’arborescence.

13. Sélectionner Items dans la barre de formule et remplacez la valeur par la formule ci-dessous. Cette formule filtrera les gadgets pour afficher uniquement les gadgets disponibles.

Filter(Gadget; Disponibilité <> 'Disponibilité (Gadget)'.'Récupéré')

14. Sélectionner Image1 dans la galerie.

⁠

15. Accédez à la barre de formule et vérifiez que la valeur de la propriété Image est définie sur la formule ci-dessous.

ThisItem.Photo

16. Sélectionner l’onglet Données (icône en forme de base de données) dans le volet de navigation de gauche, sélectionner le bouton ... Autres d’actions de la source Gadgets et sélectionner Actualiser.

⁠

17. Sélectionner Enregistrer (en haut à droite) et attendez que l’application soit enregistrée :

⁠

18. Sélectionner Afficher un aperçu de l’application :

⁠

19. Sélectionner + Nouvel enregistrement.

⁠

20. Remplissez le formulaire et sélectionner Appuyer ou cliquer pour ajouter une image.

21. Fournissez votre propre photo ou choisissez-en une dans le dossier Ressources du laboratoire :

⁠

22. Sélectionner Enregistrer :

23. Ajouter quelques nouveaux enregistrements.

Nom

Description

Disponibilité

Emplacement

Photo

Clavier

Clavier sans fil

Disponible

Bureau D30

Keyboard.jpg

Souris

Souris dans fil

Disponible

Bureau A05

Mouse.jpg

Ecouteurs

Ecouteurs sans fil

Disponible

Bureau B15

Earbuds.jpg

Cable réseau noir

Cable réseau noir de 1 m

Disponible

Bureau D50

Black Network Cable.jpg

Cable réseau bleu

Cable réseau bleu de 1 m

Disponible

Bureau B16

Blue Network Cable.jpg

Cable chargeur téléphone

Cable chargeur téléphone 40 cm

Disponible

Bureau C20

Phone Charger Cable.jpg

Cable d’alimentation

Cable d’alimentation 3 m

Disponible

Bureau C21

Power cord.jpg

There are no rows in this table

⁠

24. Votre application doit maintenant ressembler à l’image ci-dessous. Fermez l’aperçu.

⁠

25. Sélectionner le X pour fermer l’application.

Tâche 4 : Mettre à jour les lignes Dataverse

Dans cette tâche, vous ajouterez des boutons qui permettront aux utilisateurs de réserver et / ou de ramasser l’élément, vous mettrez également à jour les lignes dans Dataverse comme réservées ou récupérées.

1. Depuis la vue Arborescence, sélectionner App et affectez à la propriété OnStart la formule ci-dessous. Cette formule crée une variable nommée CurrentUser et définit sa valeur sur le premier utilisateur qui correspond à l’adresse e-mail de l’utilisateur connecté.

⁠

Set(CurrentUser; First(Filter(Utilisateurs;'Adresse de messagerie principale'=User().Email)))

Set(CurrentUser; First(Filter(Users; 'Primary Email'=User().Email)))

⁠

2. Sélectionner App, sélectionner … et sélectionner Exécuter OnStart.

3. Sélectionner le RightContainer1.

⁠

4. Sélectionner le bouton + (Insérer), puis sélectionner Bouton.

⁠

5. Sélectionner l’arborescence, double-cliquer sur le bouton que vous venez d’ajouter et renommez-le Bouton de réserve.

⁠

6. Définissez la propriété Texte du Bouton de réserve sur Réserver.

7. Déplacez le bouton Réserver et placez-le à côté de l’image du gadget.

⁠

8. Affectez à la propriété DisplayMode du bouton de réserve la formule ci-dessous. Cette formule désactive le bouton si l’élément sélectionné n’est pas disponible.

If(BrowseGallery1.Selected.Disponibilité = 'Disponibilité (Gadgets)'.Disponible; DisplayMode.Edit; DisplayMode.Disabled)

9. Affectez à la propriété OnSelect du bouton de réserve la formule ci-dessous. Cette formule met à jour l’enregistrement sélectionné en définissant la valeur réservée par à l’utilisateur actuel et la valeur de disponibilité sur réservé.

Patch(Gadgets; BrowseGallery1.Selected; {Disponibilité: 'Disponibilité (Gadgets)'.Réservé; 'Réservé par': CurrentUser})

10. Définissez la propriété Visible du bouton de réserve sur la formule ci-dessous. Cette formule masque le bouton si l’utilisateur crée un nouvel enregistrement.

If(EditForm1.Mode = FormMode.View; true; false)

11. Sélectionner à nouveau le RightContainer1.

12. Sélectionner le bouton + Insérer, puis sélectionner à nouveau Bouton.

13. Sélectionner l’arborescence, double-cliquer sur le bouton que vous venez d’ajouter et renommez-le en Récupéré.

14. Définissez la propriété Texte du bouton sur Récupéré.

15. Ajustez la propriété Largeur sur 150 et déplacez le bouton Récupéré et placez-le à droite du bouton de réservation.

⁠

16. Définissez la valeur DisplayMode du bouton Récupéré sur la formule ci-dessous. Cette formule désactive le bouton si l’élément sélectionné est réservé et que l’utilisateur réservé n’est pas l’utilisateur actuel.

If(BrowseGallery1.Selected.Disponibilité = 'Disponibilité (Gadgets)'.Réservé And BrowseGallery1.Selected.'Réservé par'.'Adresse de messagerie principale' <> CurrentUser.'Adresse de messagerie principale'; DisplayMode.Disabled; DisplayMode.Edit)

17. Définissez la valeur OnSelect du bouton Récupéré sur la formule ci-dessous. Cette formule met à jour l’enregistrement sélectionné en définissant la valeur réservée par à l’utilisateur actuel et la valeur de disponibilité à ramasser. La deuxième formule sélectionnera le premier élément de la galerie.

Patch(Gadgets;BrowseGallery1.Selected;{Disponibilité:'Disponibilité (Gadgets)'.Récupéré;'Réservé par':CurrentUser});;Select(BrowseGallery1;1)

18. Définissez la valeur Visible du bouton Récupéré sur la formule ci-dessous. Cette formule masque le bouton si l’utilisateur crée un nouvel enregistrement.

If(EditForm1.Mode = FormMode.View; true; false)

19. Sélectionner Enregistrer pour enregistrer vos modifications.

20. Ne quittez pas cette page.

Tâche 5 : Ajouter une recherche

Dans cette tâche, vous allez ajouter une fonctionnalité de recherche à votre application.

1. Sélectionner le RightContainer1.

2. Sélectionner le menu + (Insérer), sélectionner l’icônes + Ajouter.

3. Placez l’icône au-dessus du formulaire.

⁠

4. Sélectionner l’icône, accédez aux propriétés et sélectionner Rechercher dans la propriété Icône.

⁠

5. Sélectionner le menu + (Insérer) et sélectionner Zone de texte.

⁠

6. Sélectionner l’arborescence.

7. Sélectionner la zone de texte que vous venez d’ajouter et renommez-la Zone de recherche.

8. Déplacez la zone de recherche vers la droite de l’icône.

⁠

9. Sélectionner la zone de recherche et définissez la valeur OnChange sur la formule ci-dessous. Cette formule réinitialisera la galerie.

Reset(BrowseGallery1)

10. Sélectionner BrowseGallery sous LeftContainer1 et remplacez la formule Items par la formule ci-dessous. La formule est incomplète, nous la compléterons à l’étape suivante.

Filter(Search(Gadgets;

'Zone de recherche'⁠

.Value; ); Disponibilité <> 'Disponibilité (Gadgets)'.Récupéré)

11. Placez votre curseur après 'Zone de recherche'.Value et entrer nom. Vous devriez voir une suggestion avec crxxx_nom, sélectionner la colonne suggérée.

⁠

12. Ajoutez un point-virgule (EN : virgule) après la colonne de nom que vous venez de sélectionner et entrer description et sélectionner à nouveau la colonne suggérée.

13. Votre formule devrait maintenant ressembler à l’image ci-dessous. Cette formule recherche dans les colonnes de nom et de description de la table des gadgets tout ce que l’utilisateur entre dans la zone de texte et filtre les éléments ramassés.

⁠

14. Sélectionner Zone de recherche.

15. Accédez à la barre de formule et effacez le texte Value.

16. Sélectionner Enregistrer pour enregistrer vos modifications.

Exercice 3 : Tester et publier une application

Dans cet exercice, vous allez tester, publier et autoriser vos collègues à utiliser l’application.

Tâche 1 : Tester l’application

Dans cette tâche, vous allez tester l’application.

1. Sélectionner le bouton Aperçu.

⁠

2. Le bouton Réserver et ramasser doit être visible et activé.

3. Recherchez le câble. La galerie doit afficher les éléments dont le câble de texte figure dans la colonne Nom ou Description.

⁠

4. Sélectionner l’un des éléments, la valeur de colonne Réservé par doit être vide.

5. Sélectionner le bouton Réserver .

⁠

6. Le bouton Réserver doit être désactivé et la valeur Réservé par sera définie sur votre nom d’utilisateur. Sélectionner le bouton Ramassé.

⁠

7. L’élément ne doit plus apparaître dans la galerie et le premier élément de la galerie doit être sélectionné.

8. Fermer le mode d’aperçu.

9. Ne quittez pas cette page.

Tâche 2 : Publier l’application

Dans cette tâche, vous allez publier l’application dans Teams.

1. Sélectionner le bouton Publier dans Teams .

⁠

2. Sélectionner Suivant.

3. Sélectionner le + pour ajouter l’application en tant qu’onglet.

⁠

4. Sélectionner Enregistrer et fermer.

5. Sélectionner Teams et Sélectionner le nouvel onglet Upcycle.

⁠

6. L’application doit se charger. Si l’application n’est pas chargée, actualisez la page.

⁠

7. Testez l’application dans Teams et assurez-vous qu’elle se comporte comme prévu.

Tâche 3 : Accorder des autorisations

Dans cette tâche, vous autoriserez vos collègues à créer de nouveaux éléments, à modifier les éléments qu’ils ont créés, à supprimer les éléments qu’ils ont créés et à lire les éléments créés par d’autres personnes.

1. Sélectionner Power Apps et Sélectionner le lien Voir plus.

⁠