Support Power Platform - Apps - Automate - SharePoint - Copilot

Lab 3 – Créer une application canevas

Dans ce laboratoire, vous allez concevoir et créer une application canevas à partir de zéro, ajouter une source de données et une galerie.

Ce que vous apprendrez

  • Comment créer une application canevas avec une galerie liée à une source de données
  • Comment formater des champs avec des formules Power Fx

Étapes de laboratoire de haut niveau

  • Créer une application canevas à partir de zéro
  • Ajouter une source de données à l'application
  • Ajouter une galerie à l'application
  • Configurer les champs dans la galerie

Conditions préalables

  • Doit avoir terminé le Lab 2 : Modèle de données

Étapes détaillées

Exercice 1 – Créer une application canevas

Tâche 1.1 – Créer l'application

  1. Accédez au portail Power Apps Makerhttps://make.powerapps.com
  2. Assurez-vous que vous êtes dans l' environnement Dev One.
  3. Sélectionnez l’onglet + Créer dans le menu de navigation de gauche.
  4. Sélectionnez la vignette Application vierge sous Démarrer à partir de .
  5. Sélectionnez Créer sous la mosaïque d’application Toile vierge .
    image.png
  6. Entrez Booking Request app pour le nom de l'application .
  7. Sélectionnez Tablette pour le Format.
    image.png
  8. Sélectionnez Créer .
  9. Attendez que l'application soit créée.
  10. Sélectionnez Enregistrer en haut à droite de Power Apps Studio.

Tâche 1.2 – Ajouter une source de données

  1. Dans le menu de création d'application, sélectionnez Données .
    image.png
  2. Sélectionnez le curseur déroulant à côté de Ajouter des données et entrez Bookingdans Rechercher.
  3. Capture d’écran de la source de données sélectionnée.
    Capture d’écran de la source de données sélectionnée.
  4. Sélectionnez la table Booking Request (Microsoft Dataverse).

Tâche 1.3 – Configurer l’écran principal

  1. Dans le menu de création d’applications, sélectionnez Arborescence .
  2. Sélectionnez Screen1 dans l'arborescence, sélectionnez les points de suspension ( ... ) et sélectionnez Renommer.
  3. Entrer MainScreen.
  4. Dans le menu de création de l'application, sélectionnez Insérer (+) .
  5. Sélectionnez Rectangle.
  6. Faites glisser le rectangle vers le coin supérieur gauche de l'écran.
  7. Dans le menu de création d’applications, sélectionnez Arborescence.
  8. Renommez le rectangle en HeaderRect.
  9. Définissez les propriétés du rectangle dans la barre de formule comme suit :(par exemple pour X=0 : sélectionner la propriété X dans la liste déroulante à gauche de la barre de formule puis saisir 0 dans la barre de formule)
    1. X=0(rappel :  dans la liste à gauche de barre de formule, sélectionner X puis indiquer 0 dans la barre de formule)
    2. Y=0
    3. Height=80
    4. Width=Parent.Width
  10. Dans le menu de création de l'application, sélectionnez Insérer (+) .
  11. Sélectionnez Étiquette de texte .
  12. Faites glisser l’étiquette vers le coin supérieur gauche de l’écran.
  13. Dans le menu de création d’applications, sélectionnez Arborescence.
  14. Renommez l'étiquette en HeaderLabel.
  15. Définissez les propriétés de l'étiquette dans la barre de formule comme suit :
    1. X=0
    2. Y=0
    3. Height=80 (ou HeaderRect.Height)
    4. Width=Parent.Width
    5. Align=Align.Center
    6. Size=24
    7. Text="Booking Request"
    8. Color=Color.White
      image.png
  16. Sélectionnez Enregistrer en haut à droite de Power Apps Studio.

Tâche 1.4 – Ajouter une galerie

  1. Dans le menu de création de l'application, sélectionnez Insérer (+) .
  2. Sélectionnez Galerie verticale .
    image.png
  3. Sélectionnez Booking Request pour la source de données.
    image.png
  4. Dans l'onglet Propriétés , pour Disposition, sélectionnez Titre, sous-titre et corps.
  5. Sélectionnez 7 sélectionnés à côté de Champs.
  6. Sélectionnez Cost pour BodyX.
  7. Sélectionnez Decision pour SubtitleX.
  8. Sélectionnez Pet Name pour TitleX.
    image.png
  9. Fermez le volet Données.
  10. Dans le menu de création d’applications, sélectionnez Arborescence .
  11. Renommez la galerie en BookingRequestList.
  12. Définissez les propriétés de la galerie dans la barre de formule comme suit :
    1. X=0
    2. Y=80 (ou HeaderRect.Height)
    3. Height=575 (ou MainScreen.Height - HeaderRect.Height)
    4. Width=250

Tâche 1.5 - Formater le champ monétaire

  1. Dans le menu de création d’applications, sélectionnez Arborescence .
  2. Développez la galerie BookingRequestList .
  3. Sélectionnez Body1 .
  4. Capture d'écran du champ du corps sélectionné.
    Capture d'écran du champ du corps sélectionné.
  5. Définissez la propriété Text dans la barre de formule sur la formule :Text(Value(ThisItem.Cost); "#,##0.00 $")Fonction Text - Power PlatformFonctions Decimal, Float et Value - Power Platform
  6. Sélectionnez Enregistrer en haut à droite de Power Apps Studio.
  7. Sélectionnez le bouton <- Retour en haut à gauche de la barre de commandes, puis sélectionnez Quitter pour quitter l'application.