Remarque : cet article fait partie d’une série de tutoriels sur l’utilisation de Power BI, PowerApps et Microsoft Flow avec SharePoint Online. Nous vous recommandons de lire la présentation de la série pour en avoir une vue d’ensemble et accéder aux téléchargements associés.

Maintenant que les listes SharePoint sont en place, vous pouvez créer et personnaliser votre première application. Comme PowerApps est intégré à SharePoint, il est facile de générer une application de base à trois écrans directement à partir d’une liste. Cette application permet d’afficher des informations récapitulatives et détaillées pour chaque élément de liste, de mettre à jour des éléments de liste existants et d’en créer. Si vous créez une application directement à partir d’une liste, l’application s’affiche sous forme de vue pour cette liste. Vous pouvez ensuite exécuter cette application dans un navigateur, ainsi que sur un téléphone mobile.

Conseil : le package à télécharger pour ce scénario inclut une version terminée de cette application : project-requests-app.msapp.

Étape 1 : Générer une application à partir d’une liste SharePoint

  1. Dans la liste Demandes de projet que vous avez créée, cliquez ou appuyez sur PowerApps, puis sur Créer une application.

    Créer une application

  2. Entrez le nom de l’application, par exemple « Application Demandes de projet », puis cliquez ou appuyez sur Créer. Lorsque l’application est prête, elle s’ouvre dans PowerApps Studio pour le web.

    Spécifier un nom pour l’application

Étape 2 : Passer en revue l’application dans PowerApps Studio

  1. Dans PowerApps Studio, par défaut, la barre de navigation de gauche montre une vue hiérarchique des écrans et contrôles de l’application.

    PowerApps Studio avec une vue hiérarchique

  2. Cliquez ou appuyez sur l’icône de miniature pour changer de vue.

    Sélecteur de vue PowerApps Studio

  3. Cliquez ou appuyez sur chaque écran pour l’afficher dans le volet central. Il existe trois écrans :

    1. l’écran de navigation dans lequel vous pouvez parcourir, trier et filtrer les données extraites de la liste ;
    2. l’écran de détails dans lequel vous pouvez consulter d’autres détails relatifs à un élément ;
    3. l’écran de création/modification dans lequel vous pouvez modifier ou créer un élément.

    PowerApps Studio avec vue miniature

Étape 3 : Personnaliser l’écran de navigation de l’application

  1. Cliquez ou appuyez sur l’écran de navigation.

    Cet écran a une disposition qui contient une galerie pour afficher les éléments de liste, ainsi que d’autres contrôles, tels qu’une barre de recherche et un bouton de tri.

  2. Sélectionnez la galerie BrowseGallery1 en cliquant ou appuyant sur n’importe quel enregistrement, sauf le premier.

    Galerie de navigation

  3. Dans le volet de droite, mettez à jour les champs pour qu’ils correspondent à la liste suivante :

    • RequestDate
    • Description
    • Title
    • Requestor

    Champs Galerie

  4. La galerie BrowseGallery1 étant toujours sélectionnée, sélectionnez la propriété Items.

    Propriété Items

  5. Modifiez la formule comme suit : SortByColumns(Filter('Project Requests', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending)).

    Barre de formule

    Cela vous permet de trier et de rechercher en fonction du champ Title, au lieu du champ par défaut choisi par PowerApps. Pour plus d’informations, consultez Présentation approfondie des formules.

  6. Cliquez ou appuyez sur Fichier, puis sur Enregistrer. Cliquez ou appuyez sur icône Revenir à l’application pour revenir à l’application.

Étape 4 : Personnaliser l’écran de détails de l’application et l’écran de modification

  1. Cliquez ou appuyez sur l’écran de détails.

    Cet écran a une disposition différente qui contient un formulaire d’affichage qui affiche les détails d’un élément sélectionné dans la galerie. Il possède des contrôles qui permettent de modifier et de supprimer des éléments, et de revenir à l’écran de navigation.

  2. Sélectionnez le formulaire d’affichage DetailForm1.

    Formulaire d’affichage Détails

  3. Dans le volet de droite, faites glisser le champ Title vers le haut.

    Champ Title

  4. Cliquez ou appuyez sur l’écran de modification.

    Cet écran contient un formulaire de modification qui permet de modifier l’élément sélectionné ou d’en créer-un (si vous y accédez directement à partir de l’écran de navigation). Il offre des contrôles permettant d’enregistrer ou d’abandonner les modifications.

  5. Sélectionnez le formulaire de modification EditForm1.

    Formulaire de modification

  6. Comme ci-dessus, faites glisser le champ Title vers le haut.

    Champ Title

Étape 5 : Exécuter l’application à partir de la liste

  1. Dans la liste Demandes de projet, cliquez ou appuyez sur Tous les éléments, puis sur Application Demandes de projet.

    Afficher l’application Demandes de projet

  2. Cliquez sur Ouvrir, ce qui a pour effet d’ouvrir l’application dans un nouvel onglet de navigateur.

    Ouvrir l’application Demandes de projet

  3. Dans l’application, cliquez ou appuyez sur icône Détails correspondant au premier élément de la galerie à parcourir.

    Premier élément de la galerie

  4. Cliquez ou appuyez sur icône d’édition en forme de crayon pour modifier l’élément.

  5. Mettez à jour le champ Description : remplacez le dernier mot « groupe » par « équipe », puis cliquez ou appuyez sur icône de coche .

    Mettre à jour le champ Description

  6. Fermez l’onglet du navigateur.

  7. Revenez à la liste Demandes de projet, cliquez ou appuyez sur Application Demandes de projet, puis sur Tous les éléments.

    Afficher tous les éléments

  8. Vérifiez les modifications apportées à partir de l’application.

    Vérifier vos modifications

Il s’agit d’une application très simple à laquelle nous avons apporté uniquement de simples personnalisations, mais vous pouvez voir qu’il est possible de créer rapidement quelque chose d’intéressant. Vous allez passer à la tâche suivante. Toutefois, si vous le souhaitez, étudiez d’un peu plus près l’application pour voir comment les contrôles et les formules fonctionnent conjointement pour alimenter le comportement de l’application.

Présentation approfondie des formules

Cette section est facultative, mais elle va vous aider à en savoir plus sur le fonctionnement des formules. À l’étape 3 de cette tâche, vous avez modifié la formule de la propriété Items de BrowseGallery1. Plus précisément, vous avez modifié les fonctions de tri et de recherche pour qu’elles utilisent le champ Title au lieu du champ par défaut choisi par PowerApps. Voici la formule modifiée :

SortByColumns ( Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text ) ), "Title", If ( SortDescending1, Descending, Ascending ) )

Mais quelle est l’utilité de cette formule ? Celle-ci détermine la source de données qui apparaît dans la galerie, filtre les données en fonction du texte entré dans la zone de recherche et trie les résultats en fonction du bouton de tri dans l’application. La formule utilise des fonctions. Les fonctions acceptent des paramètres (entrées), effectuent une opération (filtrage par exemple) et retournent une valeur (sortie) :

  • La fonction SortByColumns trie une table selon une ou plusieurs colonnes.

  • La fonction Filter recherche les enregistrements d’une table qui répondent à une formule.

  • La fonction StartsWith teste si une chaîne de texte commence par une autre.

  • La fonction If retourne une valeur si une condition est true et une autre valeur si la même condition est false.

Lorsque vous placez les fonctions dans la formule, voici ce qui se passe :

  1. Si vous entrez du texte dans la zone de recherche, la fonction StartsWith compare ce texte avec le début de chaque chaîne de la colonne Title de la liste.

    StartsWith ( Title, TextSearchBox1.Text )

    Par exemple, si vous entrez « app » dans la zone de recherche, vous voyez quatre résultats, y compris des éléments qui commencent par « Appareil » et « Application ». Vous ne voyez pas tous les éléments « périphériques mobiles », car ils ne commencent pas par « app ».

  2. La fonction Filter retourne des lignes de la table Demandes de projet. Si aucun texte n’est présent dans la zone de recherche à comparer, la fonction Filter retourne toutes les lignes.

    Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text )

  3. La fonction If examine si la variable SortDescending1 a la valeur true ou false (c’est le bouton de tri dans l’application qui la définit). La fonction retourne ensuite la valeur Décroissant ou Croissant.

    If ( SortDescending1, Descending, Ascending )

  4. Maintenant, la fonction SortByColumns peut trier la galerie. Dans le cas présent, elle trie en fonction du champ Title, mais il peut s’agir d’un champ différent de celui sur lequel vous avez effectué la recherche.

Si vous êtes encore avec nous à ce stade, nous espérons que vous avez une idée plus précise du fonctionnement de cette formule et de la façon dont vous pouvez combiner les fonctions et les autres éléments pour piloter le comportement de vos applications. Pour plus d’informations, consultez Informations de référence sur les formules pour PowerApps.

Étapes suivantes

L’étape suivante de cette série de tutoriels consiste à créer un flux pour gérer les approbations de projets.