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

Remarque : cette rubrique a été rédigée pour PowerApps Studio pour Windows, mais les étapes sont identiques si vous ouvrez PowerApps dans un navigateur.

En suivant ce didacticiel, vous allez créer une application contenant deux écrans. Sur un seul écran, les utilisateurs peuvent parcourir un ensemble d’enregistrements :

É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 :

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

Conditions préalables

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.

  1. Copiez ces données, puis collez-les dans un fichier Excel.

    Jour de début Heure de début Bénévole 1 Bénévole 2
    Samedi 10 h-midi Vasquez Kumashiro
    Samedi midi-14 h Ice Singhal
    Samedi 14 h-16 h Myk Mueller
    Dimanche 10 h-midi Li Adams
    Dimanche 10 h-midi Singh Morgan
    Dimanche 10 h-midi Batye Nguyen
  2. Organisez ces données dans un tableau nommé Schedule, de sorte que PowerApps puisse analyser les informations.

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

  3. Enregistrez le fichier sous le nom eventsignup.xls, puis chargez-le dans un compte de stockage cloud, tel que OneDrive.

  4. Si vous êtes novice dans PowerApps :

Créer une application vide et se connecter aux données

  1. Dans PowerApps Studio, cliquez ou appuyez sur Nouveau dans le menu Fichier (près du bord gauche de l’écran).

    Nouvelle option dans le menu File

  2. Sur la mosaïque Application vide, cliquez ou appuyez sur Mode téléphone.

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

    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.

  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.

    Activer/désactiver les vues

  5. Dans le volet de droite, cliquez ou appuyez sur Ajouter une source de données.

    Ajouter une source de données

  6. Procédez comme suit :

    • Si vous avez déjà une connexion à votre compte de stockage cloud, cliquez ou appuyez dessus.
    • 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.
  7. Sous Choose an Excel file, accédez au fichier eventsignup.xlsx, puis cliquez ou appuyez dessus.

    Spécifier le fichier Excel à utiliser

  8. Sous Choose a table, activez la case à cocher Agenda, puis cliquez ou appuyez sur 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.

    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.

Afficher les données

  1. Sous l’onglet Accueil, cliquez ou appuyez sur Nouvel écran, puis cliquez ou appuyez sur Écran de liste.

    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. La galerie couvre la totalité de l’écran sous la zone de recherche.

  2. Cliquez ou appuyez n’importe où dans la galerie sauf sur une flèche, par exemple directement sous la zone de recherche.

    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.

    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 :

    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.

    Remarque : 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_ ». Dans cet exemple, la colonne « Volunteer 1 » apparaît dans une formule sous la forme « Volunteer_x0020_1 ».

    Cette galerie affiche les données du tableau Agenda.

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

    Le bouton de tri peut trier les enregistrements sur la base des données figurant dans la colonne Bénévole 1 colonne. Si un utilisateur clique ou appuie sur ce bouton, l’ordre de tri passe de croissant à décroissant.

    Cette formule contient les fonctions Sort, If, IsBlank, Filter et Text. Pour plus d’informations sur celles-ci et d’autres fonctions, consultez la référence sur les formules.

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

    La galerie affiche ces résultats.

    Trier et filtrer la galerie

    Informations supplémentaires sur les fonctions Sort, Filter et d’autres fonctions

  6. Sélectionnez le contrôle Label en haut de l’écran en cliquant ou en appuyant sur le contrôle.

    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.
    "View Records"

    Modifier la barre de titre

Créer l’élément ChangeScreen et sa bannière

  1. Supprimez Screen1et renommez Screen2 en ViewScreen.

    Renommer l’écran

  2. Ajoutez un écran, puis renommez-le ChangeScreen.

    Ajouter et renommer un écran

  3. Sous l’onglet Insérer, cliquez ou appuyez sur Texte, puis sur Label.

  4. Configurez le contrôle Label que vous venez d’ajouter :

    • Définissez sa propriété Text sur la formule suivante :
      "Change record"
    • Définissez sa propriété Fill sur la formule suivante :
      RGBA(62, 96, 170, 1).
    • Définissez sa propriété Color sur la formule suivante :
      RGBA(255, 255, 255, 1)
    • Définissez sa propriété Align sur Center.
    • Définissez sa propriété X sur 0.
    • Définissez sa propriété Width sur 640.

    Le contrôle Label reflète vos modifications.

    ChangeScreen avec bannière

Ajouter et configurer un formulaire

  1. Dans l’onglet Insérer, cliquez ou appuyez sur Formulaires, puis sur Modifier.

  2. Déplacez et redimensionnez le formulaire pour couvrir la plus grande portion possible de l’écran.

    Ajouter un formulaire

    Le formulaire est nommé Form1 par défaut, sauf si vous déjà ajouté et supprimé un formulaire. Dans ce cas, renommez le formulaire en Form1.

  3. Définissez la propriété DataSource de Form1 sur Schedule.

  4. Définissez la propriété Item de Form1 sur cette expression :
    BrowseGallery1.Selected

  5. Dans le volet de droite, cliquez ou appuyez sur la case à cocher en regard de chaque champ à afficher.

    Afficher les champs sur le formulaire

  6. Près du bas du formulaire, cliquez ou appuyez sur Ajouter une carte personnalisée.

    Ajouter une carte personnalisée

  7. Ajoutez un contrôle Label dans la nouvelle carte.

  8. Définissez la propriété AutoHeight du nouveau contrôle sur true, et sa propriété Text sur la formule suivante :
    Form1.Error

    L’étiquette affichera toutes les erreurs provenant du formulaire.

  9. Dans la barre de navigation de gauche, cliquez ou appuyez sur la miniature pour que ChangeScreen effectue la sélection.

  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.

  11. Définissez la propriété OnSelect de cette flèche sur la formule suivante :

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

    Lorsque l’utilisateur clique ou appuie sur la flèche, la fonction Navigate ouvre ViewScreen.

  12. Ajoutez un contrôle Button sous le formulaire, puis définissez la propriété Text sur "Enregistrer".

    Ajouter un enregistrement bouton

  13. Définissez la propriété OnSelect du bouton sur la formule suivante :

    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.

  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 :

    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.

  15. Définissez la propriété Visible du bouton Remove sur la formule suivante :
    Form1.Mode=FormMode.Edit

    Cette étape masque le bouton Remove lorsque l’utilisateur crée un enregistrement.

    L’ChangeScreen correspond à cet exemple :

    ChangeScreen final

Définir la navigation à partir de ViewScreen

  1. Dans la barre de navigation de gauche, cliquez ou appuyez sur la miniature pour afficher ViewScreen.

    Ouvrir ViewScreen

  2. Cliquez ou appuyez sur la flèche suivant pour afficher le premier enregistrement de la galerie.

    Flèche suivant

  3. Définissez la propriété OnSelect de cette flèche sur la formule suivante :

    Navigate(ChangeScreen,ScreenTransition.None)

  4. Dans l’angle supérieur droit, cliquez ou appuyez sur l’icône représentant un signe +.

    Ajouter un enregistrement

  5. Définissez la propriété OnSelect de l’icône sélectionné sur la formule suivante :

    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.

Exécuter l’application

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.

  1. Dans la barre de navigation de gauche, cliquez ou appuyez sur la miniature du haut pour sélectionner 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).

    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.

  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.

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

    Fermer le mode Aperçu

Étapes suivantes

  • Appuyer sur Ctrl+S pour enregistrer votre application dans le cloud afin de pouvoir l’exécuter à partir d’autres appareils.
  • Partager l’application afin que d’autres personnes puissent l’exécuter.
  • En savoir plus sur les galeries, formulaires et formules.