Exercice : créer l’application canevas de l’atelier de réparation de vélos

  • 10 minutes

Dans cet exercice, vous allez appliquer les connaissances que vous avez acquises pour terminer le processus de création d’une application canevas basée sur la conception que vous avez créée dans l’unité Exercice : concevoir une application d’atelier de réparation de vélos à l’aide de Figma.

Scénario

Vous souhaitez créer une application canevas basée sur une conception Figma pour vos collègues. L’application permet à vos collègues d’inscrire des participants potentiels à des soldes VIP et de recueillir les préférences des participants à l’aide d’une tablette dédiée.

Vous allez capturer les informations sur les participants dans une feuille de calcul Microsoft Excel, afin que l’équipe marketing puisse contacter les clients avant et après l’événement.

Étapes de préparation

Suivez les étapes de l’unité Créer une application canevas sur une conception Figma pour utiliser la conception d’atelier de réparation de vélos que vous avez créée. À l’étape 11, vous pouvez nommer l’application Événement VIP pour vélos.

Télécharger le fichier de feuille de calcul Excel Bicycle VIP registration.xlsx. Ce fichier sert de source de données d’application. Enregistrez-le à un emplacement Microsoft OneDrive Entreprise auquel vous avez accès.

Capture d’écran de la feuille de calcul Microsoft Excel nommée Bicycle VIP registration.

Exercice

Pour créer l’application canevas qui stocke les inscriptions dans la feuille de calcul Bicycle VIP registration, procédez comme suit :

  1. Connectez-vous à la source de données, puis cliquez sur Ajouter des données dans la section Données du volet gauche dans le studio d’application canevas Power Apps.

    Capture d’écran du studio d’application canevas Power Apps. L’accent est mis sur l’option Ajouter des données dans la section Données du volet de navigation gauche.

  2. Sélectionnez Excel Online Business comme source de données.

    Capture d’écran du studio d’application canevas Power Apps mettant l’accent sur la source de données Excel Online Business.

  3. Cliquez sur Connexion.

    Capture d’écran du studio d’application canevas Power Apps mettant l’accent sur l’option Connexion pour la source de données Excel Online Business.

  4. Accédez à l’emplacement de la feuille de calcul Bicycle VIP registration que vous avez enregistrée dans la section Étapes de préparation, puis sélectionnez la feuille de calcul.

    Capture d’écran du studio d’application canevas Power Apps mettant l’accent sur le fichier Excel Bicycle VIP registration.

  5. Sélectionnez la table Registrations, puis cliquez sur Connexion.

    Capture d’écran du studio d’application canevas Power Apps mettant l’accent sur la table Registrations et sur le bouton Connexion.

  6. Sélectionnez l’option Utiliser une colonne unique à partir d’un tableau Excel comme identificateur pour Registrations, sélectionnez _PowerAppsId_, puis cliquez sur Connexion.

    Capture d’écran du studio d’application canevas Power Apps mettant l’accent sur _PowerAppsId_ et sur l’option Utiliser une colonne unique à partir d’un tableau Excel.

  7. Pour connecter le contrôle msft_Form à la source de données, redéfinissez la propriété DataSource sur Registrations.

    Capture d’écran du studio d’application canevas Power Apps mettant l’accent sur la propriété DataSource redéfinie sur Registrations.

  8. Pour assurer l’identification des contrôles dans les étapes suivantes, sélectionnez l’option Renommer afin de renommer la carte de données et les composants d’entrée.

    Capture d’écran du studio d’application canevas Power Apps mettant l’accent sur l’option Renommer pour un contrôle de carte de données.

    Le résultat devrait ressembler à l’image suivante :

    Capture d’écran du studio d’application canevas Power Apps mettant l’accent sur les composants renommés.

  9. Pour connecter les cartes de données à des colonnes du tableau Excel, fournissez le nom de la colonne pour la propriété DataField pour chaque contrôle de carte de données, y compris les guillemets.

    • PreferencesDC : "Preference"

    • PhoneDC : "Phone"

    • CustomerEmailDC : "Email"

    • CustomerNameDC : "Name"

    Capture d’écran du studio d’application canevas Power Apps mettant l’accent sur la propriété DataField pour PreferencesDC et sur la valeur de propriété Preference.

  10. Pour insérer les valeurs de l’application dans le tableau Excel, fournissez une propriété de texte de contrôle de saisie pour la propriété Update pour chaque contrôle de carte de données.

    • PreferencesDC : PreferencesInput.SelectedText.Value

    • PhoneDC : PhoneInput.Text

    • CustomerEmailDC : CustomerEmailInput.Text

    • CustomerNameDC : CustomerNameInput.Text

    Capture d’écran du studio d’application canevas Power Apps mettant l’accent sur la propriété Update pour PreferencesDC et sur la valeur de propriété PreferencesInput.SelectedText.Value.

  11. Pour enregistrer les valeurs dans la feuille de calcul Excel et réinitialiser le formulaire d’application canevas en mode de saisie de données, définissez la propriété OnSelect du bouton Envoyer sur SubmitForm(msft_Form); NewForm(msft_Form);.

    Capture d’écran du studio d’application canevas Power Apps mettant l’accent sur la propriété OnSelect de msft_Button.

Vous disposez désormais d’une application complète qui permet d’inscrire des clients pour les soldes VIP à venir. Pour tester l’application, cliquez sur les icônes Enregistrer et Lire. Pour partager l’application avec vos collègues, cliquez sur l’icône Partager.

Capture d’écran du studio d’application canevas Power Apps mettant l’accent sur les icônes Partager, Lire et Enregistrer.

La vidéo suivante présente les étapes de cette unité :

Étapes suivantes

Vous savez maintenant comment créer une application canevas sur la base d’une conception Figma. Cette application est connectée à une source de données et vous permet, à vous et vos collègues, d’enregistrer les informations et préférences client pour des soldes VIP. Ensuite, vous pouvez vérifier les connaissances que vous avez acquises dans ce module.