Power Platform - Apps - Automate - SharePoint

Power Platform  - Apps - Automate - SharePoint

PL-7001 - Power Apps Canvas

Lab 6 – Formulaires

Dans ce laboratoire, vous utiliserez des formulaires pour créer et modifier des enregistrements dans une source de données.

Ce que vous apprendrez

Comment ajouter des écrans

Comment naviguer entre les écrans

Comment utiliser un formulaire pour créer un enregistrement dans une source de données

Comment utiliser un formulaire pour modifier un enregistrement dans une source de données

Comment supprimer un enregistrement d'une source de données

Comment lier un formulaire à une galerie

Étapes de laboratoire

Créer de nouveaux écrans

Accéder à un écran lorsqu'un enregistrement est sélectionné dans une galerie

Naviguer entre les écrans

Afficher un enregistrement avec un formulaire

Supprimer un enregistrement

Modifier un enregistrement avec un formulaire

Créer un nouvel enregistrement avec un formulaire

Conditions préalables

Doit avoir terminé le laboratoire 5 : Données externes

Étapes détaillées

Exercice 1 – Ajouter des écrans et une navigation

Tâche 1.1 – Modifier l'application

Accédez au portail Power Apps Makerhttps://make.powerapps.com

Assurez-vous que vous êtes dans l' environnement Dev One .

Sélectionnez l' onglet Applications dans le menu de navigation de gauche.

Sélectionnez l' application Demande de réservation , sélectionnez les Commandes ( ... ) et sélectionnez Modifier > Modifier dans un nouvel onglet .

Tâche 1.2 - Ajouter des écrans

Dans le menu de création d’applications, sélectionnez Arborescence.

Dans la barre d'action de Power Apps Studio, sélectionnez Nouvel écran.

⁠

Sélectionnez Vide .

Renommer l'écran en EditScreen.

Dans la barre d'action de Power Apps Studio, sélectionnez Nouvel écran .

Sélectionnez En-tête et pied de page .

Renommer l'écran en DetailScreen.

Tâche 1.3 - Ajouter la navigation

Dans l'arborescence, développez BookingRequestList dans MainScreen.

Sélectionnez NextArrow dans BookingRequestList .

Définissez la propriété OnSelect de NextArrow dans la barre de formule sur : Collect(colRequests; ThisItem);;Navigate(DetailScreen; ScreenTransition.Cover)

Sélectionnez EditScreen .

Dans le menu de création de l'application, sélectionnez Insérer (+) .

Développer Icônes.

Sélectionnez Flèche retour.

Définissez la propriété OnSelect de l'icône sur : Back()

Dans l'arborescence , sélectionnez l' icône , sélectionnez les commandes ( ... ) et sélectionnez Copier .

Développez DetailScreen.

Développez ScreenContainer.

Sélectionnez HeaderContainer et sélectionnez les commandes ( ... ) et sélectionnez Coller .

Exercice 2 – Écran de détails

Tâche 2.1 – Ajouter un formulaire d’affichage

Dans le menu de création d’applications, sélectionnez Arborescence .

Développez DetailSfcreen .

Développez ScreenContainer1 .

Sélectionnez MainContainer1 .

Dans le menu de création de l'application, sélectionnez Insérer (+) .

Développez Entrée.

Sélectionnez Formulaire de modification.

⁠

Dans les propriétés du FormViewer, sélectionnez Booking Request pour la source de données.

Sélectionnez X sélectionnés à côté de Champs.

⁠

Supprimez Créé le en sélectionnant les points de suspension ( ... ) à côté du champ et en sélectionnant Supprimer .

Sélectionnez + Ajouter un champ et sélectionnez les champs suivants :

Decision

⁠

Sélectionnez Ajouter .

Faites glisser les champs dans l'ordre suivant :

Pet Name

Owner Name

Owner Email

Start Date

End Date

Decision

Cost

⁠

Fermez le volet Champs .

Définissez la propriété Item du contrôle du visualiseur de formulaire dans la barre de formule sur :

BookingRequestList.Selected

Tâche 2.2 - Ajouter une étiquette

Dans le menu de création d’applications, sélectionnez Arborescence.

Développez MainScreen.

Développez ScreenContainer1.

Sélectionnez FooterContainer1.

Sélectionnez + dans le conteneur Pied de page.

⁠

Sélectionner l'étiquette de texte

Définissez la propriété Texte de l'étiquette sur :

BookingRequestList.Selected.'Pet Name'

Tâche 2.3 – Ajouter un bouton de suppression

Dans le menu de création d’applications, sélectionnez Arborescence .

Développez l'écran détaillé .

Développez ScreenContainer1.

Sélectionnez FooterContainer1.

Dans le menu de création de l'application, sélectionnez Insérer (+) .

Sélectionner Bouton.

Dans le menu de création d’applications, sélectionnez Arborescence.

Renommez le bouton en Deletebtn.

Définissez la propriété Text du bouton sur : "Delete"

Définissez la propriété OnSelect du bouton sur :

Remove('Booking Requests'; BookingRequestList.Selected);; Back()

⁠

Remove and RemoveIf functions - Power Platform⁠

⁠

Exercice 3 – Écran Modifier

Tâche 3.1 – Ajouter un formulaire d’édition

Dans le menu de création d’applications, sélectionnez Arborescence.

Sélectionnez EditScreen.

Dans le menu de création de l'application, sélectionnez Insérer (+).

Sélectionnez Formulaire de modification.

Dans les propriétés du formulaire, sélectionnez Booking Request pour la source de données.

Sélectionnez 2 sélectionnés à côté de Champs .

Supprimez Créé le en sélectionnant les points de suspension ( ... ) à côté du champ et en sélectionnant Supprimer .

Sélectionnez + Ajouter un champ et sélectionnez les champs suivants :

Pet Name

Owner Name

Owner Email

Start Date

End Date

Cost

Sélectionnez Ajouter .

Fermez le volet Champs .

Définissez la propriété Item du contrôle de formulaire sur : BookingRequestList.Selected

Dans le menu de création d’applications, sélectionnez Arborescence .

Renommez le formulaire en BookingRequestForm.

Définissez les propriétés du formulaire comme suit :

X=0

Oui=125

Hauteur=500

Largeur=Parent.Width

Colonnes=1

Disposition=Horizontal

⁠

Tâche 3.2 – Ajouter un bouton de soumission

Dans le menu de création d’applications, sélectionnez Arborescence .

Sélectionnez Modifier l'écran .

Dans le menu de création de l'application, sélectionnez Insérer (+) .

Sélectionner Bouton.

Faites glisser le bouton sous le formulaire.

Dans le menu de création d’applications, sélectionnez Arborescence .

Renommez le bouton en Submitbtn.

Définissez la propriété Text du bouton sur : "Submit"

Définissez la propriété OnSelect du bouton sur : SubmitForm(BookingRequestForm)

Sélectionnez BookingRequestForm .

Définissez la propriété OnSuccess du formulaire sur :

Navigate(MainScreen; ScreenTransition.UnCover)

Tâche 3.3 – Ajouter une navigation à l’écran d’édition

Dans le menu de création d’applications, sélectionnez Arborescence .

Développez MainScreen.

Développez ScreenContainer .

Sélectionnez HeaderContainer .

Dans le menu de création de l'application, sélectionnez Insérer (+) .

Développer les icônes .

Sélectionnez Modifier .

Dans le menu de création d’applications, sélectionnez Arborescence .

Renommez l'icône en EditIcon.

Définissez la propriété OnSelect de l'icône sur : Navigate(EditScreen; ScreenTransition.Cover)

Tâche 3.4 – Nouvel enregistrement

Dans le menu de création d’applications, sélectionnez Arborescence .

Sélectionnez MainScreen.

Dans le menu de création de l'application, sélectionnez Insérer (+) .

Développer les icônes .

Sélectionnez Ajouter .

Dans le menu de création d’applications, sélectionnez Arborescence .

Renommez l'icône en NewIcon.

Définissez les propriétés de l’icône comme suit :

X=0

Y=0

Hauteur=80

Largeur=80

Couleur=Color.White

Définissez la propriété OnSelect de l'icône sur : NewForm(BookingRequestForm);;Navigate(EditScreen; ScreenTransition.Cover)

Sélectionnez Enregistrer en haut à droite de Power Apps Studio.

Sélectionnez le bouton <- Retour en haut à gauche de la barre de commandes et sélectionnez Quitter pour quitter l'application.

Ce que vous apprendrez

Étapes de laboratoire

Conditions préalables

Étapes détaillées

Exercice 1 – Ajouter des écrans et une navigation

Tâche 1.1 – Modifier l'application

Tâche 1.2 - Ajouter des écrans

Tâche 1.3 - Ajouter la navigation

Exercice 2 – Écran de détails

Tâche 2.1 – Ajouter un formulaire d’affichage

Tâche 2.2 - Ajouter une étiquette

Tâche 2.3 – Ajouter un bouton de suppression

Exercice 3 – Écran Modifier

Tâche 3.1 – Ajouter un formulaire d’édition

Tâche 3.2 – Ajouter un bouton de soumission

Tâche 3.3 – Ajouter une navigation à l’écran d’édition

Tâche 3.4 – Nouvel enregistrement

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.