Power Platform - Apps - Automate - SharePoint

Power Platform  - Apps - Automate - SharePoint

[Exo03] Créer des applications dans Teams

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.

Accédez à

Microsoft Teams⁠

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

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

⁠

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

Attendez que l’approvisionnement soit terminé.

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

⁠

Ne quittez pas cette page.

Tâche 2 : Créer une table Dataverse

Au centre du Screen1, sélectionner Avec données puis Créer une table

Démarrer avec un table vierge

Clic sur Modifier les propriétés de la table Entrer Gadget pour Nom de la table, Gadgets comme Nom au pluriel et sélectionner Enregistrer.

Cliquer sur la colonne Nouvelle colonne : Modifier la colonne, saisir Nom comme Nom complet et Enregistrer.

Bouton +, ajouter ces colonnes :

Nom complet

Type de données

Valeurs des options

Obligatoire

Description

Une seule ligne de texte

Disponibilité

Option > Option

Disponible

Réservé

Récupéré

Choix par défaut : Disponible.

Emplacement

Une seule ligne de texte

Photo

Fichier > Image

Réservé par

Recherche

Table User (ou utilisateur)

There are no rows in this table

⁠

Cliquer sur Enregistrer et fermer

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

⁠

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

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.

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

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

⁠

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

⁠

Sélectionner le bouton + Ajouter un champ.

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

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.

Mettre 1 à Colonnes.

⁠

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

⁠

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

⁠

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

⁠

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

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

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.

14. Sélectionner Image1 dans la galerie.

⁠

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.

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.

⁠

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

⁠

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

⁠

Sélectionner + Nouvel enregistrement.

⁠

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

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

⁠

Sélectionner Enregistrer :

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.

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

⁠

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

Sélectionner le RightContainer1

⁠

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

⁠

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

⁠

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

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

⁠

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.

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

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.

Sélectionner à nouveau le RightContainer1.

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

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

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

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

⁠

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.

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.

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.

Sélectionner Enregistrer pour enregistrer vos modifications.

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.

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.

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.

Tâche 1 : Créer une application

Tâche 2 : Créer une table Dataverse

Tâche 3 : Modifier l’application

Tâche 4 : Mettre à jour les lignes Dataverse

Tâche 5 : Ajouter une recherche

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.