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.

Dans cette tâche, vous allez générer une application à partir de zéro. 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.

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

Revue rapide de 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. Vous pouvez continuer à travailler dans PowerApps Studio pour le web ou vous pouvez utiliser PowerApps Studio pour 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 :

  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

PowerApps Studio

Étape 1 : Créer des écrans

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

Créer et enregistrer l’application

  1. Dans PowerApps Studio, cliquez ou appuyez sur Nouveau, puis sous Application vide, cliquez ou appuyez sur Mode téléphone.

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

    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.

    Enregistrer dans le cloud

  4. Cliquer ou appuyer icône Revenir à l’application pour revenir à l’application.

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 SharePoint

Dans cette étape, vous allez vous connecter à la liste SharePoint Détails du produit. 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 de connexion à SharePoint

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

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.

    Mettre à jour le texte du bouton

  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

    Remarque : 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 PowerApps Studio).

  2. Cliquer ou appuyer 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. Cliquer ou appuyer 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.

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

Ajouter et modifier une galerie

  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
    • Status
    • Title

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

    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 Entrée de texte. Faites glisser l’entrée 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 entrée 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 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').

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

Modifier la source de données de la galerie BrowseGallery1

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

     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 :

    • Status
    • PMAssigned
    • Title

    Champs 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é :

    • Title
    • PMAssigned
    • Status
    • 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. Sélectionnez le bouton d’enregistrement icône de coche Enregistrer et vérifiez la formulaire OnSelect - 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.

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

Ajouter un lien vers l’application

  1. Dans le lanceur d’applications Office 365, cliquez ou appuyez sur 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.

    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 du site SharePoint

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

    Ajouter un lien vers l’application au 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 SharePoint

  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 (Nouveau logiciel d’informatique décisionnelle).

    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.

    Affecter un responsable au projet

  6. Revenez à la liste SharePoint 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 SharePoint

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.

    Écran de présentation d’application

  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 icône de flèche Détails au niveau de l’élément New BI software (Nouveau logiciel d’informatique décisionnelle).

    É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 = « 25 »

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

  5. Cliquer ou appuyer icône en forme de coche pour appliquer la modification à la liste SharePoint.

  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 SharePoint mise à jour

Présentation approfondie des formules

Il s’agit de la deuxième section facultative sur les formules PowerApps. 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. 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 (Nouveau logiciel d’informatique décisionnelle) 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 rapport Power BI pour analyser des projets.