Générer une application pour gérer les demandes de projetGenerate an app to handle project requests

Remarque : cet article fait partie d’une série de tutoriels sur l’utilisation de Power BI, PowerApps et Microsoft Flow avec SharePoint Online.Note: This article is part of a tutorial series on using PowerApps, Microsoft Flow, and Power BI with 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.Make sure you read the series introduction to get a sense of the big picture, as well as related downloads.

Maintenant que les listes SharePoint sont en place, vous pouvez créer et personnaliser votre première application.Now that the SharePoint lists are in place, we can build and customize our first app. Comme PowerApps est intégré à SharePoint, il est facile de générer une application de base à trois écrans directement à partir d’une liste.PowerApps is integrated with SharePoint, so it's easy to generate a basic three screen app directly from a list. 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.This app allows you to view summary and detailed information for each list item, update existing list items, and create new list items. Si vous créez une application directement à partir d’une liste, l’application s’affiche sous forme de vue pour cette liste.If you create an app directly from a list, the app appears as a view for that list. Vous pouvez ensuite exécuter cette application dans un navigateur, ainsi que sur un téléphone mobile.You can then run that app in a browser, as well as on a mobile phone.

Conseil : le package à télécharger pour ce scénario inclut une version terminée de cette application : project-requests-app.msapp.Tip: The download package for this scenario includes a finished version of this app: project-requests-app.msapp.

Étape 1 : Générer une application à partir d’une liste SharePointStep 1: Generate an app from a SharePoint list

  1. Dans la liste Demandes de projet que vous avez créée, cliquez ou appuyez sur PowerApps, puis sur Créer une application.In the Project Requests list you created, click or tap PowerApps, then Create an app.

    Créer une application

  2. Entrez le nom de l’application, par exemple « Application Demandes de projet », puis cliquez ou appuyez sur Créer.Give the app a name, like "Project Requests app", then click or tap Create. Lorsque l’application est prête, elle s’ouvre dans PowerApps Studio pour le web.When the app is ready, it opens in PowerApps Studio for web.

    Spécifier un nom pour l’application

Étape 2 : Passer en revue l’application dans PowerApps StudioStep 2: Review the app in 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.In PowerApps Studio, the left navigation bar by default shows a hierarchical view of the screens and controls in the app.

    PowerApps Studio avec une vue hiérarchique

  2. Cliquez ou appuyez sur l’icône de miniature pour changer de vue.Click or tap the thumbnail icon to switch views.

    Sélecteur de vue PowerApps Studio

  3. Cliquez ou appuyez sur chaque écran pour l’afficher dans le volet central.Click or tap each screen to view it in the middle pane. Il existe trois écrans :There are three screens:

    1. l’écran de navigation dans lequel vous pouvez parcourir, trier et filtrer les données extraites de la liste ;The browse screen, where you browse, sort, and filter the data pulled in from the list.
    2. l’écran de détails dans lequel vous pouvez consulter d’autres détails relatifs à un élément ;The details screen, where you view more detail about an item.
    3. l’écran de création/modification dans lequel vous pouvez modifier ou créer un élément.The edit/create screen, where you edit an existing item or create a new one.

      PowerApps Studio avec vue miniature

Étape 3 : Personnaliser l’écran de navigation de l’applicationStep 3: Customize the app's browse screen

  1. Cliquez ou appuyez sur l’écran de navigation.Click or tap the browse screen.

    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.This screen has a layout that contains a gallery to show list items, as well as other controls, like a search bar and sort button.

  2. Sélectionnez la galerie BrowseGallery1 en cliquant ou appuyant sur n’importe quel enregistrement, sauf le premier.Select the BrowseGallery1 gallery by clicking or tapping any record except the first one.

    Galerie de navigation

  3. Dans le volet de droite, mettez à jour les champs pour qu’ils correspondent à la liste suivante :In the right pane, update the fields to match the following list:

    • RequestDateRequestDate
    • DescriptionDescription
    • TitleTitle
    • RequestorRequestor

      Champs Galerie

  4. La galerie BrowseGallery1 étant toujours sélectionnée, sélectionnez la propriété Items.With BrowseGallery1 still selected, select the Items property.

    Propriété Items

  5. Modifiez la formule comme suit : SortByColumns(Filter('Project Requests', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending)).Change the formula to 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.This allows you to sort and search by the Title field, instead of the default that PowerApps picked. Pour plus d’informations, consultez Présentation approfondie des formules.See Formula deep-dive for more information.

  6. Cliquez ou appuyez sur Fichier, puis sur Enregistrer.Click or tap File, then Save. Cliquez ou appuyez sur icône Revenir à l’application pour revenir à l’application.Click or tap Back to app icon to go back to the app.

Étape 4 : Personnaliser l’écran de détails de l’application et l’écran de modificationStep 4: Customize the app's details screen and edit screen

  1. Cliquez ou appuyez sur l’écran de détails.Click or tap the details screen.

    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.This screen has a different layout that contains a display form to show the details for an item selected in the gallery. Il possède des contrôles qui permettent de modifier et de supprimer des éléments, et de revenir à l’écran de navigation.It has controls to edit and delete items, and to go back to the browse screen.

  2. Sélectionnez le formulaire d’affichage DetailForm1.Select the DetailForm1 display form.

    Formulaire d’affichage Détails

  3. Dans le volet de droite, faites glisser le champ Title vers le haut.In the right pane, drag the Title field to the top.

    Champ Title

  4. Cliquez ou appuyez sur l’écran de modification.Click or tap the edit screen.

    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).This screen contains an edit form to edit the selected item, or create a new one (if you come here directly from the browse screen). Il offre des contrôles permettant d’enregistrer ou d’abandonner les modifications.It has controls to save or discard changes.

  5. Sélectionnez le formulaire de modification EditForm1.Select the EditForm1 edit form.

    Formulaire de modification

  6. Comme ci-dessus, faites glisser le champ Title vers le haut.As above, drag the Title field to the top.

    Champ Title

Étape 5 : Exécuter l’application à partir de la listeStep 5: Run the app from the list

  1. Dans la liste Demandes de projet, cliquez ou appuyez sur Tous les éléments, puis sur Application Demandes de projet.In the Project Requests list, click or tap All Items, then Project Requests app.

    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.Click Open, which opens the app in a new browser tab.

    Ouvrir l’application Demandes de projet

  3. Dans l’application, cliquez ou appuyez surIn the app, click or tap icône Détails correspondant au premier élément de la galerie à parcourir.for the first item in the browse gallery.

    Premier élément de la galerie

  4. Cliquez ou appuyez surClick or tap icône d’édition en forme de crayon pour modifier l’élément.to edit the item.
  5. Mettez à jour le champ Description : remplacez le dernier mot « groupe » par « équipe », puis cliquez ou appuyez sur icône de coche.Update the Description field – change the last word from "group" to "team," then click or tap Check mark icon

    Mettre à jour le champ Description

  6. Fermez l’onglet du navigateur.Close the browser tab.
  7. Revenez à la liste Demandes de projet, cliquez ou appuyez sur Application Demandes de projet, puis sur Tous les éléments.Go back to the Project Requests list, click or tap Project Requests app, then All Items.

    Afficher tous les éléments

  8. Vérifiez les modifications apportées à partir de l’application.Verify the change you made from the app.

    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.This is a pretty simple app, and we only made a few basic customizations, but you can see it's possible to quickly build something interesting. 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.We're going to move on to the next task, but look around the app a little more if you want, and see how the controls and formulas work together to drive app behavior.

Présentation approfondie des formulesFormula deep-dive

Cette section est facultative, mais elle va vous aider à en savoir plus sur le fonctionnement des formules.This section is optional, but it will help you understand more about how formulas work. À l’étape 3 de cette tâche, vous avez modifié la formule de la propriété Items de BrowseGallery1.In step 3 of this task, we modified the formula for the Items property of 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.Specifically, we changed the sort and search to use the Title field, instead of the field that PowerApps picked. Voici la formule modifiée :Here's the modified formula:

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

Mais quelle est l’utilité de cette formule ?But what does this formula do? 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.It determines the source of data that appears in the gallery, filters the data based on any text entered in the search box, and sorts the results based on the sort button in the app. La formule utilise des fonctions.The formula uses functions to do its work. Les fonctions acceptent des paramètres (entrées), effectuent une opération (filtrage par exemple) et retournent une valeur (sortie) :Functions take parameters (i.e. input), perform an operation (like filtering), and return a value (i.e. output):

  • La fonction SortByColumns trie une table selon une ou plusieurs colonnes.The SortByColumns function sorts a table based on one or more columns.
  • La fonction Filter recherche les enregistrements d’une table qui répondent à une formule.The Filter function finds the records in a table that satisfy a formula that you specify.
  • La fonction StartsWith teste si une chaîne de texte commence par une autre.The StartsWith function tests whether one text string begins with another.
  • La fonction If retourne une valeur si une condition est true et une autre valeur si la même condition est false.The If function returns one value if a condition is true, and returns another value if the same condition is false.

Lorsque vous placez les fonctions dans la formule, voici ce qui se passe :When you put the functions together in the formula, here's what happens:

  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.If you enter text in the search box, the StartsWith function compares that text to the start of each string in the Title column of the list.

    StartsWith ( Title, TextSearchBox1.Text )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 ».For example, if you enter "de" in the search box, you see four results, including items that start with "Desktop" and "Device." Vous ne voyez pas tous les éléments « périphériques mobiles », car ils ne commencent pas par « app ».You won't see all the "Mobile devices" items because those don't start with "de."

  2. La fonction Filter retourne des lignes de la table Demandes de projet.The Filter function returns rows from the Project Requests table. Si aucun texte n’est présent dans la zone de recherche à comparer, la fonction Filter retourne toutes les lignes.If there is no text in the search box to compare, Filter returns all rows.

    Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text )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).The If function looks at whether the variable SortDescending1 is set to true or false (the sort button in the app sets it). La fonction retourne ensuite la valeur Décroissant ou Croissant.The function then returns a value of Descending or Ascending.

    If ( SortDescending1, Descending, Ascending )If ( SortDescending1, Descending, Ascending )

  4. Maintenant, la fonction SortByColumns peut trier la galerie.Now the SortByColumns function can sort the gallery. 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.In this case, it sorts based on the Title field, but this can be a different field than the one you search on.

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.If you stuck with us up to this point, we hope you have a better sense of how this formula works, and how you can combine functions and other elements to drive the behavior your apps require. Pour plus d’informations, consultez Informations de référence sur les formules pour PowerApps.For more information, see Formula reference for PowerApps.

Étapes suivantesNext steps

L’étape suivante de cette série de tutoriels consiste à créer un flux pour gérer les approbations de projets.The next step in this tutorial series is to Create a flow to manage project approvals.