Créer une application canevas pour gérer des projets

Notes

Cet article fait partie d’une série de didacticiels sur l’utilisation Power Apps, Power Automate, et Power BI 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.

Dans cette tâche, nous allons générer une application canevas de bout en bout. Cette application permet à un utilisateur d’affecter un responsable à des projets et de mettre à jour les détails du projet. 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. Le processus est plus complexe, mais vous allez en apprendre plus et nous pensons qu’il s’agit d’un bon compromis.

Aperçu rapide de Power Apps Studio

Power Apps 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 :

  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 écrans
  2. Le volet central, qui contient l’écran d’application sur lequel vous travaillez
  3. Le volet de droite, qui vous permet de définir des options telles que la disposition et les sources de données
  4. La liste déroulante des propriétés, qui vous permet de sélectionner les propriétés auxquelles des formules s’appliquent
  5. La barre de formule, qui permet d’ajouter des formules (comme dans Excel) définissant le comportement de l’application
  6. Le ruban, qui permet d’ajouter des contrôles et de personnaliser des éléments de conception

Power Apps Studio.

Étape 1 : Créer des écrans

Après cette petite révision, vous pouvez commencer à générer une application.

Créer l’application

Créez une application canevas vierge avec la disposition Téléphone et le nom « Project Management app ».

Ajouter quatre écrans à l’application

Lors de cette étape, vous allez créer quatre écrans vides pour l’application. Vous allez utiliser différentes dispositions d’écran en fonction de l’objectif de l’écran. Vous ajouterez des informations à ces écrans dans les étapes suivantes.

Écran Objectif
SelectTask Écran d’ouverture qui permet d’accéder aux autres écrans
AssignManager Permet d’attribuer un responsable à un projet approuvé
ViewProjects Permet d’afficher la liste des projets, avec des informations récapitulatives
UpdateDetails Permet d’afficher et de mettre à jour les détails d’un projet
  1. Sous l’onglet Accueil, cliquez ou appuyez sur Nouvel écran, puis sur Écran avec défilement.

    Écran avec défilement.

  2. Renommez l’écran en SelectTask.

    Renommer l’écran.

  3. Créez et renommez les autres écrans :

    1. Cliquez ou appuyez sur Nouvel écran, puis sur Écran avec défilement. Renommez l’écran en AssignManager.
    2. Cliquez ou appuyez sur Nouvel écran, puis sur Écran Liste. Renommez l’écran en ViewProjects.
    3. Cliquez ou appuyez sur Nouvel écran, puis sur Écran Formulaire. Renommez l’écran en UpdateDetails.
  4. Sélectionnez les points de suspension (...) à côté de Screen1, puis cliquez ou appuyez sur Supprimer.

    Supprimer l’écran.

L’application doit maintenant ressembler à l’image suivante.

Tous les écrans de l’application.

Étape 2 : Se connecter à une liste créée à l’aide de Listes Microsoft

Dans cette étape, vous allez vous connecter à la liste Détails du projet. Vous n’utilisez qu’une seule liste dans cette application, mais vous pouvez vous connecter facilement à deux listes si vous souhaitez étendre l’application.

  1. Dans la barre de navigation de gauche, cliquez ou appuyez sur l’écran SelectTask.

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

    Se connecter aux données.

  3. Cliquez ou appuyez sur Nouvelle connexion.

    Nouvelle connexion.

  4. Cliquez ou appuyez sur SharePoint.

    Connexion SharePoint.

  5. Sélectionnez Se connecter directement (services cloud), puis cliquez ou appuyez sur Ajouter une connexion.

    Se connecter directement (services cloud).

  6. Entrez une URL SharePoint, puis cliquez ou appuyez sur Atteindre.

    URL SharePoint de connexion.

  7. Sélectionnez la liste Détails du projet, puis cliquez ou appuyez sur Se connecter.

    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.

    Onglet Sources de données.

Étape 3 : Créer l’écran SelectTask

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

Mettre à jour le titre et insérer le texte d’introduction

  1. Dans la barre de navigation de gauche, sélectionnez l’écran SelectTask.

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

    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.

    Ajouter une étiquette.

  4. Dans la barre de formule, définissez les propriétés suivantes de l’étiquette :

    • Propriété Color = DarkGray

    • Propriété Size = 18

    • Propriété Text = « Cliquez ou appuyez sur une tâche pour continuer... »

      Mettre à jour le texte de l’étiquette.

Ajouter deux boutons de navigation

  1. Sous l’onglet Insérer, cliquez ou appuyez sur Bouton, puis faites glisser le bouton sous l’étiquette.

    Bouton Ajouter.

  2. Dans la barre de formule, définissez les propriétés suivantes du bouton :

    • Propriété OnSelect = 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.

    • Propriété Text = « Affecter un responsable »

  3. Redimensionnez le bouton pour l’adapter au texte.

    Bouton Redimensionner.

  4. Insérez un autre bouton avec les propriétés suivantes :

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

    • Propriété Text = « Mettre à jour les détails »

      Mettre à jour le texte du bouton.

      Notes

      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.

Exécuter l’application

L’application n’a pas beaucoup de fonctionnalités pour l’instant, mais vous pouvez l’exécuter si vous le souhaitez :

  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 Power Apps Studio).

  2. Cliquez ou appuyez Icône Exécuter l’application. dans l’angle supérieur droit pour exécuter l’application.

  3. Cliquez ou appuyez sur un des boutons pour accéder à un autre écran.

  4. Cliquez ou appuyez Icône Fermer l’aperçu de l’application. dans l’angle supérieur droit pour fermer l’application.

Étape 4 : Créer l’écran AssignManager

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. Vous allez ajouter d’autres contrôles qui permettent d’affecter un responsable.

Notes

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.

  1. Enregistrez les modifications que vous avez apportées jusqu’à présent.

  2. Dans la barre de navigation de gauche, cliquez ou appuyez sur l’écran Affecter un responsable.

Mettre à jour le titre et insérer le texte d’introduction

  1. Définissez [Title] sur Affecter un responsable.

  2. Ajoutez une étiquette avec les propriétés suivantes :

    • Propriété Color = DarkGray

    • Propriété Size = 18

    • Propriété Text = « Sélectionnez un projet, puis affectez un responsable »

      Disposition Affecter un responsable.

Ajoutez une flèche Précédent pour revenir à l’écran SelectTask.

  1. Cliquez ou appuyez sur la barre bleue en haut de l’écran.

  2. Sous l’onglet Insérer, cliquez ou appuyez sur Icônes, puis sur Gauche.

    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 :

    • Propriété Color = White

    • Propriété Height = 40

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

    • Propriété Width = 40

      Ajouter un bouton Précédent.

  1. Sous l’onglet Insérer, cliquez ou appuyez sur Galerie, puis sur Vertical.

    Ajouter une galerie verticale.

  2. Sélectionnez Titre, sous-titre et corps dans le menu Disposition du volet de droite.

    Changer la disposition de la galerie.

    La galerie a maintenant la bonne disposition, mais elle contient toujours l’exemple de texte par défaut. Nous allons résoudre cela.

    Galerie avec texte par défaut.

  3. Définissez les propriétés suivantes de la galerie :

    • Propriété BorderThickness = 1

    • Propriété BorderStyle = Dotted

    • Propriété Items = Filter(’Project Details’, PMAssigned="Unassigned"). Seuls les projets sans responsable sont inclus dans la galerie.

      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 :

    • ApprovedDate

    • **Statut **

    • Titre

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

    Supprimer l’icône de flèche.

    L’écran doit maintenant ressembler à l’image suivante.

    Galerie mise en forme.

Modifier la couleur d’un élément sélectionné

  1. Sélectionnez la galerie, puis définissez la propriété TemplateFill sur If (ThisItem.IsSelected=true, Orange, White).

  2. Sélectionnez un élément dans la galerie. L’écran doit maintenant ressembler à l’image suivante.

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

Ajouter une étiquette, du texte et le bouton OK pour envoyer les affectations de responsable

  1. Cliquez ou appuyez en dehors de la galerie sur laquelle vous travaillez.

  2. Sous l’onglet Insérer, cliquez ou appuyez sur Étiquette. Faites glisser l’étiquette au-dessous de la galerie, à gauche. Définissez les propriétés suivantes de l’étiquette :

    • Propriété Size = 20

    • Propriété Text = « Responsable : »

    Étiquette Ajouter un responsable.

  3. Sous l’onglet Insérer, cliquez ou appuyez sur Texte, puis sur Saisie de texte. Faites glisser la saisie de texte sous la galerie, au centre. Définissez les propriétés suivantes de la liste déroulante :

    • Propriété Default = ""

    • Propriété Height = 60

    • Propriété Size = 20

    • Propriété Width = 250

    Ajouter une saisie de texte.

  4. Sous l’onglet Insérer, cliquez ou appuyez sur Bouton. Faites glisser le bouton au-dessous de la galerie, à droite. Définissez les propriétés suivantes du bouton :

    • Propriété Height = 60

    • Propriété OnSelect = Patch(’Project Details’, LookUp(’Project Details’, ID = Gallery1.Selected.ID), {PMAssigned: TextInput1.Text}). Pour plus d’informations, consultez Présentation approfondie des formules.

    • Cette formule met à jour la liste Détails du projet, en définissant une valeur pour le champ PMAssigned.

    • Propriété Size = 20

    • Propriété Text = "OK"

    • Propriété Width = 80

    Ajouter un bouton OK.

L’écran complété doit maintenant ressembler à l’image suivante.

Écran Affecter un responsable terminé.

Étape 5 : Créer l’écran ViewProjects

Dans cette étape, vous allez modifier les propriétés de la galerie sur l’écran ViewProjects. Cette galerie affiche les éléments de la liste Détails du projet. Sélectionnez un élément dans cet écran, puis modifiez les détails sur l’écran UpdateDetails.

  1. Dans la barre de navigation de gauche, cliquez ou appuyez sur l’écran ViewProjects.

  2. Définissez [Title] sur Afficher les projets.

  3. Dans la barre de navigation de gauche, cliquez ou appuyez sur l’écran BrowserGallery1 sous ViewProjects.

  4. Sélectionnez Titre, sous-titre et corps dans le menu Disposition du volet de droite.

    Changer la disposition de la galerie.

    La galerie a maintenant la bonne disposition, avec l’exemple de texte par défaut.

    Galerie avec la bonne disposition.

  5. Sélectionnez le bouton d’actualisation Icône d’actualisation. et définissez sa propriété OnSelect sur 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).

Ajoutez une flèche Précédent pour revenir à l’écran SelectTask.

  1. Dans la barre de navigation de gauche, cliquez ou appuyez sur l’écran Affecter un responsable.

  2. Sélectionnez la flèche Précédent que vous avez ajoutée précédemment, puis copiez-la.

  3. Collez la flèche dans l’écran ViewProjects et placez-la à gauche du bouton Actualiser.

    Bouton Précédent.

    Toutes les propriétés associées sont fournies, y compris la propriété OnSelect de 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)).

    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.

  2. Cliquez sur Icône de flèche Détails. dans le premier élément de la galerie et définissez la propriété OnSelect sur Navigate(UpdateDetails, None).

     Afficher la galerie Projets - premier élément sélectionné.

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

    • **Statut **

    • PMAssigned

    • Titre

      Champs de la galerie.

      L’écran complété doit maintenant ressembler à l’image suivante.

      Afficher l’écran Projet terminé.

Étape 6 : Créer l’écran UpdateDetails

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. Dans cet écran, vous pouvez modifier les détails d’un projet que vous avez sélectionné sur l’écran Afficher les projets.

  1. Dans la barre de navigation de gauche, cliquez ou appuyez sur l’écran UpdateDetails.

  2. Définissez [Title] sur Mettre à jour les détails.

  3. Dans la barre de navigation de gauche, cliquez ou appuyez sur EditForm1 sous UpdateDetails.

  4. Définissez les propriétés suivantes du formulaire :

    • Propriété DataSource = ’Project Details’

    • Propriété Item = 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é :

    • Titre

    • PMAssigned

    • Statut

    • ProjectedStartDate

    • ProjectedEndDate

    • ProjectedDays

    • ActualDays

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

  7. Cliquez sur le bouton d’enregistrement Icône de coche Enregistrer. et vérifiez la formule OnSelect - SubmitForm(EditForm1). Étant donné que vous utilisez le contrôle Modifier le formulaire, vous pouvez utiliser Submit(), au lieu de Patch() comme vous l’aviez fait précédemment.

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

Écran Mettre à jour les détails terminé.

Étape 7 : Exécuter l’application

Maintenant que l’application est terminée, exécutez-la pour voir comment elle fonctionne. Vous allez ajouter un lien sur le site SharePoint vers l’application. 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. Pour plus d’informations, consultez Partager votre application.

  1. Dans le lanceur d’application Office 365, cliquez ou appuyez sur Power Apps.

    Lanceur d’application Power Apps dans Office 365.

  2. Dans Power Apps, cliquez ou appuyez sur les points de suspension (...) correspondant à Application Gestion de projet, puis sur Ouvrir.

    Sélectionner l’application Gestion de projet.

  3. Copiez l’adresse (URL) de l’application dans le navigateur.

    Copier l’URL de l’application.

  4. Dans SharePoint, cliquez ou appuyez sur MODIFIER LES LIENS.

    Modifier les liens vers le site SharePoint.

  5. Cliquez ou appuyez sur le (+) lien.

    Ajouter un lien d’application vers le site SharePoint.

  6. Entrez « Application Gestion de projet » et collez l’adresse de l’application.

    Modifier les propriétés de lien.

  7. Cliquez ou appuyez sur OK, puis sur Enregistrer.

    Enregistrer les modifications apportées au lien.

Affecter un responsable à un projet

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. Jouez ensuite le rôle du responsable de projet et ajoutez des informations relatives à un projet qui vous est affecté.

  1. Tout d’abord, examinez la liste Détails du projet dans SharePoint. Deux projets ont la valeur Unassigned dans la colonne PMAssigned. Vous allez les voir dans l’application.

    Projets non affectés dans la liste.

  2. Cliquez ou appuyez sur le lien que vous avez créé vers l’application.

  3. Dans le premier écran, cliquez ou appuyez sur Affecter un responsable.

    Écran de présentation d’application.

  4. Dans l’écran Affecter un responsable, vous voyez les deux projets non affectés dans la liste. Sélectionnez le projet New BI software.

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

  5. Dans la zone de texte Responsable, entrez « Joni Sherman », puis cliquez sur OK.

    La modification est appliquée à la liste et la galerie s’actualise afin que seul le projet non affecté restant s’affiche.

    Attribuer un responsable au projet.

  6. Revenez à la liste et actualisez la page. Vous voyez que l’entrée du projet est maintenant mise à jour avec le nom du responsable du projet.

    Responsable de projet affecté dans la liste.

Mettre à jour les détails du projet

  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.

    Mettre à jour les détails.

  2. Dans l’écran Afficher les projets, entrez « Nouveau » dans la zone de recherche.

    Effectuer une recherche dans la galerie de l’application.

  3. Cliquez sur l’icône de flèche Détails. au niveau de l’élément New BI software.

    Élément de galerie sélectionné.

  4. Dans l’écran Mettre à jour les détails, définissez les valeurs suivantes :

    • Champ ProjectedStartDate = « 3/6/2017 »

    • Champ ProjectedEndDate = « 3/24/2017 »

    • Champ ProjectedDays = « 15 »

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

  5. Cliquez ou appuyez Icône en forme de coche. pour appliquer la modification à la liste.

  6. Fermez l’application et revenez à la liste. Vous voyez que l’entrée du projet est maintenant mise à jour avec le changement de date et de jour.

    Liste mise à jour.

Présentation approfondie des formules

Il s’agit de la deuxième section facultative sur les formules Power Apps. Dans la première présentation détaillée, nous avons vu une des formules que Power Apps génère pour la galerie de navigation dans une application contenant trois écrans. 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. Voici la formule :

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

Quelle est l’utilité de cette formule ? 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. La formule utilise des fonctions :

  • La fonction Patch modifie un ou plusieurs enregistrements d’une source de données.

  • La fonction LookUp recherche le premier enregistrement d’une table qui répond à une formule.

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

  1. Lorsque vous cliquez sur le bouton OK, la fonction Patch est appelée pour mettre à jour la liste Détails du projet.

  2. Dans la fonction Patch, la fonction LookUp identifie quelle ligne mettre à jour dans la liste Détails du projet. Pour cela, elle compare l’ID de l’élément de galerie sélectionné avec l’ID de la liste. Par exemple, un ID défini sur 12 signifie que l’entrée correspondant à New BI software doit être mise à jour.

  3. Maintenant que la fonction Patch a le bon ID, elle met à jour le champ PMAssigned sur la valeur TextInput1.Text.

Étapes suivantes

L’étape suivante de cette série de tutoriels consiste à créer un état Power BI pour analyser des projets.

Voir aussi

Notes

Pouvez-vous nous indiquer vos préférences de langue pour la documentation ? Répondez à un court questionnaire. (veuillez noter que ce questionnaire est en anglais)

Le questionnaire vous prendra environ sept minutes. Aucune donnée personnelle n’est collectée (déclaration de confidentialité).