Création d’une application à partir de SharePointCreating an app from SharePoint

Générez une application à trois écrans à partir d’une liste SharePoint, puis explorez les écrans et contrôles à partir de l’application.Generate a three screen app from a SharePoint list, then explore screens and controls from the app. Mettez à jour les écrans, contrôles et champs de l’application, et utilisez des formules pour personnaliser davantage le comportement de celle-ci.Update app screens, controls, and fields; and use formulas to further customize app behavior.

Vous allez apprendre à...

Générer une applicationGenerate an app

Dans le cadre de cette section du cours, nous allons créer une application à partir d’une liste SharePoint nommée « Flooring Estimates ».In this section of the course, we'll create an app from a "Flooring Estimates" SharePoint list. L’application peut permettre, par exemple, à un estimateur visitant des sites de clients, de consulter la liste et de la tenir à jour.The app could be used by someone, such as an estimator out at customer sites, to refer to the list and keep it up-to-date. Dans la section Prise en main, nous vous avons montré comment générer une application à partir de la même liste. Dès lors, pourquoi y revenir ?In the Getting Started section, we showed you how to generate an app from the same list - so why look at it again? Tout d’abord, au lieu de démarrer dans PowerApps Studio, nous allons maintenant vous montrer comment PowerApps est intégré à SharePoint Online.First, instead of starting in PowerApps Studio, we now show you how PowerApps is integrated into SharePoint Online. Ensuite, nous allons examiner de plus près la manière dont l’application est assemblée, et montrer comment la personnaliser.Second, we dig deeper into how the app is put together, and show you how to customize it. Vous devez absolument acquérir de nouvelles informations au fil de cette section. Donc, allons-y !You'll definitely get some new information going through this section, so let's jump in!

Générer l’applicationGenerate the app

L’image suivante montre la liste SharePoint « Flooring Estimates » qui contient des informations de base, par exemple de nom et de prix, et une image pour chaque type de revêtement de sol.The following image shows the "Flooring Estimates" SharePoint list, which contains basic information like name and price, and an image for each flooring type. Vous pouvez voir comment PowerApps et Microsoft Flow sont désormais intégrés dans SharePoint Online, de sorte que vous pouvez facilement créer des applications et des flux à partir de vos listes.You can see how PowerApps and Microsoft Flow are now integrated into SharePoint Online, so you can easily build apps and flows from your lists.

Liste Flooring Estimates

Pour générer une application, cliquez sur PowerApps, puis sur Create an app.To build an app, click PowerApps, then Create an app. Dans le volet de droite, entrez un nom pour l’application, puis cliquez sur Create.In the right hand pane, enter a name for the app, then click Create. Après que vous avez cliqué sur Create, PowerApps commence à générer l’application.After you click Create, PowerApps starts to generate the app. PowerApps effectue toutes sortes d’inférences à partir de vos données afin de générer une application utile comme point de départ.PowerApps makes all sorts of inferences about your data so that it generates a useful app as a starting point.

Générer une application à partir d’une liste

Afficher l’application dans PowerApps StudioView the app in PowerApps Studio

Votre nouvelle application à trois écrans s’ouvre dans PowerApps Studio.Your new three-screen app opens in PowerApps Studio. Toutes les applications générées à partir de données contiennent les mêmes écrans :All apps generated from data have the same set of screens:

  • l’écran de navigation dans lequel vous pouvez parcourir, trier, filtrer et actualiser les données extraites de la liste, ainsi qu’ajouter des éléments en cliquant sur l’icône (+) ;The browse screen: where you browse, sort, filter, and refresh the data pulled in from the list, as well as add items by clicking the (+) icon.
  • l’écran de détails dans lequel vous pouvez consulter les détails d’un élément et choisir de supprimer ou de modifier celui-ci ;The details screen: where you view more detail about an item, and can choose to delete or edit the item.
  • 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.

Dans la barre de navigation à gauche, cliquez ou appuyez sur une icône dans l’angle supérieur droit pour basculer vers la vue miniature.In the left navigation bar, click or tap an icon in the upper-right corner to switch to the thumbnail view.

Activer/désactiver les vues

Cliquez ou appuyez sur chaque miniature pour afficher les contrôles sur cet écran.Click or tap each thumbnail to view the controls on that screen.

Application générée

Exécuter l’application en mode AperçuRun the app in preview mode

Cliquez ou appuyez surClick or tap Flèche Démarrer l’aperçu de application dans l’angle supérieur droit pour exécuter l’application.in the top-right corner to run the app. Si vous naviguez dans l’application, vous voyez que celle-ci inclut toutes les données de la liste et offre une bonne expérience par défaut.If you navigate through the app, you see that it includes all the data from the list and provides a good default experience.

Exécuter l’application en mode Aperçu

Ensuite, nous allons explorer l’application plus en détail, puis la personnaliser afin qu’elle corresponde mieux à vos besoins.Next we'll explore the app in more detail and later customize the app so it better suits our needs.

Explorer l’application généréeExplore a generated app

Cette rubrique examine de plus près l’application générée, en considérant les écrans et contrôles qui définissent le comportement de celle-ci.In this topic, we look more closely at the generated app - reviewing the screens and controls that define the app's behavior. Elle n’aborde pas tous les détails, mais le fait d’en savoir plus sur le fonctionnement de cette application vous aidera à générer vos propres applications.We won't go through all the details, but seeing more about how this app works will help you to build your own apps. L’une des rubriques suivantes traite des formules qui opèrent avec les écrans et contrôles.In a later topic, we'll look at the formulas that work with screens and controls.

Compréhension des contrôles dans PowerAppsUnderstanding controls in PowerApps

Un contrôle est simplement un élément d’interface utilisateur auquel des comportements sont associés.A control is simply a UI element that has behaviors associated with it. De nombreux contrôles dans PowerApps sont identiques à des contrôles que vous avez déjà utilisés dans d’autres applications : étiquettes, listes déroulantes, éléments de navigation, etc.Many controls in PowerApps are the same as controls that you've used in other apps: labels, text-input boxes, drop-down lists, navigation elements, and so on. Toutefois, PowerApps offre des contrôles plus spécialisé tels que Galleries (qui affiche les données de synthèse) et Forms (qui affiche des données détaillées et vous permet de créer et modifier des éléments).But PowerApps has more specialized controls like Galleries (which display summary data) and Forms (which display detail data and enable you to create and edit items). Il comprend également d’autres contrôles très appréciables tels que Image, Camera et Barcode.And also some other really cool controls like Image, Camera, and Barcode. Pour voir ce qui est disponible, cliquez ou appuyez sur Insérer dans le ruban, puis cliquez ou appuyez sur les options successives, de Texte à Icônes.To see what's available, click or tap Insert on the ribbon, and then click or tap each of the options in turn, Text through Icons.

Onglet Controls dans le ruban de PowerApps Studio

Explorer l’écran de navigationExplore the browse screen

Chacun des trois écrans de l’application comprend un contrôle principal et des contrôles supplémentaires.Each of the three app screens has a main control and some additional controls. Le premier écran est l’écran de navigation BrowseScreen1 par défaut.The first screen in the app is the browse screen, named BrowseScreen1 by default. Le contrôle principal de cet écran est une galerie nommée BrowseGallery1.The main control on this screen is a gallery named BrowseGallery1. La galerie BrowseGallery1 contient d’autres contrôles, tels que NextArrow1 (icône sur laquelle vous pouvez cliquer ou appuyer pour accéder à l’écran de détails).BrowseGallery1 contains other controls, like NextArrow1 (an icon control - click or tap it to go to the details screen). L’écran contient également des contrôles séparés, tels que IconNewItem1 (icône sur laquelle vous pouvez cliquer ou appuyer pour créer un élément dans l’écran de modification/création).There are also separate controls on the screen, like IconNewItem1 (an icon control - click or tap it to create an item in the edit/create screen).

Naviguer dans l’écran à l’aide de contrôles

PowerApps inclut divers types de galeries. Vous pouvez utiliser celui qui répond le mieux aux besoins de disposition de votre application.PowerApps has a variety of gallery types so you can use the one that best suits your app's layout requirements. D’autres façons de contrôler la disposition sont abordées plus loin dans cette section.You will see more ways to control layout later in this section.

Options de galerie PowerApps

Explorer l’écran de détailsExplore the details screen

Vient ensuite l’écran de détails, nommé DetailScreen1 par défaut.Next is the details screen, named DetailScreen1 by default. Le contrôle principal de cet écran est un formulaire d’affichage nommé DetailForm1.The main control on this screen is a display form named DetailForm1. Le formulaire DetailForm1 contient d’autres contrôles, tels que DataCard1 (contrôle de carte affichant la catégorie de revêtement de sol dans ce cas).DetailForm1 contains other controls, like DataCard1 (a card control, which displays the flooring category in this case). L’écran contient également des contrôles séparés, tels que IconEdit1 (icône sur laquelle vous pouvez cliquer ou appuyer pour modifier l’élément actif dans l’écran de modification/création).There are also separate controls on the screen like IconEdit1 (an icon control - click or tap it to edit the current item on the edit/create screen).

Écran de détails avec des contrôles

S’il existe un grand nombre d’options de galerie, les formulaires ne sont qu’au nombre de deux : le formulaire de modification et le formulaire d’affichage.There are lots of gallery options, but forms are more straightforward - it's either an edit form or a display form.

Options de formulaire de PowerApps

Explorer l’écran de modification/créationExplore the edit/create screen

Le troisième écran de l’application est l’écran de modification/création, nommé EditScreen1 par défaut.The third screen in the app is the edit/create screen, named EditScreen1 by default. Le contrôle principal de cet écran est un formulaire de modification nommé EditForm1.The main control on this screen is an edit form named EditForm1. Le formulaire EditForm1 contient d’autres contrôles, tels que DataCard8 (contrôle de carte permettant de modifier la catégorie de revêtement de sol dans ce cas).EditForm1 contains other controls, like DataCard8 (a card control, which allows you to edit the flooring category in this case). L’écran contient également des contrôles séparés, tels que IconAccept1 (icône sur laquelle vous pouvez cliquer ou appuyer pour enregistrer les modifications apportées dans l’écran de modification/création).There are also separate controls on the screen like IconAccept1 (an icon control - click or tap it to save the changes you made on the edit/create screen).

Écran de modification avec des contrôles

À présent que vous avez une idée des écrans et contrôles qui composent l’application, nous allons voir dans la rubrique suivante comment personnaliser celle-ci.Now that you have a sense of how the app is composed of screens and controls, we'll look at how you customize the app in the next topic.

Personnaliser l’applicationCustomize the app

Dans les deux premières rubriques de cette section, vous avez généré une application à partir d’une liste SharePoint, et exploré l’application pour mieux comprendre la composition des applications à trois écrans.In the first two topics in this section, you generated an app from a SharePoint list and explored the app to get a better understanding of how three screen apps are composed. L’application générée par PowerApps est utile, mais vous serez souvent amené à personnaliser une application après sa génération.The app that PowerApps generated is useful, but you will often customize an app after it's generated. Dans cette rubrique, nous allons voir quelques modifications de base pour chaque écran de l’application.In this topic, we'll walk through some basic changes for each screen in the app. Vous pouvez cependant personnaliser une application bien davantage, comme nous le verrons dans des rubriques ultérieures.There is a lot more you can do to customize an app - we'll get to that in later topics. En attendant, vous pouvez utiliser les connaissances que vous avez acquises dans cette rubrique.In the meantime, you can take what you learn in this topic and build on it. Prenez une application vous avec générée (à partir d’une liste, d’un fichier Excel ou d’une autre source), et voyez comment vous pouvez la personnaliser.Take any app you generate-from a list, an Excel file, or another source-and see how you can customize it. C’est vraiment le meilleur moyen de découvrir la manière dont les applications sont assemblées.It really is the best way to learn how apps are put together.

Écran de navigationBrowse screen

Nous allons commencer avec l’écran de navigation.We'll start with the browse screen. La liste SharePoint contient une image pour chaque produit, mais elle ne s’affiche pas par défaut.The SharePoint list contains an image for each product but the image isn't displayed by default. Corrigeons cela.Let's fix that. Dans le volet de droite, sous l’onglet Layout, sélectionnez une autre disposition pour l’écran de navigation.In the right-hand pane, on the Layout tab, select a different layout for the browse screen. Vous voyez immédiatement les résultats, car PowerApps met à jour l’application à mesure que vous la modifiez.You see the results right away because PowerApps updates the app as you make changes.

Modifier la disposition de l’écran de navigation

En partant de la disposition de base appropriée, modifiez les champs affichés.With the right basic layout, now change the fields that are displayed. Cliquez ou appuyez sur un champ dans le premier élément, puis, dans le volet de droite, modifiez les données qui s’affichent pour chaque élément.Click or tap a field in the first item, then in the right-hand pane, change the data that is displayed for each item. Cela produit un meilleur récapitulatif de chaque élément dans la liste.This provides a better summary of each item in the list.

Modifier les champs de l’écran de navigation

Écran de détailsDetails screen

Dans l’écran de détails, nous voulons modifier l’ordre des champs et afficher l’image.On the details screen, we want to change the order of the fields and display the image also. Cet écran comporte des contrôles différents, de sorte que le processus diffère légèrement de celui utilisé pour l’écran de navigation.There are different controls on this screen, so the process is a little different from the browse screen. Cliquez ou appuyez sur un champ, puis, dans le volet de droite, faites glisser le champ Title vers le haut.Click or tap a field, then in the right-hand pane, drag the Title field to the top. Ensuite, cliquez ou appuyez sur le champ Image pour l’afficher.Then click or tap the Image field to display it.

Modifier les champs de l’écran de détails

Écran de modification/créationEdit/create screen

Enfin, dans l’écran servant à modifier et créer des entrées, nous voulons modifier un champ afin de faciliter la saisie de texte.Finally, on the screen where you edit and create entries, we want to change a field so that it's easier to enter text. Cliquez ou appuyez sur la liste déroulante pour le champ Overview, puis cliquez ou appuyez sur le contrôle Edit Multi-line Text.Click or tap the drop-down list for the Overview field, and then click or tap the Edit Multi-line Text control.

Modifier les champs de l’écran de modification

Vous pouvez voir comment quelques opérations élémentaires permettent d’améliorer considérablement l’apparence et l’expérience utilisateur d’une application générée.You can see how a few basic steps can do a lot to improve the appearance and experience of using a generated app. Cette rubrique traite principalement de l’interface utilisateur de PowerApps Studio, qui offre de nombreuses options pour la personnalisation de vos applications.In this topic, we focused on the PowerApps Studio UI, which provides a lot of options for customizing your apps. La rubrique suivante traite des formules qui jouent un rôle important dans le comportement de l’application.In the next topic, we'll get into formulas, which play an important role in driving app behavior.

Explorer les formules de l’applicationExplore app formulas

L’un des principaux avantages de la solution PowerApps est qu’elle évite de devoir écrire du code d’application traditionnel, de sorte qu’il n’est nullement besoin d’être développeur pour créer des applications.One of the major benefits of PowerApps is not having to write traditional application code - you don't have to be a developer to create apps! En revanche, il faut toujours trouver un manière d’exprimer une logique au sein d’une application, ainsi que de contrôler la navigation, le filtrage, le tri et d’autres fonctionnalités de celle-ci.But you still need a way to express logic in an app and to control an app's navigation, filtering, sorting, and other functionality. C’est là que les formules entrent en jeu.This is where formulas come in. Si vous avez déjà utilisé des formules dans Excel, l’approche de PowerApps devrait sembler familière.If you have used Excel formulas, the approach that PowerApps takes should feel familiar. Cette rubrique présente quelques formules de base pour la mise en forme de texte, puis décrit en détail trois des formules que PowerApps inclut dans l’application générée.In this topic, we'll show a couple of basic formulas for text formatting and then walk through three of the formulas that PowerApps includes in the generated app. Elle vous permet de découvrir les possibilités qu’offrent les formules.You will get a taste of what formulas can do. Ensuite, vous pourrez consacrer un peu de temps à examiner d’autres formules dans l’application générée, voire à écrire vos propres formules.Then you can spend some time looking at other formulas in the generated app and writing your own.

Présentation des formules et propriétésUnderstanding formulas and properties

Dans la rubrique précédente, nous avons inclus le champ Prix dans la galerie de l’écran de navigation, mais il s’est affiché comme un simple nombre, sans symbole de devise.In the previous topic, we included the Price field in the browse screen gallery, but it showed up as a plain number without a currency symbol. Supposons que nous voulions ajouter le symbole de dollar et modifier la couleur du texte en fonction du coût de l’article (par exemple, rouge s’il est supérieur à 5 $, sinon vert).Suppose we want to add a dollar sign, and also change the text color depending on how much the item costs (for example red if it's more than $5, otherwise green). L’image suivante illustre l’idée.The following image shows the idea.

Mise en forme de la couleur et de la devise du texte

Commençons par la mise en forme de la devise.Let's start with the currency formatting. Par défaut, PowerApps récupère simplement la valeur Price de chaque élément, qui est définie comme étant la propriété Texte de l’étiquette qui affiche le prix.By default PowerApps just pulls in a Price value for each item, which is set as the Text property of the label that displays the price.

Mise en forme par défaut du prix

Pour ajouter le symbole de la devise des États-Unis, cliquez ou appuyez sur le contrôle d’étiquette puis, dans la barre de formule, définissez la propriété Text sur cette formule.To add the US currency symbol, click or tap the label control, and in the formula bar set the Text property to this formula.

Mise en forme de la devise du prix

La formule Text(Price, "[$-en-US]$ ##.00" utilise la fonction Texte pour spécifier la mise en fore du nombre.The formula - Text(Price, "[$-en-US]$ ##.00" uses the Text function to specify how the number should be formatted. La formule ressemble à une formule Excel, mais les formules PowerApps font référence à des contrôles et à d’autres éléments d’application plutôt qu’à des cellules d’une feuille de calcul.The formula is like an Excel formula, but PowerApps formulas refer to controls and other app elements rather than cells in a spreadsheet. Si vous cliquez ou appuyez sur un contrôle, puis cliquez ou appuyez sur la liste déroulante des propriétés, la liste des propriétés pertinentes pour le contrôle s’affiche.If you click or tap a control and then click or tap the property drop down list, you see a list of properties that are relevant to the control. Par exemple, voici une liste partielle des propriétés d’une étiquette.For example, here is a partial list of the properties for a label. Certaines propriétés sont pertinentes pour un vaste éventail de contrôles, et d’autres pour un seul contrôle.Some properties are relevant across a broad range of controls and others only for a specific control.

Définition des propriétés

Pour définir une mise en forme conditionnelle de la couleur en fonction du prix, utilisez une formule telle que celle-ci pour la propriété Color de l’étiquette : If(Price > 5, Color.Red, Color.Green).To format the color conditionally based on the price, use a formula like the following for the Color property of the label: If(Price > 5, Color.Red, Color.Green).

Mise en forme de la couleur du prix

Formules incluses dans l’application généréeFormulas included in the generated app

À présent que vous savez comment utiliser des formules avec des propriétés, nous allons examiner trois exemples de formules que PowerApps utilise dans l’application générée.Now that you understand how to use formulas in conjunction with properties, we'll look at three examples of formulas that PowerApps uses in the generated app. Les exemples ont tous trait à l’écran de navigation, et fonctionnent avec la propriété OnSelect qui définit ce qui se produit quand un utilisateur clique ou appuie sur un contrôle d’application.The examples are all from the browse screen and work with the OnSelect property, which defines what happens when a user clicks or taps an app control.

  • La première formule est associée au contrôle IconNewItem1 : icône Nouvel élément.The first formula is associated with the IconNewItem1 control: New item icon. Vous cliquez ou appuyez sur ce contrôle pour passer de l’écran de navigation à l’écran de modification/création afin de créer un élément.You click or tap this control to go from the browse screen to the edit/create screen and create an item.

    • La formule est NewForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None)The formula is NewForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None)
    • La formule instancie un nouveau formulaire de modification, puis accède à l’écran de modification/création dans lequel vous pouvez créer un élément.The formula instantiates a new edit form and then navigates to the edit/create screen so that you can create a new item. Si la valeur définie est ScreenTransition.None, il n’y a pas de transition (par exemple, un fondu) entre les écrans.A value of ScreenTransition.None means there is no transition between screens (such as a fade).
  • La deuxième formule est associée au contrôle IconSortUpDown1 : icône Trier la galerie.The second formula is associated with the IconSortUpDown1 control: Sort gallery icon. Vous cliquez ou appuyez sur ce contrôle pour trier la liste des éléments de la galerie affichée sur l’écran de navigation.You click or tap this control to sort the list of items in the browse screen gallery.

    • La formule est UpdateContext({SortDescending1: !SortDescending1})The formula is UpdateContext({SortDescending1: !SortDescending1})
    • La formule utilise UpdateContext pour mettre à jour une variable nommée SortDescending1.The formula uses UpdateContext to update a variable called SortDescending1. La valeur de la variable alterne quand vous cliquez sur le contrôle.The value of the variable switches back and forth as you click the control. Cela détermine le mode de tri des éléments de la galerie affichée sur l’écran (pour en savoir plus, regarder la vidéo).This tells the gallery on this screen how to sort the items (watch the video for more details).
  • La formule tiers est associée au contrôle NextArrow1 : icône de flèche Accéder aux détails.The third formula is associated with the NextArrow1 control: Go to details arrow icon. Vous cliquez ou appuyez sur ce contrôle pour passer de l’écran de navigation à l’écran de détails.You click or tap this control to go from the browse screen to the details screen.

    • La formule est Navigate(DetailScreen1, ScreenTransition.None)The formula is Navigate(DetailScreen1, ScreenTransition.None)
    • La formule permet d’accéder sans transition à l’écran de détails.The formula navigates to the details screen, again with no transition.

Il existe de nombreuses autres formules dans l’application. Nous vous invitons à prendre le temps de cliquer sur les contrôles pour voir les formules définies pour les différentes propriétés.There are many other formulas in the app, so take some time to click on controls and see what formulas are set for various properties.

ConclusionWrapping it all up

Cela nous amère à conclure l’exploration de l’application générée et à découvrir les coulisses des écrans, contrôles, propriétés et formules qui confèrent à l’application ses fonctionnalités.This brings us to the end of exploring the generated app, and taking a look behind the scenes at the screens, controls, properties, and formulas that give the app its capabilities. Si vous avez bien suivi, vous devriez mieux comprendre le fonctionnement d’une application générée.If you've followed along, you should have a better understanding of how a generated app works. Vous pouvez désormais vous servir de cette compréhension pour créer vos propres applications.Now you can take this understanding into creating your own apps.

Avant de passer à la section suivante, nous aimerions revenir à SharePoint pour vous montrer comment l’application est désormais intégrée avec l’expérience de liste.Before moving on to the next section, we want to loop back to SharePoint and show you how the app is now integrated with the list experience. Comme vous pouvez le voir, FlooringApp fonctionne maintenant comme un affichage de la liste, et vous lancez l’application en cliquant sur Ouvrir.As you can see FlooringApp now functions as a view of the list, and you launch the app by clicking Open. Cela vous permet de gérer vos listes en toute simplicité via une interface personnalisée conviviale.This provides a simple way to manage your lists with a friendly customized experience.

Application en tant qu’affichage de liste Sharepoint

À présent que vous avez pris connaissance de la section relative à l’application SharePoint, vous pouvez passer à l’une des étapes suivantes :Now that you've gone through the SharePoint app section, you have a choice about where to go next:

La section relative à la gestion montre comment partager des applications et contrôler leurs versions, et présente les environnements qui sont des conteneurs d’applications, de données et d’autres ressources.The management section shows you how to share and version apps, and introduces environments, which are containers for apps, data, and other resources. Nous recommandons vivement la lecture de la section relative à la gestion, mais la section Common Data Service contient également des informations très utiles, dont d’autres personnalisations d’application.We recommend that everyone go through the management section at some point, but the Common Data Service section has some great information too, including more app customizations.

Félicitations !

Vous avez terminé la section Création d’une application à partir de SharePoint de l’Apprentissage guidé Microsoft PowerApps.You've completed the Creating an app from SharePoint section of Microsoft PowerApps Guided Learning.

Vous avez appris à...

Didacticiel suivant

Création d’une application à partir de Common Data ServiceCreating an app from the Common Data Service

Contributeurs

  • Michael Blythe
  • olprod
  • Alisha-Acharya