Créer une application pour gérer des projetsCreate an app to manage projects

Note

Cet article fait partie d’une série de didacticiels sur l’utilisation de Power BI, PowerApps et Microsoft Flow avec SharePoint Online.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.

Dans cette tâche, vous allez générer une application à partir de zéro.In this task, we'll build an app from scratch. Cette application permet à un utilisateur d’affecter un responsable à des projets et de mettre à jour les détails du projet.This app allows a user to assign a manager to projects and to update project details. Vous allez voir certains des contrôles et des formules que vous avez vus dans la première application, mais vous allez participer davantage à l’application cette fois-ci.You will see some of the same controls and formulas you saw in the first app, but you will build more of the app yourself this time. Le processus est plus complexe, mais vous allez en apprendre plus et nous pensons qu’il s’agit d’un bon compromis.The process is more complex, but you'll learn more, so we think it's a fair trade-off.

Conseil

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

Revue rapide de PowerApps StudioQuick review of PowerApps Studio

Vous avez utilisé PowerApps Studio pour le web dans la dernière tâche, mais nous voulons être certains que vous comprenez toutes les parties avant de continuer.You used PowerApps Studio for web in the last task, but we want to make sure you understand all the parts before we move on. Vous pouvez continuer à travailler dans PowerApps Studio pour le web ou vous pouvez utiliser PowerApps Studio pour Windows.You can continue to work in PowerApps Studio for web, or you can use PowerApps Studio for Windows.

PowerApps Studio comporte trois volets et un ruban, qui font que la génération d’applications ressemble à la création d’un diaporama dans PowerPoint :PowerApps Studio has three panes and a ribbon that make app creation feel like building a slide deck in PowerPoint:

  1. La barre de navigation de gauche, qui montre une vue hiérarchique de l’ensemble des écrans et contrôles de l’application, ainsi que les miniatures des écransLeft navigation bar, which shows a hierarchical view of all the app's screens and controls, as well as thumbnails of the screens
  2. Le volet central, qui contient l’écran d’application sur lequel vous travaillezMiddle pane, which contains the app screen you are working on
  3. Le volet de droite, qui vous permet de définir des options telles que la disposition et les sources de donnéesRight-hand pane, where you set options like layout and data sources
  4. La liste déroulante des propriétés, qui vous permet de sélectionner les propriétés auxquelles des formules s’appliquentProperty drop-down list, where you select the properties that formulas apply to
  5. La barre de formule, qui permet d’ajouter des formules (comme dans Excel) définissant le comportement de l’applicationFormula bar, where you add formulas (like in Excel) that define app behavior
  6. Le ruban, qui permet d’ajouter des contrôles et de personnaliser des éléments de conceptionRibbon, where you add controls and customize design elements

PowerApps Studio

Étape 1 : Créer des écransStep 1: Create screens

Après cette petite révision, vous pouvez commencer à générer une application.With that review out of the way, let's start building an app.

Créer et enregistrer l’applicationCreate and save the app

  1. Dans PowerApps Studio, cliquez ou appuyez sur Nouveau, puis sous Application vide, cliquez ou appuyez sur Mode téléphone.In PowerApps Studio, click or tap New, then under Blank app, click or tap Phone Layout.

    Application vide - Mode téléphone

  2. Cliquez ou appuyez sur Fichier, ce qui a pour effet d’ouvrir l’onglet Paramètres de l’application. Entrez le nom « Application Gestion de projet ».Click or tap File, which opens to an App settings tab. Enter the name "Project Management app".

    Nom de l’application

  3. Cliquez ou appuyez sur Enregistrer sous, vérifiez que l’application s’enregistre dans le cloud, puis cliquez sur Enregistrer dans le coin inférieur droit.Click or tap Save as, verify that the app will save to the cloud, then click Save in the lower right corner.

    Enregistrer dans le cloud

  4. Cliquez ou appuyez surClick or tap icône Revenir à l’application pour revenir à l’application.to go back to the app.

Ajouter quatre écrans à l’applicationAdd four screens to the app

Lors de cette étape, vous allez créer quatre écrans vides pour l’application.In this step, we'll create four blank screens for the app. Vous allez utiliser différentes dispositions d’écran en fonction de l’objectif de l’écran.We'll use different screen layouts, depending on the screen's purpose. Vous ajouterez des informations à ces écrans dans les étapes suivantes.We'll add to these screens in later steps.

ÉcranScreen ObjectifPurpose
SelectTaskSelectTask Écran d’ouverture qui permet d’accéder aux autres écransOpening screen; navigate to other screens
AssignManagerAssignManager Permet d’attribuer un responsable à un projet approuvéAssign a manager to an approved project
ViewProjectsViewProjects Permet d’afficher la liste des projets, avec des informations récapitulativesView a list of projects, with summary information
UpdateDetailsUpdateDetails Permet d’afficher et de mettre à jour les détails d’un projetView and update the details for a project
  1. Sous l’onglet Accueil, cliquez ou appuyez sur Nouvel écran, puis sur Écran avec défilement.On the Home tab, click or tap NewScreen, then Scrollable screen.

    Écran avec défilement

  2. Renommez l’écran en SelectTask.Rename the screen to SelectTask.

    Renommer l’écran

  3. Créez et renommez les autres écrans :Create and rename additional screens:

    1. Cliquez ou appuyez sur Nouvel écran, puis sur Écran avec défilement.Click or tap NewScreen, then Scrollable screen. Renommez l’écran en AssignManager.Rename the screen to AssignManager.
    2. Cliquez ou appuyez sur Nouvel écran, puis sur Écran Liste.Click or tap NewScreen, then List screen. Renommez l’écran en ViewProjects.Rename the screen to ViewProjects.
    3. Cliquez ou appuyez sur Nouvel écran, puis sur Écran Formulaire.Click or tap NewScreen, then Form screen. Renommez l’écran en UpdateDetails.Rename the screen to UpdateDetails.
  4. Sélectionnez les points de suspension (... ) à côté de Screen1, puis cliquez ou appuyez sur Supprimer.Select the ellipsis (. . .) next to Screen1, then click or tap Delete.

    Supprimer l’écran

L’application doit maintenant ressembler à l’image suivante.The app should now look like the following image.

Tous les écrans de l’application

Étape 2 : Se connecter à une liste SharePointStep 2: Connect to a SharePoint list

Dans cette étape, vous allez vous connecter à la liste SharePoint Détails du produit.In this step, we'll connect to the Product Details SharePoint list. Vous n’utilisez qu’une seule liste dans cette application, mais vous pouvez vous connecter facilement à deux listes si vous souhaitez étendre l’application.We only use one list in this app, but you could easily connect to both if you want to extend the app.

  1. Dans la barre de navigation de gauche, cliquez ou appuyez sur l’écran SelectTask.In the left navigation bar, click or tap the SelectTask screen.
  2. Dans le volet de droite, cliquez ou appuyez sur Ajouter une source de données.In the right pane, click or tap Add data source.

    Se connecter aux données

  3. Cliquez ou appuyez sur Nouvelle connexion .Click or tap New connection.

    Nouvelle connexion

  4. Cliquez ou appuyez sur SharePoint.Click or tap SharePoint.

    Connexion à SharePoint

  5. Sélectionnez Se connecter directement (services cloud), puis cliquez ou appuyez sur Ajouter une connexion.Select Connect directly (cloud services), then click or tap Create.

    Se connecter directement (services cloud)

  6. Entrez une URL SharePoint, puis cliquez ou appuyez sur Atteindre.Enter a SharePoint URL, then click or tap Go.

    URL de connexion à SharePoint

  7. Sélectionnez la liste Détails du projet, puis cliquez ou appuyez sur Se connecter.Select the Project Details list, then click or tap Connect.

    Sélectionner la liste Détails du projet

    L’onglet Sources de données du volet de droite affiche maintenant la connexion que vous avez créée.The Data sources tab in the right pane now shows the connection that you have created.

    Onglet Sources de données

Étape 3 : Créer l’écran SelectTaskStep 3: Build the SelectTask screen

Dans cette étape, nous vous fournirons un moyen d’accéder à d’autres écrans dans l’application, en utilisant certains des contrôles, formules et options de mise en forme fournis par PowerApps.In this step, we'll provide a way to navigate to the other screens in the app - working with some of the controls, formulas, and formatting options that PowerApps provides.

Mettre à jour le titre et insérer le texte d’introductionUpdate the title and insert introductory text

  1. Dans la barre de navigation de gauche, sélectionnez l’écran SelectTask.In the left navigation bar, select the SelectTask screen.
  2. Dans le volet central, sélectionnez la valeur par défaut [Title], puis dans la barre de formule, mettez à jour la propriété Text sur « Gestion de projet Contoso ».In the middle pane, select the default [Title], then in the formula bar, update the Text property to "Contoso Project Management".

    Propriété de texte dans la barre de formule

  3. Sous l’onglet Insérer, cliquez ou appuyez sur Étiquette, puis faites glisser l’étiquette vers le bas sous la bannière supérieure.On the Insert tab, click or tap Label, then drag the label down below the top banner.

    Ajouter une étiquette

  4. Dans la barre de formule, définissez les propriétés suivantes de l’étiquette :In the formula bar, set the following properties for the label:

    • Propriété Color = DarkGrayColor property = DarkGray

    • Propriété Size = 18Size property = 18

    • Propriété Text = « Cliquez ou appuyez sur une tâche pour continuer... »Text property = "Click or tap a task to continue..."

      Mettre à jour le texte de l’étiquette

Ajouter deux boutons de navigationAdd two navigation buttons

  1. Sous l’onglet Insérer, cliquez ou appuyez sur Bouton, puis faites glisser le bouton sous l’étiquette.On the Insert tab, click or tap Button, then drag the button below the label.

    Bouton Ajouter

  2. Dans la barre de formule, définissez les propriétés suivantes du bouton :In the formula bar, set the following properties for the button:

    • Propriété OnSelect = Navigate(AssignManager, Fade).OnSelect property = Navigate(AssignManager, Fade). Lorsque vous exécutez l’application et cliquez sur ce bouton, vous accédez au deuxième écran de l’application, avec une transition en fondu entre les écrans.When you run the app and click this button, you navigate to the second screen in the app, with a fade transition between the screens.

    • Propriété Text = « Affecter un responsable »Text property = "Assign Manager"

  3. Redimensionnez le bouton pour l’adapter au texte.Resize the button to accommodate the text.

    Mettre à jour le texte du bouton

  4. Insérez un autre bouton avec les propriétés suivantes :Insert another button with the following properties:

    • Propriété OnSelect = Navigate(ViewProjects, Fade).OnSelect property = Navigate(ViewProjects, Fade).

    • Propriété Text = « Mettre à jour les détails »Text property = "Update Details"

      Mettre à jour le texte du bouton

      Note

      Le bouton est intitulé Mettre à jour les détails, mais nous accédez d’abord à l’écran ViewProjects pour sélectionner un projet à mettre à jour.The button is labeled Update Details, but we first navigate to the ViewProjects screen to select a project to update.

Exécuter l’applicationRun the app

L’application n’a pas beaucoup de fonctionnalités pour l’instant, mais vous pouvez l’exécuter si vous le souhaitez :The app doesn't do a lot yet, but you can run it if you like:

  1. Cliquez ou appuyez sur l’écran SelectTask (l’application démarre toujours à partir de l’écran sélectionné dans le mode Preview (Aperçu) dans PowerApps Studio).Click or tap the SelectTask screen (the app always starts from the selected screen in Preview mode in PowerApps Studio).

  2. Cliquez ou appuyez surClick or tap icône Exécuter l’application dans l’angle supérieur droit pour exécuter l’application.in the upper right corner to run the app.

  3. Cliquez ou appuyez sur un des boutons pour accéder à un autre écran.Click or tap one of the buttons to navigate to another screen.

  4. Cliquez ou appuyez surClick or tap icône Fermer l’aperçu de l’application dans l’angle supérieur droit pour fermer l’application.in the upper right corner to close the app.

Étape 4 : Créer l’écran AssignManagerStep 4: Build the AssignManager screen

Dans cette étape, vous allez utiliser une galerie pour afficher tous les projets qui ont été approuvés mais n’ont pas encore de responsable.In this step, we'll use a gallery to display all projects that have been approved but don't yet have a manager. Vous allez ajouter d’autres contrôles qui permettent d’affecter un responsable.We'll add other controls, so you can assign a manager.

Note

Vous allez générer une page plus tard dans l’application qui permet de modifier tous les champs d’un projet (y compris le champ Responsable), mais nous avons pensé qu’il serait utile de créer un écran comme celui-ci également.We'll build a page later in the app that allows you to edit all fields for a project (including the manager field), but we thought it would be cool to build a screen like this one as well.

  1. Enregistrez les modifications que vous avez apportées jusqu’à présent.Save the changes you've made so far.

  2. Dans la barre de navigation de gauche, cliquez ou appuyez sur l’écran Affecter un responsable.In the left navigation bar, click or tap the AssignManager screen.

Mettre à jour le titre et insérer le texte d’introductionUpdate the title and insert introductory text

  1. Définissez [Title] sur Affecter un responsable.Change [Title] to Assign Manager.

  2. Ajoutez une étiquette avec les propriétés suivantes :Add a label with the following properties:

    • Propriété Color = DarkGrayColor property = DarkGray

    • Propriété Size = 18Size property = 18

    • Propriété Text = « Sélectionnez un projet, puis affectez un responsable »Text property = "Select a project, then assign a manager"

      Disposition Affecter un responsable

Ajoutez une flèche Précédent pour revenir à l’écran SelectTask.Add a back arrow to return to the SelectTask screen

  1. Cliquez ou appuyez sur la barre bleue en haut de l’écran.Click or tap the blue bar at the top of the screen.

  2. Sous l’onglet Insérer, cliquez ou appuyez sur Icônes, puis sur Gauche.On the Insert tab, click or tap Icons, then click or tap Left.

    Insérer une flèche gauche

  3. Déplacez la flèche vers la gauche de la barre bleue et définissez les propriétés suivantes :Move the arrow to the left side of the blue bar, and set the following properties:

    • Propriété Color = WhiteColor property = White

    • Propriété Height = 40Height property = 40

    • Propriété OnSelect = Navigate(SelectTask, Fade)OnSelect property = Navigate(SelectTask, Fade)

    • Propriété Width = 40Width property = 40

      Ajouter un bouton Précédent

  1. Sous l’onglet Insérer, cliquez ou appuyez sur Galerie, puis sur Vertical.On the Insert tab, click or tap Gallery, then Vertical.

    Ajouter une galerie verticale

  2. Sélectionnez Titre, sous-titre et corps dans le menu Disposition du volet de droite.Select Title, subtitle, and body from the Layout menu in the right pane.

    Changer la disposition de la galerie

    La galerie a maintenant la bonne disposition, mais elle contient toujours l’exemple de texte par défaut.The gallery now has the right layout, but it still has the default sample text. Nous allons résoudre cela.We'll fix that next.

    Galerie avec texte par défaut

  3. Définissez les propriétés suivantes de la galerie :Set the following properties for the gallery:

    • Propriété BorderThickness = 1BorderThickness property = 1

    • Propriété BorderStyle = DottedBorderStyle property = Dotted

    • Propriété Items = Filter('Project Details', PMAssigned="Unassigned").Items property = Filter('Project Details', PMAssigned="Unassigned"). Seuls les projets sans responsable sont inclus dans la galerie.Only projects with no manager assigned are included in the gallery.

      Galerie avec du texte à partir de la liste

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

    • ApprovedDateApprovedDate

    • StatusStatus

    • TitleTitle

      Champs Galerie

  5. Redimensionnez les étiquettes de la galerie comme il convient et supprimez la flèche du premier élément de galerie (vous n’avez pas besoin de naviguer vers un emplacement à partir de cette galerie).Resize labels in the gallery as appropriate, and remove the arrow from the first gallery item (we don't need to navigate anywhere from this gallery).

    Supprimer l’icône de flèche

    L’écran doit maintenant ressembler à l’image suivante.The screen should now look like the following image.

    Galerie mise en forme

Modifier la couleur d’un élément sélectionnéChange the color of an item if it's selected

  1. Sélectionnez la galerie, puis définissez la propriété TemplateFill sur If (ThisItem.IsSelected=true, Orange, White).Select the gallery, then set the TemplateFill property to If (ThisItem.IsSelected=true, Orange, White).

  2. Sélectionnez un élément dans la galerie.Select an item in the gallery. L’écran doit maintenant ressembler à l’image suivante.The screen should now look like the following image.

    Galerie avec l’élément sélectionné

Ajouter une étiquette, du texte et le bouton OK pour envoyer les affectations de responsableAdd a label, text input, and OK button to submit manager assignments

  1. Cliquez ou appuyez en dehors de la galerie sur laquelle vous travaillez.Click or tap outside the gallery you've been working on.

  2. Sous l’onglet Insérer, cliquez ou appuyez sur Étiquette.On the Insert tab, click or tap Label. Faites glisser l’étiquette au-dessous de la galerie, à gauche.Drag the label below the gallery, to the left. Définissez les propriétés suivantes de l’étiquette :Set the following properties for the label:

    • Propriété Size = 20Size property = 20

    • Propriété Text = « Responsable : »Text property = "Manager:"

    Étiquette Ajouter un responsable

  3. Sous l’onglet Insérer, cliquez ou appuyez sur Texte, puis sur Entrée de texte.On the Insert tab, click or tap Text, then Text input. Faites glisser l’entrée de texte sous la galerie, au centre.Drag the text input below the gallery, in the center. Définissez les propriétés suivantes de la liste déroulante :Set the following properties for the drop down:

    • Propriété Default = ""Default property = ""

    • Propriété Height = 60Height property = 60

    • Propriété Size = 20Size property = 20

    • Propriété Width = 250Width property = 250

    Ajouter une entrée de texte

  4. Sous l’onglet Insérer, cliquez ou appuyez sur Bouton.On the Insert tab, click or tap Button. Faites glisser le bouton au-dessous de la galerie, à droite.Drag the button below the gallery, to the right. Définissez les propriétés suivantes du bouton :Set the following properties for the button:

    • Propriété Height = 60Height property = 60

    • Propriété OnSelect = Patch('Project Details', LookUp('Project Details', ID = Gallery1.Selected.ID), {PMAssigned: TextInput1.Text}).OnSelect property = Patch('Project Details', LookUp('Project Details', ID = Gallery1.Selected.ID), {PMAssigned: TextInput1.Text}). Pour plus d’informations, consultez Présentation approfondie des formules.For more information, see Formula deep-dive.

    • Cette formule met à jour la liste Détails du projet, en définissant une valeur pour le champ PMAssigned.This formula updates the Project Details list, setting a value for the PMAssigned field.

    • Propriété Size = 20Size property = 20

    • Propriété Text = "OK"Text property = "OK"

    • Propriété Width = 80Width property = 80

    Ajouter un bouton OK

L’écran complété doit maintenant ressembler à l’image suivante.The completed screen should now look like the following image.

Écran Affecter un responsable terminé

Étape 5 : Créer l’écran ViewProjectsStep 5: Build the ViewProjects screen

Dans cette étape, vous allez modifier les propriétés de la galerie sur l’écran ViewProjects.In this step, we'll change properties for the gallery on the ViewProjects screen. Cette galerie affiche les éléments de la liste Détails du projet.This gallery displays items from the Project Details list. Sélectionnez un élément dans cet écran, puis modifiez les détails sur l’écran UpdateDetails.You select an item on this screen, then you edit the details on the UpdateDetails screen.

  1. Dans la barre de navigation de gauche, cliquez ou appuyez sur l’écran ViewProjects.In the left navigation bar, click or tap the ViewProjects screen.

  2. Définissez [Title] sur Afficher les projets.Change [Title] to "View Projects".

  3. Dans la barre de navigation de gauche, cliquez ou appuyez sur l’écran BrowserGallery1 sous ViewProjects.In the left navigation bar, click or tap BrowserGallery1 under ViewProjects.

  4. Sélectionnez Titre, sous-titre et corps dans le menu Disposition du volet de droite.Select Title, subtitle, and body from the Layout menu in the right pane.

    Changer la disposition de la galerie

    La galerie a maintenant la bonne disposition, avec l’exemple de texte par défaut.The gallery now has the right layout, with the default sample text.

    Galerie avec texte par défaut

  5. Sélectionnez le bouton d’actualisation Icône d’actualisation et définissez sa propriété OnSelect sur Refresh('Project Details').Select the refresh button Refresh icon, and set its OnSelect property to Refresh('Project Details').

  6. Sélectionnez le nouveau bouton d’élément Ajouter une nouvelle icône, puis définissez sa propriété OnSelect sur NewForm(EditForm1); Navigate(UpdateDetails, ScreenTransition.None).Select the new item button Add new icon, and set its OnSelect property to NewForm(EditForm1); Navigate(UpdateDetails, ScreenTransition.None).

Ajoutez une flèche Précédent pour revenir à l’écran SelectTask.Add a back arrow to return to the SelectTask screen

  1. Dans la barre de navigation de gauche, cliquez ou appuyez sur l’écran Affecter un responsable.In the left navigation bar, click or tap the AssignManager screen.

  2. Sélectionnez la flèche Précédent que vous avez ajoutée précédemment, puis copiez-la.Select the back arrow you added there, and copy it.

  3. Collez la flèche dans l’écran ViewProjects et placez-la à gauche du bouton Actualiser.Paste the arrow into the ViewProjects screen and position it to the left of the refresh button.

    Bouton Précédent

    Toutes les propriétés associées sont fournies, y compris la propriété OnSelect de Navigate(SelectTask, Fade).All its properties come along with it, including the OnSelect property of Navigate(SelectTask, Fade).

  1. Sélectionnez la galerie BrowseGallery1, puis définissez la propriété Items de la galerie sur SortByColumns(Filter('Project Details', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending)).Select the BrowseGallery1 gallery, and set the Items property of the gallery to SortByColumns(Filter('Project Details', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending)).

    Cela définit la source de données de la galerie sur la liste Détails du projet et utilise le champ Titre pour la recherche et le tri.This sets the data source of the gallery to the Project Details list, and uses the Title field for search and sort.

  2. Sélectionnez la flèche Détails dans le premier élément de galerie, puis définissez la propriété OnSelect sur Navigate(UpdateDetails, None).Select the Details arrow icon in the first gallery item, and set the OnSelect property to Navigate(UpdateDetails, None).

     <span data-ttu-id="df7d2-322">Afficher la galerie Projets - premier élément sélectionné</span><span class="sxs-lookup"><span data-stu-id="df7d2-322">View Projects gallery - first item selected</span></span>

  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:

    • StatusStatus

    • PMAssignedPMAssigned

    • TitleTitle

      Champs Galerie

      L’écran complété doit maintenant ressembler à l’image suivante.The completed screen should now look like the following image.

      Afficher l’écran Projet terminé

Étape 6 : Créer l’écran UpdateDetailsStep 6: Build the UpdateDetails screen

Dans cette étape, vous allez connecter le formulaire de modification sur l’écran UpdateDetails à la source de données, puis apporter quelques modifications aux propriétés et champs.In this step, we'll connect the edit form on the UpdateDetails screen to our data source, and we'll make some property and field changes. Dans cet écran, vous pouvez modifier les détails d’un projet que vous avez sélectionné sur l’écran Afficher les projets.On this screen, you edit details for a project that you selected on the View Projects screen.

  1. Dans la barre de navigation de gauche, cliquez ou appuyez sur l’écran UpdateDetails.In the left navigation bar, click or tap the UpdateDetails screen.

  2. Définissez [Title] sur Mettre à jour les détails.Change [Title] to "Update Details".

  3. Dans la barre de navigation de gauche, cliquez ou appuyez sur EditForm1 sous UpdateDetails.In the left navigation bar, click or tap EditForm1 under UpdateDetails.

  4. Définissez les propriétés suivantes du formulaire :Set the following properties for the form:

    • Propriété DataSource = 'Project Details'DataSource property = 'Project Details'

    • Propriété Item = BrowseGallery1.SelectedItem property = BrowseGallery1.Selected

  5. Le formulaire étant toujours sélectionné, dans le volet de droite, cliquez ou appuyez sur la case à cocher pour les champs suivants, dans l’ordre indiqué :With the form still selected, in the right pane click or tap the checkbox for the following fields, in the order shown:

    • TitleTitle

    • PMAssignedPMAssigned

    • StatusStatus

    • ProjectedStartDateProjectedStartDate

    • ProjectedEndDateProjectedEndDate

    • ProjectedDaysProjectedDays

    • ActualDaysActualDays

      Modifier les champs du formulaire

  6. Sélectionnez le bouton d’annulation Icône d’annulation et définissez sa propriété OnSelect sur ResetForm(EditForm1); Back().Select the cancel button Cancel icon, and set its OnSelect property to ResetForm(EditForm1); Back().

  7. Sélectionnez le bouton d’enregistrement icône de coche Enregistrer et vérifiez la formulaire OnSelect - SubmitForm(EditForm1).Select the save button Checkmark save icon and check out the OnSelect formula - SubmitForm(EditForm1). Étant donné que vous utilisez le contrôle de formulaire de modification, vous pouvez utiliser Submit(), au lieu de Patch() comme vous l’aviez fait précédemment.Because we're using the edit form control, we can use Submit(), instead of using Patch() like we did earlier.

L’écran terminé doit maintenant ressembler à l’image suivante (si les champs sont vides, veillez à sélectionner un élément sur l’écran Afficher les projets).The completed screen should now look like the following image (if the fields are blank, make sure you select an item on the View Projects screen).

Écran Mettre à jour les détails terminé

Étape 7 : Exécuter l’applicationStep 7: Run the app

Maintenant que l’application est terminée, exécutez-la pour voir comment elle fonctionne.Now that the app is complete, let's run it to see how it works. Vous allez ajouter un lien sur le site SharePoint vers l’application.We'll add a link on the SharePoint site to the app. Vous pouvez exécuter l’application dans le navigateur, mais vous devrez peut-être la partager pour que d’autres personnes puisse l’exécuter.You will be able to run the app in the browser, but you might need to share the app for other people to run it. Pour plus d’informations, consultez Partager vos applications.For more information, see Share your apps.

  1. Dans le lanceur d’applications Office 365, cliquez ou appuyez sur PowerApps.In the Office 365 app launcher, click or tap PowerApps.

    PowerApps dans le lanceur d’applications Office 365

  2. Dans PowerApps, cliquez ou appuyez sur les points de suspension (... ) correspondant à Application Gestion de projet, puis sur Ouvrir.In PowerApps, click or tap the ellipsis (. . .) for Project Management app, then Open.

    Sélectionner l’application Gestion de projet

  3. Copiez l’adresse (URL) de l’application dans le navigateur.Copy the address (URL) for the app in the browser.

    Copier l’URL de l’application

  4. Dans SharePoint, cliquez ou appuyez sur MODIFIER LES LIENS.In SharePoint, click or tap EDIT LINKS.

    Modifier les liens du site SharePoint

  5. Cliquez ou appuyez sur le lien (+).Click or tap (+) link.

    Ajouter un lien vers l’application au site SharePoint

  6. Entrez « Application Gestion de projet » et collez l’adresse de l’application.Enter "Project Management app", and paste in the address for the app.

    Modifier les propriétés de lien

  7. Cliquez ou appuyez sur OK, puis sur Enregistrer.Click or tap OK, then Save.

    Enregistrer les modifications apportées au lien

Affecter un responsable à un projetAssign a manager to a project

Maintenant que l’application est disponible dans votre site SharePoint, prenez le rôle d’approbateur de projet, passez en revue les projets qui n’ont pas de responsable et affectez un responsable à un des projets.Now that we have the app in our SharePoint site, we'll assume the role of the project approver - we'll look for any projects that don't have a manager assigned, and assign a manager to one of the projects. Jouez ensuite le rôle du responsable de projet et ajoutez des informations relatives à un projet qui vous est affecté.Then we'll assume the role of the project manager, and add some information about a project that is assigned to us.

  1. Tout d’abord, examinez la liste Détails du projet dans SharePoint.First, let's look at the Project Details list in SharePoint. Deux projets ont la valeur Unassigned dans la colonne PMAssigned.Two projects have a value of Unassigned in the PMAssigned column. Vous allez les voir dans l’application.We will see these in the app.

    Projets non affectés dans la liste SharePoint

  2. Cliquez ou appuyez sur le lien que vous avez créé vers l’application.Click or tap the link that you created to the app.

  3. Dans le premier écran, cliquez ou appuyez sur Affecter un responsable.On the first screen, click or tap Assign Manager.

    Écran de présentation d’application

  4. Dans l’écran Affecter un responsable, vous voyez les deux projets non affectés dans la liste.On the Assign Manager screen, you see the two unassigned projects from the list. Sélectionnez le projet New BI software (Nouveau logiciel d’informatique décisionnelle).Select the New BI software project.

    Galerie avec l’élément sélectionné

  5. Dans la zone de texte Responsable, entrez « Joni Sherman », puis cliquez sur OK.In the Manager text input, enter "Joni Sherman", then click OK.

    La modification est appliquée à la liste et la galerie s’actualise afin que seul le projet non affecté restant s’affiche.The change is applied to the list, and the gallery refreshes so only the remaining unassigned project is displayed.

    Affecter un responsable au projet

  6. Revenez à la liste SharePoint et actualisez la page.Go back to the SharePoint list and refresh the page. Vous voyez que l’entrée du projet est maintenant mise à jour avec le nom du responsable du projet.You'll see that the project entry is now updated with the project manager name.

    Responsable de projet affecté dans la liste SharePoint

Mettre à jour les détails du projetUpdate details for the project

  1. Cliquez ou appuyez sur icône Précédent pour revenir au premier écran, puis cliquez ou appuyez sur Mettre à jour les détails.Click or tap Back icon to go back to the first screen, then click or tap Update Details.

    Écran de présentation d’application

  2. Dans l’écran Afficher les projets, entrez « Nouveau » dans la zone de recherche.On the View Projects screen, enter "New" in the search box.

    Effectuer une recherche dans la galerie de l’application

  3. Cliquez sur icône de flèche Détails au niveau de l’élément New BI software (Nouveau logiciel d’informatique décisionnelle).Click Details arrow icon for the New BI software item.

    Élément de galerie sélectionné

  4. Dans l’écran Mettre à jour les détails, définissez les valeurs suivantes :On the Update Details screen, set the following values:

    • Champ ProjectedStartDate = « 3/6/2017 »The ProjectedStartDate field = "3/6/2017"

    • Champ ProjectedEndDate = « 3/24/2017 »The ProjectedEndDate field = "3/24/2017"

    • Champ ProjectedDays = « 25 »The ProjectedDays field = "15"

    Mettre à jour les détails de l’élément

  5. Cliquer ou appuyerClick or tap icône en forme de coche pour appliquer la modification à la liste SharePoint.to apply the change to the SharePoint list.

  6. Fermez l’application et revenez à la liste.Close the app, and go back to the list. Vous voyez que l’entrée du projet est maintenant mise à jour avec le changement de date et de jour.You see that the project entry is now updated with the date and day changes.

    Liste SharePoint mise à jour

Présentation approfondie des formulesFormula deep-dive

Il s’agit de la deuxième section facultative sur les formules PowerApps.This is the second optional section on PowerApps formulas. Dans la première présentation détaillée, nous avons vu une des formules que PowerApps génère pour la galerie de navigation dans une application contenant trois écrans.In the first deep-dive, we looked at one of the formulas that PowerApps generates for the browse gallery in a three-screen app. Dans cette présentation détaillée, nous allons nous intéresser à une formule utilisée pour l’écran AssignManager de la deuxième application.In this deep-dive, we'll look at a formula that we use for the AssignManager screen of our second app. Voici la formule :Here's the formula:

Patch ( 'Project Details', LookUp ( 'Project Details', ID = Gallery1.Selected.ID ), {PMAssigned: TextInput1.Text} )Patch ( 'Project Details', LookUp ( 'Project Details', ID = Gallery1.Selected.ID ), {PMAssigned: TextInput1.Text} )

Quelle est l’utilité de cette formule ?What does this formula do? Lorsque vous sélectionnez un élément dans la galerie et cliquez sur le bouton OK, la formule met à jour la liste Détails du projet, en définissant la colonne PMAssigned sur la valeur que vous spécifiez dans le texte d’entrée.When you select an item in the gallery and click the OK button, the formula updates the Project Details list, setting the PMAssigned column to the value that you specify in the text input. La formule utilise des fonctions :The formula uses functions to do its work:

  • La fonction Patch modifie un ou plusieurs enregistrements d’une source de données.The Patch function modifies one or more records of a data source.

  • La fonction LookUp recherche le premier enregistrement d’une table qui répond à une formule.The LookUp function finds the first record in a table that satisfies a formula.

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. Lorsque vous cliquez sur le bouton OK, la fonction Patch est appelée pour mettre à jour la liste Détails du projet.When you click the OK button, the Patch function is called to update the Project Details list.

  2. Dans la fonction Patch, la fonction LookUp identifie quelle ligne mettre à jour dans la liste Détails du projet.Within the Patch function, the LookUp function identifies which row of the Project Details list to update. Pour cela, elle compare l’ID de l’élément de galerie sélectionné avec l’ID de la liste.It does this by comparing the ID of the selected gallery item to the ID in the list. Par exemple, un ID défini sur 12 signifie que l’entrée correspondant à New BI software (Nouveau logiciel d’informatique décisionnelle) doit être mise à jour.For example, an ID of 12 means that the entry for New BI software should be updated.

  3. Maintenant que la fonction Patch a le bon ID, elle met à jour le champ PMAssigned sur la valeur TextInput1.Text.Now that the Patch function has the right ID, it updates the PMAssigned field to the value in TextInput1.Text.

Étapes suivantesNext steps

L’étape suivante de cette série de tutoriels consiste à créer un rapport Power BI pour analyser des projets.The next step in this tutorial series is to create a Power BI report to analyze projects.