Créer une application à partir de zéroCreate an app from scratch

Créez votre propre application à partir de zéro à l’aide de l’une des diverses sources de données, avec la possibilité d’ajouter d’autres sources ultérieurement si vous le souhaitez.Create your own app from scratch using any one of a variety of data sources, adding more sources later if you want. Spécifiez l’apparence et le comportement de chaque élément d’interface utilisateur afin de pouvoir optimiser le résultat en fonction de vos objectifs exacts et de votre flux de travail.Specify the appearance and behavior of each UI element so that you can optimize the result for your exact goals and workflow. Cette approche prend beaucoup plus de temps que la génération automatique d’une application, mais les créateurs d’application expérimentés peuvent créer la meilleure des applications correspondant à leurs besoins.This approach is much more time-intensive than generating an app automatically, but experienced app makers can build the best app for their needs.

Note

Cette rubrique a été rédigée pour PowerApps Studio pour Windows, mais les étapes sont identiques si vous ouvrez PowerApps dans un navigateur.This topic was written for PowerApps Studio for Windows, but the steps are similar if you open PowerApps in a browser.

En suivant ce didacticiel, vous allez créer une application contenant deux écrans.By following this tutorial, you'll create an app that contains two screens. Sur un seul écran, les utilisateurs peuvent parcourir un ensemble d’enregistrements :On one screen, users can browse through a set of records:

Écran dans lequel un utilisateur peut faire défiler un jeu de données

Sur l’autre écran, les utilisateurs peuvent créer un enregistrement, mettre à jour un ou plusieurs champs d’un enregistrement, ou supprimer un enregistrement entier :On the other screen, users can create a record, update one or more fields in a record, or delete an entire record:

Écran dans lequel un utilisateur peut ajouter ou mettre à jour des données

Conditions préalablesPrerequisites

Vous pouvez passer en revue ce didacticiel pour prendre connaissance de concepts généraux, ou le suivre rigoureusement pour effectuer les étapes décrites.You can review this tutorial for general concepts only, or you can follow it exactly if you complete these steps.

  1. Copiez ces données, puis collez-les dans un fichier Excel.Copy this data, and then paste it into an Excel file.

    Jour de débutStart Day Heure de débutStart Time Bénévole 1Volunteer 1 Bénévole 2Volunteer 2
    SamediSaturday 10 h-midi10am-noon VasquezVasquez KumashiroKumashiro
    SamediSaturday midi-14 hnoon-2pm IceIce SinghalSinghal
    SamediSaturday 14 h-16 h2pm-4-pm MykMyk MuellerMueller
    DimancheSunday 10 h-midi10am-noon LiLi AdamsAdams
    DimancheSunday 10 h-midi10am-noon SinghSingh MorganMorgan
    DimancheSunday 10 h-midi10am-noon BatyeBatye NguyenNguyen
  2. Organisez ces données dans un tableau nommé Schedule, de sorte que PowerApps puisse analyser les informations.Format that data as a table, named Schedule, so that PowerApps can parse the information.

    Pour plus d’informations, consultez Create an Excel table in a worksheet (Créer un tableau Excel dans une feuille de calcul).For more information, see Create an Excel table in a worksheet.

  3. Enregistrez le fichier sous le nom eventsignup.xls, puis chargez-le dans un compte de stockage cloud, tel que OneDrive.Save the file under the name eventsignup.xls, and then upload it to a cloud-storage account, such as OneDrive.

  4. Si vous êtes novice dans PowerApps :If you're new to PowerApps:

Créer une application vide et se connecter aux donnéesCreate a blank app, and connect to data

  1. Dans PowerApps Studio, cliquez ou appuyez sur Nouveau dans le menu Fichier (près du bord gauche de l’écran).In PowerApps Studio, click or tap New on the File menu (near the left edge of the screen).

    Nouvelle option dans le menu File

  2. Sur la mosaïque Application vide, cliquez ou appuyez sur Mode téléphone.On the Blank app tile, click or tap Phone layout.

    Option permettant de créer une application à partir de données

  3. Si vous y êtes invité, suivez la visite guidée pour comprendre les principales zones de PowerApps (ou cliquez ou appuyez sur Skip).If prompted, take the intro tour to understand the main areas of PowerApps (or click or tap Skip).

    Présentation rapide

    Vous pouvez toujours suivre la visite guidée ultérieurement en cliquant ou en appuyant sur l’icône de point d’interrogation près de l’angle supérieur gauche de l’écran, puis en cliquant ou appuyant sur Take the intro tour.You can always take the tour later by clicking or tapping the question-mark icon near the upper-left corner of the screen and then clicking or tapping Take the intro tour.

  4. Dans la barre de navigation à gauche, cliquez ou appuyez sur une icône dans l’angle supérieur droit pour basculer vers la vue miniature.In the left navigation bar, click or tap an icon in the upper-right corner to switch to the thumbnail view.

    Activer/désactiver les vues

  5. Dans le volet de droite, cliquez ou appuyez sur Ajouter une source de données.In the right-hand pane, click or tap Add data source.

    Ajouter une source de données

  6. Procédez comme suit :Perform either of these steps:

    • Si vous avez déjà une connexion à votre compte de stockage cloud, cliquez ou appuyez dessus.If you already have a connection to your cloud-storage account, click or tap it.
    • Si vous n’avez pas de connexion à votre compte de stockage cloud, cliquez ou appuyez sur Add Connection, cliquez ou appuyez sur votre type de compte, cliquez ou appuyez sur Connect, puis (si vous y êtes invité) entrez vos informations d’identification.If you don't have a connection to your cloud-storage account, click or tap Add Connection, click or tap your account type, click or tap Connect, and then (if prompted) provide your credentials.
  7. Sous Choose an Excel file, accédez au fichier eventsignup.xlsx, puis cliquez ou appuyez dessus.Under Choose an Excel file, browse to eventsignup.xlsx, and then click or tap it.

    Spécifier le fichier Excel à utiliser

  8. Sous Choose a table, activez la case à cocher Agenda, puis cliquez ou appuyez sur Connect.Under Choose a table, select the Schedule check box, and then click or tap Connect.

    Spécifier le tableau Excel à utiliser

    L’onglet Data sources du volet de droite affiche les sources de données que vous avez ajoutées à votre application.The Data sources tab of the right-hand pane shows which data sources you've added to your app.

    Afficher les sources de données connectées

    Ce didacticiel ne nécessite qu’une seule source de données, mais vous pouvez en ajouter d’autres ultérieurement.This tutorial requires only one data source, but you can add more data sources later.

Afficher les donnéesShow the data

  1. Sous l’onglet Accueil, cliquez ou appuyez sur Nouvel écran, puis cliquez ou appuyez sur Écran de liste.In the Home tab, click or tap New screen and then click or tap List screen.

    Ajouter une disposition avec un titre, un sous-titre et un élément de corps

    Un écran est ajouté avec plusieurs contrôles par défaut, comme une zone de recherche et un contrôle Gallery.A screen is added with several default controls, such as a search box and a Gallery control. La galerie couvre la totalité de l’écran sous la zone de recherche.The gallery covers the entire screen under the search box.

  2. Cliquez ou appuyez n’importe où dans la galerie sauf sur une flèche, par exemple directement sous la zone de recherche.Click or tap anywhere in the gallery except an arrow, such as directly under the search box.

    Sélectionner une galerie

  3. Dans le volet de droite, ouvrez la liste Mies en page, puis cliquez ou appuyez sur l’option qui montre un titre, un sous-titre et un corps.In the right-hand pane, open the Layouts list, and then click or tap the option that shows a title, a subtitle and body.

    Sélectionner une galerie

  4. Dans la liste des propriétés, cliquez ou appuyez sur Items, copiez cette formule, puis collez-la dans la barre de formule :In the property list, click or tap Items, copy this formula, and paste it into the formula bar:

    SortByColumns(Search(Schedule, TextSearchBox1.Text, "Volunteer_x0020_1"), "Volunteer_x0020_1", If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))SortByColumns(Search(Schedule, TextSearchBox1.Text, "Volunteer_x0020_1"), "Volunteer_x0020_1", If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))

    Si vous ne savez pas où se trouve la liste des propriétés, voir Ajouter et configurer un contrôle dans PowerApps.If you're not sure where the property list is, see Add and configure controls.

    Note

    Pour des sources de données Excel ou SharePoint contenant des noms de colonne avec des espaces, PowerApps affiche les espaces sous la forme « _x0020_ ».For Excel or SharePoint data sources that contain column names with spaces, PowerApps shows the spaces as "_x0020_". Dans cet exemple, la colonne « Volunteer 1 » apparaît dans une formule sous la forme « Volunteer_x0020_1 ».In this example, the column "Volunteer 1" appears in a formula as "Volunteer_x0020_1".

    Cette galerie affiche les données du tableau Agenda.This gallery shows the data from the Schedule table.

    Données de l’Agenda dans la galerie par défaut

    Une zone de recherche peut filtrer la galerie sur la base du texte que l’utilisateur entre.A search box can filter the gallery based on text that the user types. Si un utilisateur tape au moins une lettre dans la zone de recherche, la galerie affiche uniquement les enregistrements pour lesquels le champ Bénévole 1 contient le texte saisi par l’utilisateur.If a user types at least one letter in the search box, the gallery shows only those records for which the Volunteer 1 field contains the text that the user typed.

    Le bouton de tri peut trier les enregistrements sur la base des données figurant dans la colonne Bénévole 1 colonne.The sort button can sort the records based on data in the Volunteer 1 column. Si un utilisateur clique ou appuie sur ce bouton, l’ordre de tri passe de croissant à décroissant.If a user clicks or taps that button, the sort order toggles between ascending and descending.

    Cette formule contient les fonctions Sort, If, IsBlank, Filter et Text.That formula contains the Sort, If, IsBlank, Filter, and Text functions. Pour plus d’informations sur celles-ci et d’autres fonctions, consultez la référence sur les formules.For more information about these and other functions, see the formula reference

  5. Tapez un i dans la zone de recherche et cliquez ou appuyez sur le bouton de tri une fois (ou un nombre impair de fois).Type an i in the search box, and click or tap the sort button once (or an odd number of times).

    La galerie affiche ces résultats.The gallery shows these results.

    Trier et filtrer la galerie

    Informations supplémentaires sur les fonctions Sort, Filter et d’autres fonctionsMore information about the Sort, Filter, and other functions

  6. Sélectionnez le contrôle Label en haut de l’écran en cliquant ou en appuyant sur le contrôle.Select the Label control at the top of the screen by clicking or tapping the control.

    Sélectionner la barre de titre

  7. Dans la liste des propriétés, cliquez ou appuyez sur Text, copiez ce texte, puis collez-le dans la barre de formule.In the property list, click or tap Text, copy this text, and then paste it in the formula bar.
    "View Records""View Records"

    Modifier la barre de titre

Créer l’élément ChangeScreen et sa bannièreCreate the ChangeScreen and its banner

  1. Supprimez Screen1et renommez Screen2 en ViewScreen.Delete Screen1, and rename Screen2 to ViewScreen.

    Renommer l’écran

  2. Ajoutez un écran, puis renommez-le ChangeScreen.Add a screen, and rename it ChangeScreen.

    Ajouter et renommer un écran

  3. Sous l’onglet Insérer, cliquez ou appuyez sur Texte, puis sur Label.On the Insert tab, click or tap Text, and then click or tap Label.

  4. Configurez le contrôle Label que vous venez d’ajouter :Configure the Label control that you just added:

    • Définissez sa propriété Text sur la formule suivante :Set its Text property to this formula:
      "Change record""Change record"

    • Définissez sa propriété Fill sur la formule suivante :Set its Fill property to this formula:
      RGBA(62, 96, 170, 1).RGBA(62, 96, 170, 1).

    • Définissez sa propriété Color sur la formule suivante :Set its Color property to this formula:
      RGBA(255, 255, 255, 1)RGBA(255, 255, 255, 1)

    • Définissez sa propriété Align sur Center.Set its Align property to Center.

    • Définissez sa propriété X sur 0.Set its X property to 0.

    • Définissez sa propriété Width sur 640.Set its Width property to 640. Le contrôle Label reflète vos modifications.The Label control reflects your changes.

      ChangeScreen avec bannière

Ajouter et configurer un formulaireAdd and configure a form

  1. Dans l’onglet Insérer, cliquez ou appuyez sur Formulaires, puis sur Modifier.On the Insert tab, click or tap Forms, and then click or tap Edit.

  2. Déplacez et redimensionnez le formulaire pour couvrir la plus grande portion possible de l’écran.Move and resize the form to cover most of the screen.

    Ajouter un formulaire

    Le formulaire est nommé Form1 par défaut, sauf si vous déjà ajouté et supprimé un formulaire.The form is named Form1 by default unless you already added and removed a form. Dans ce cas, renommez le formulaire en Form1.In that case, rename the form to Form1.

  3. Définissez la propriété DataSource de Form1 sur Schedule.Set DataSource property of Form1 to Schedule.

  4. Définissez la propriété Item de Form1 sur cette expression :Set the Item property of Form1 to this expression:
    BrowseGallery1.SelectedBrowseGallery1.Selected

  5. Dans le volet de droite, cliquez ou appuyez sur la case à cocher en regard de chaque champ à afficher.In the right-hand pane, click or tap the checkbox for each field to show it.

    Afficher les champs sur le formulaire

  6. Près du bas du formulaire, cliquez ou appuyez sur Ajouter une carte personnalisée.Near the bottom of the form, click or tap Add a custom card.

    Ajouter une carte personnalisée

  7. Ajoutez un contrôle Label dans la nouvelle carte.Add a Label control in the new card.

  8. Définissez la propriété AutoHeight du nouveau contrôle sur true, et sa propriété Text sur la formule suivante :Set the AutoHeight property of the new control to true, and set its Text property to this formula:
    Form1.ErrorForm1.Error

    L’étiquette affichera toutes les erreurs provenant du formulaire.The label will show any errors from the form.

  9. Dans la barre de navigation de gauche, cliquez ou appuyez sur la miniature pour que ChangeScreen effectue la sélection.In the left navigation bar, click or tap the thumbnail for the ChangeScreen to select it.

  10. Dans l’onglet Insérer, cliquez ou appuyez sur Icônes, cliquez ou appuyez sur l’option permettant d’ajouter une flèche de retour, puis déplacez la flèche vers le coin inférieur gauche de l’écran.On the Insert tab, click or tap Icons, click or tap the option to add a Back arrow, and then move the arrow to the lower-left corner of the screen.

  11. Définissez la propriété OnSelect de cette flèche sur la formule suivante :Set the arrow's OnSelect property to this formula:

    ResetForm(Form1);Navigate(ViewScreen,ScreenTransition.None)ResetForm(Form1);Navigate(ViewScreen,ScreenTransition.None)

    Lorsque l’utilisateur clique ou appuie sur la flèche, la fonction Navigate ouvre ViewScreen.When the user clicks or taps the arrow, the Navigate function opens the ViewScreen.

  12. Ajoutez un contrôle Button sous le formulaire, puis définissez la propriété Text sur "Enregistrer".Add a Button control under the form, and set the button's Text property to "Save".

    Ajouter un enregistrement bouton

  13. Définissez la propriété OnSelect du bouton sur la formule suivante :Set the OnSelect property of the button to this formula::

    SubmitForm(Form1); If(Form1.ErrorKind = ErrorKind.None, Navigate(ViewScreen, ScreenTransition.None))SubmitForm(Form1); If(Form1.ErrorKind = ErrorKind.None, Navigate(ViewScreen, ScreenTransition.None))

    Lorsque l’utilisateur clique ou appuie sur le bouton, la fonction SubmitForm enregistre les modifications apportées à la source de données, et le ViewScreen réapparaît.When the user clicks or taps the button, the SubmitForm function saves any changes to the data source, and the ViewScreen reappears.

  14. En bas de l’écran, ajoutez un autre bouton, définissez sa propriété Text sur "Supprimer", puis sa propriété OnSelect sur la formule suivante :At the bottom of the screen, add another button, set its Text property to "Remove", and set its OnSelect property to this formula:

    Remove(Schedule,BrowseGallery1.Selected);
    If(IsEmpty(Errors(Schedule)),Navigate(ViewScreen,ScreenTransition.None))
    Remove(Schedule,BrowseGallery1.Selected);
    If(IsEmpty(Errors(Schedule)),Navigate(ViewScreen,ScreenTransition.None))

    Lorsque l’utilisateur clique ou appuie sur ce bouton, la fonction Remove supprime l’enregistrement, puis le ViewScreen réapparaît.When the user clicks or taps this button, the Remove function removes the record, and the ViewScreen reappears.

  15. Définissez la propriété Visible du bouton Remove sur la formule suivante :Set the Visible property of the Remove button to this formula:
    Form1.Mode=FormMode.EditForm1.Mode=FormMode.Edit

    Cette étape masque le bouton Remove lorsque l’utilisateur crée un enregistrement.This step hides the Remove button when the user is creating a record.

    L’ChangeScreen correspond à cet exemple :The ChangeScreen matches this example:

    ChangeScreen final

Définir la navigation à partir de ViewScreenSet navigation from ViewScreen

  1. Dans la barre de navigation de gauche, cliquez ou appuyez sur la miniature pour afficher ViewScreen.In the left navigation bar, click or tap the thumbnail for the ViewScreen.

    Ouvrir ViewScreen

  2. Cliquez ou appuyez sur la flèche suivant pour afficher le premier enregistrement de la galerie.Click or tap the Next arrow for the first record in the gallery.

    Flèche suivant

  3. Définissez la propriété OnSelect de cette flèche sur la formule suivante :Set the OnSelect property of that arrow to this formula:

    Navigate(ChangeScreen,ScreenTransition.None)Navigate(ChangeScreen,ScreenTransition.None)

  4. Dans l’angle supérieur droit, cliquez ou appuyez sur l’icône représentant un signe +.In the upper-right corner, click or tap the plus icon.

    Ajouter un enregistrement

  5. Définissez la propriété OnSelect de l’icône sélectionné sur la formule suivante :Set the OnSelect property of the selected icon to this formula:

    NewForm(Form1);Navigate(ChangeScreen,ScreenTransition.None)`NewForm(Form1);Navigate(ChangeScreen,ScreenTransition.None)`

    Lorsque l’utilisateur clique ou appuie sur cette icône, le ChangeScreen apparaît avec tous les champs vides, permettant à l’utilisateur de créer un enregistrement plus facilement.When the user clicks or taps this icon, ChangeScreen appears with each field empty, so that the user can create a record more easily.

Exécuter l’applicationRun the app

Quand vous personnalisez l’application, testez vos modifications en exécutant l’application en mode Aperçu, comme décrit dans les étapes de cette section.As you customize the app, test your changes by running the app in Preview mode, as the steps in this section describe.

  1. Dans la barre de navigation de gauche, cliquez ou appuyez sur la miniature du haut pour sélectionner ViewScreen.In the left navigation bar, click or tap the top thumbnail to select the ViewScreen.

    Sélectionner ViewScreen

  2. Ouvrez le mode Aperçu en appuyant sur F5 (ou en cliquant ou appuyant sur l’icône Aperçu à proximité de l’angle supérieur droit).Open Preview mode by pressing F5 (or clicking or tapping the Preview icon near the upper-right corner).

    Ouvrir le mode Aperçu

  3. Cliquez ou appuyez sur la flèche Suivant pour un enregistrement afin d’afficher les détails de celui-ci.Click or tap the Next arrow for a record to show details about that record.

  4. Dans ChangeScreen, modifiez les informations d’un ou de plusieurs champs, puis enregistrez vos modifications en cliquant ou en appuyant sur Enregistrer, ou supprimez l’enregistrement en cliquant ou en appuyant sur Supprimer.On the ChangeScreen, change the information in one or more fields, and then save your changes by clicking or tapping Save, or remove the record by clicking or tapping Remove.

  5. Fermez le mode Aperçu en appuyant sur Échap (ou en cliquant ou appuyant sur l’icône de fermeture sous la barre de titre).Close Preview mode by pressing Esc (or by clicking or tapping the close icon under the title bar).

    Fermer le mode Aperçu

Étapes suivantesNext steps

  • Appuyer sur Ctrl+S pour enregistrer votre application dans le cloud afin de pouvoir l’exécuter à partir d’autres appareils.Press Ctrl-S to save your app in the cloud so that you can run it from other devices.
  • Partager l’application afin que d’autres personnes puissent l’exécuter.Share the app so that other people can run it.
  • En savoir plus sur les galeries, formulaires et formules.Learn more about galleries, forms, and formulas.