Comprendre les formulaires de données dans Microsoft PowerAppsUnderstand data forms in Microsoft PowerApps

Ajoutez trois types de contrôles afin que l’utilisateur puisse rechercher un enregistrement, afficher les détails de cet enregistrement et modifier ou créer un enregistrement :Add three types of controls so that the user can browse for a record, display details about that record, and edit or create a record:

ActivitéActivity ContrôleControl DescriptionDescription
Rechercher un enregistrementBrowse for a record Contrôle GalleryGallery control Filtrer, trier, rechercher et parcourir des enregistrements dans une source de données, puis sélectionner un enregistrement spécifique.Filter, sort, search, and scroll through records in a data source, and select a specific record. Afficher uniquement certains champs de chaque enregistrement pour visualiser plusieurs enregistrements à la fois, même sur un petit écran.Display only a few fields from each record to show several records at a time, even on a small screen.
Afficher les détails d’un enregistrementShow details of a record Contrôle Display formDisplay form control Pour un seul enregistrement, afficher plusieurs champs ou l’ensemble d’entre eux pour cet enregistrement.For a single record, display many or all fields in that record.
Modifier ou créer un enregistrementEdit or create a record Contrôle Edit formEdit form control Mettre à jour un ou plusieurs champs dans un enregistrement unique (ou créer un enregistrement commençant par les valeurs par défaut) et enregistrer ces modifications dans la source de données sous-jacente.Update one or more fields in a single record (or create a record starting with default values), and save those changes back to the underlying data source.

Placez chaque contrôle sur un écran différent pour les distinguer plus facilement :Put each control on a different screen to make them easier to distinguish:

Rechercher, afficher et modifier les enregistrements sur trois écrans

Comme le décrit cette rubrique, combinez ces contrôles avec des formules pour créer l’expérience utilisateur globale.As this topic describes, combine these controls with formulas to create the overall user experience.

Conditions préalablesPrerequisites

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

PowerApps peut générer automatiquement une application basée sur une source de données que vous spécifiez.PowerApps can automatically generate an app based on a data source that you specify. Chaque application contient trois écrans comportant les contrôles décrits précédemment et les formules qui les relient.Each app contains three screens with the controls described earlier and formulas that connect them. Exécutez ces applications « prêtes à l’emploi », personnalisez-les en fonction de vos objectifs spécifiques ou examinez leur fonctionnement afin que vous puissiez apprendre des concepts utiles qui s’appliquent à vos propres applications.Run these apps "out of the box," customize them for your specific goals, or examine how they work so that you can learn useful concepts that apply to your own apps. Dans les sections suivantes, examinez les écrans, les contrôles et les formules qui définissent une application générée.In the following sections, inspect the screens, controls, and formulas that drive a generated app.

Écran de navigationBrowse screen

Contrôles de l’écran de navigation

Cet écran comporte les formules clés suivantes :This screen features these key formulas:

ContrôleControl Comportement pris en chargeSupported behavior FormuleFormula
BrowseGallery1BrowseGallery1 Afficher les enregistrements à partir de la source de données Assets.Display records from the Assets data source. La propriété Items de la galerie est définie sur une formule basée sur la source de données Assets.The Items property of the gallery is set to a formula that's based on the Assets data source.
ImageNewItem1ImageNewItem1 Afficher l’écran de modification et de création avec chaque champ défini sur une valeur par défaut, afin que l’utilisateur puisse créer facilement un enregistrement.Display the Edit and Create screen with each field set to a default value, so that the user can easily create a record. La propriété OnSelect de l’image est définie sur la formule suivante :The OnSelect property of the image is set to this formula:
NewForm( EditForm1 );
Navigate( EditScreen1, None )
NewForm( EditForm1 );
Navigate( EditScreen1, None )
NextArrow1 (dans la galerie)NextArrow1 (in the gallery) Afficher l’écran de détails pour visualiser tous les champs de l’enregistrement actuellement sélectionné, ou certains d’entre eux.Display the Details screen to view many or all fields of the currently selected record. La propriété OnSelect de la flèche est définie sur la formule suivante :The OnSelect property of the arrow is set to this formula:
Navigate( DetailScreen1, None )Navigate( DetailScreen1, None )

Le contrôle principal sur cet écran, BrowseGallery1, couvre la plupart de la zone de l’écran.The primary control on this screen, BrowseGallery1, covers most of the area of the screen. L’utilisateur peut parcourir la galerie pour rechercher un enregistrement spécifique pour afficher davantage de champs ou le mettre à jour.The user can scroll through the gallery to find a specific record to display more fields or to update.

Définissez la propriété Items d’une galerie pour afficher les enregistrements d’une source de données qu’elle contient.Set the Items property of a gallery to show records from a data source in it. Par exemple, définissez cette propriété sur Assets pour afficher les enregistrements d’une source de données du même nom.For example, set that property to Assets to show records from a data source of that name.

Remarque : dans une application générée, la propriété Items est définie par défaut sur une formule plus complexe afin que l’utilisateur puisse trier et rechercher des enregistrements.Note: In a generated app, Items is set to a significantly more complicated formula by default so that the user can sort and search for records. Vous apprendrez à créer cette formule plus loin dans cette rubrique ; la version la plus simple est suffisante pour l’instant.You'll learn how to build that formula later in this topic; the simpler version is enough for now.

Au lieu de rechercher un enregistrement à afficher ou à modifier, l’utilisateur peut en créer un en sélectionnant le symbole « + » au-dessus de la galerie.Instead of finding a record to display or edit, the user can create a record by selecting the "+" symbol above the gallery. Créez cet effet en ajoutant un contrôle Image, affichant un symbole « + » et définissez sa propriété OnSelect sur la formule suivante :Create this effect by adding an Image control, showing a "+" symbol in it, and setting its OnSelect property to this formula:
NewForm( EditForm1 ); Navigate( EditScreen1, None )NewForm( EditForm1 ); Navigate( EditScreen1, None )

Cette formule ouvre l’écran de modification et de création, qui comporte un contrôle Edit form nommé EditForm1.This formula opens the Edit and Create screen, which features an Edit form control named EditForm1. La formule définit également ce formulaire en mode Nouveau, dans lequel le formulaire affiche les valeurs par défaut de la source de données afin que l’utilisateur puisse facilement créer un enregistrement de toute pièce.The formula also switches that form into New mode, in which the form shows default values from the data source so that the user can easily create a record from scratch.

Pour examiner n’importe quel contrôle qui s’affiche dans BrowseGallery1, sélectionnez-le dans la première section de cette galerie qui sert de modèle pour toutes les autres sections.To examine any control that appears in BrowseGallery1, select that control in the first section of that gallery, which serves as a template for all other sections. Par exemple, sélectionnez le contrôle Label du milieu sur le bord gauche :For example, select the middle Label control on the left edge:

Contrôles de l’écran de navigation

Dans de cet exemple, la propriété Text du contrôle est définie sur ThisItem.AssignedTo, qui est un champ de la source de données Assets.In this example, the control's Text property is set to ThisItem.AssignedTo, which is a field in the Assets data source. La propriété Text des trois autres contrôles Label dans la galerie est définie sur des formules similaires, et chaque contrôle affiche un champ différent dans la source de données.The Text property of the other three Label controls in the gallery are set to similar formulas, and each control shows a different field in the data source.

Sélectionnez le contrôle Shape (la flèche) et vérifiez que sa propriété OnSelect est définie sur la formule suivante :Select the Shape control (the arrow), and confirm that its OnSelect property is set to this formula:
Navigate( DetailScreen1, None )Navigate( DetailScreen1, None )

Si l’utilisateur trouve un enregistrement dans BrowseGallery1, il peut sélectionner la flèche de cet enregistrement pour afficher plus d’informations le concernant dans DetailScreen1.If the user finds a record in BrowseGallery1, the user can select the arrow for that record to show more information about it in DetailScreen1. En sélectionnant une flèche, l’utilisateur modifie la valeur de la propriété Selected de BrowseGallery1.By selecting an arrow, the user changes the value of the Selected property of BrowseGallery1. Dans cette application, cette propriété détermine quel enregistrement s’affiche non seulement dans DetailScreen1, mais aussi, si l’utilisateur décide de mettre à jour l’enregistrement, dans l’écran de modification et de création.In this app, that property determines which record appears in not only DetailScreen1 but also, if the user decides to update the record, the Edit and Create screen.

Écran de détailsDetail screen

Contrôles de l’écran de détails

Cet écran comporte les formules clés suivantes :This screen features these key formulas:

ContrôleControl Comportement pris en chargeSupported behavior FormuleFormula
DetailForm1DetailForm1 Affiche un enregistrement dans la source de données Assets.Displays a record in the Assets data source Définissez la propriété DataSource sur Assets.Set the DataSource property to Assets.
DetailForm1DetailForm1 Détermine l’enregistrement à afficher.Determines which record to display. Dans une application générée, affiche l’enregistrement sélectionné par l’utilisateur dans la galerie.In a generated app, displays the record that the user selected in the gallery. Définissez la propriété Item de ce contrôle sur cette valeur :Set the Item property of this control to this value:
BrowseGallery1.SelectedBrowseGallery1.Selected
Contrôles CardCard controls Dans un contrôle Display form, affiche un champ unique dans un enregistrement.In a Display form control, displays a single field in a record. Définissez la propriété DataField sur le nom d’un champ, placé entre guillemets doubles (par exemple, « Nom »).Set the DataField property to the name of a field, enclosed in double quotation marks (for example, "Name").
ImageBackArrow1ImageBackArrow1 Lorsque l’utilisateur sélectionne ce contrôle, ouvre BrowseScreen1.When the user selects this control, opens BrowseScreen1. Définissez la propriété OnSelect sur la formule suivante :Set the OnSelect property to this formula:
Back()Back()
ImageDelete1ImageDelete1 Lorsque l’utilisateur sélectionne ce contrôle, supprime un enregistrement.When the user selects this control, deletes a record. Définissez la propriété OnSelect sur la formule suivante :Set the OnSelect property to this formula:
Remove( Assets, BrowseGallery1.Selected )Remove( Assets, BrowseGallery1.Selected )
ImageEdit1ImageEdit1 Lorsque l’utilisateur sélectionne ce contrôle, ouvre l’écran de modification et de création de l’enregistrement actif.When the user selects this control, opens the Edit and Create screen to the current record. Définissez la propriété OnSelect sur la formule suivante :Set the OnSelect property to this formula:
Navigate( EditScreen1, None )Navigate( EditScreen1, None )

En haut de l’écran, trois images se trouvent en dehors de DetailForm1 et agissent en tant que boutons, orchestrant les trois écrans de l’application.At the top of the screen, three images sit outside of DetailForm1 and act as buttons, orchestrating between the three screens of the app.

DetailForm1 domine cet écran et affiche l’enregistrement sélectionné par l’utilisateur dans la galerie (car la propriété Item du formulaire est définie sur BrowseGallery1.Selected).DetailForm1 dominates this screen and displays the record that the user selected in the gallery (because the form's Item property is set to BrowseGallery1.Selected). La propriété DataSource du formulaire fournit également des métadonnées concernant la source de données, comme un nom d’affichage convivial pour chaque champ.The DataSource property of the form also provides metadata about the data source, such as a user-friendly display name for each field.

DetailForm1 contient plusieurs contrôles Card.DetailForm1 contains several Card controls. Vous pouvez sélectionner le contrôle Card lui-même ou le contrôle qu’elle contient pour découvrir des informations supplémentaires.You can select either the Card control itself or the control that it contains to discover additional information.

Carte détaillée et contrôles de carte sélectionnés dans l’expérience de création

La propriété DataField d’un contrôle Card détermine quel champ la carte affiche.The DataField property of a Card control determines which field the card displays. Dans cet exemple, cette propriété est définie sur AssetID.In this case, that property is set to AssetID. La carte contient un contrôle Label dont la propriété Text est définie sur Parent.Default.The card contains a Label control for which the Text property is set to Parent.Default. Ce contrôle affiche la valeur Default pour la carte, qui est définie via la propriété DataField.This control shows the Default value for the card, which is set through the DataField property.

Dans une application générée, les contrôles Card sont verrouillés par défaut.In a generated app, Card controls are locked by default. Lorsqu’une carte est verrouillée, vous ne pouvez pas modifier certaines propriétés, telles que DataField, et la barre de formule n’est pas disponible pour ces propriétés.When a card is locked, you can't modify some properties, such as DataField, and the formula bar is unavailable for those properties. Cette restriction permet de garantir que vos personnalisations sont conformes aux fonctionnalités de base de l’application générée.This restriction helps ensure that your customizations don't break the basic functionality of the generated app. Toutefois, vous pouvez modifier certaines propriétés d’une carte et de ses contrôles dans le volet de droite :However, you can change some properties of a card and its controls in the right-hand pane:

Écran de détails avec le volet d’options ouvert

Dans le volet de droite, vous pouvez sélectionner les champs à afficher et le type de contrôle dans lequel chaque champ s’affiche.In the right-hand pane, you can select which fields to display and in which kind of control each field displays.

Écran de modification/créationEdit/Create screen

Contrôles de l’écran de modification

Cet écran comporte les formules clés suivantes :This screen features these key formulas:

ContrôleControl Comportement pris en chargeSupported behavior FormuleFormula
EditForm1EditForm1 Affiche un enregistrement dans la source de données Assets.Displays a record in the Assets data source. Définissez la propriété DataSource sur Assets.Set the DataSource property to Assets.
EditForm1EditForm1 Détermine l’enregistrement à afficher.Determines which record to display. Dans une application générée, affiche l’enregistrement sélectionné par l’utilisateur dans BrowseScreen1.In a generated app, displays the record that the user selected in BrowseScreen1. Définissez la propriété Item sur la valeur suivante :Set the Item property to this value:
BrowseGallery1.SelectedBrowseGallery1.Selected
Contrôles CardCard controls Dans un contrôle Edit form, fournit des contrôles afin que l’utilisateur puisse modifier un ou plusieurs champs dans un enregistrement.In a Edit form control, provides controls so that the user can edit one or more fields in a record. Définissez la propriété DataField sur le nom d’un champ, placé entre guillemets doubles (par exemple, « Nom »).Set the DataField property to the name of a field, enclosed in double quotation marks (for example, "Name").
ImageCancel1ImageCancel1 Lorsque l’utilisateur sélectionne ce contrôle, ignore toutes les modifications en cours et ouvre l’écran Détails.When the user selects this control, discards any changes in progress, and opens the Details screen. Définissez la propriété OnSelect sur la formule suivante :Set the OnSelect property to this formula:
ResetForm( EditForm1 ); Back()ResetForm( EditForm1 ); Back()
ImageAccept1ImageAccept1 Lorsque l’utilisateur sélectionne ce contrôle, soumet les modifications apportées à la source de données.When the user selects this control, submits changes to the data source. Définissez la propriété OnSelect sur la formule suivante :Set the OnSelect property to this formula:
SubmitForm( EditForm1 )SubmitForm( EditForm1 )
EditForm1EditForm1 Si les modifications sont acceptées, renvoie à l’écran précédent.If changes are accepted, returns to the previous screen. Définissez la propriété OnSuccess sur la formule suivante :Set the OnSuccess property to this formula:
Back()Back()
EditForm1EditForm1 Si les modifications ne sont pas acceptées, reste sur l’écran actuel afin que l’utilisateur puisse résoudre les problèmes et essayer d’effectuer un nouvel envoi.If changes aren't accepted, remain on the current screen so that the user can fix any issues and try to submit again. Laissez la propriété OnFailure vide.Leave the OnFailure property blank.
LblFormError1LblFormError1 Si les modifications ne sont pas acceptées, affiche un message d’erreur.If changes aren't accepted, shows an error message. Définissez la propriété Text sur la valeur suivante :Set the Text property to this value:
EditForm1.ErrorEditForm1.Error

Comme dans l’écran Détails, un contrôle de formulaire nommé EditForm1 domine l’écran de modification et de création.As in the Details screen, a form control, named EditForm1, dominates the Edit and Create screen. En outre, la propriété Item d’EditForm1 est définie sur BrowseGallery1.Selected, de sorte que le formulaire affiche l’enregistrement sélectionné par l’utilisateur dans BrowseScreen1.In addition, the Item property of EditForm1 is set to BrowseGallery1.Selected, so the form displays the record that the user selected in BrowseScreen1. Bien que l’écran Détails affiche chaque champ en lecture seule, l’utilisateur peut mettre à jour la valeur d’un ou plusieurs champs en utilisant les contrôles dans EditForm1.While the Details screen shows each field as read-only, the user can update the value of one or more fields by using the controls in EditForm1. Il utilise également la propriété DataSource pour accéder aux métadonnées relatives à cette source de données, telles que le nom d’affichage convivial pour chaque champ et l’emplacement où les modifications doivent être enregistrées.It also uses the DataSource property to access metadata about this data source, such as the user-friendly display name for each field and the location where changes should be saved.

Si l’utilisateur sélectionne l’icône « X » pour annuler une mise à jour, la fonction ResetForm ignore les modifications non enregistrées et la fonction Back ouvre l’écran Détails.If the user selects the "X" icon to cancel an update, the ResetForm function discards any unsaved changes, and the Back function opens the Details screen. Les écrans de détails et de modification et de création affichent le même enregistrement jusqu’à ce que l’utilisateur en sélectionne un autre dans BrowseScreen1.Both the Details screen and the Edit and Create screen show the same record until the user selects a different one on BrowseScreen1. Les champs de cet enregistrement restent définis sur les valeurs qui ont été enregistrées récemment, et non sur les modifications apportées par l’utilisateur, puis abandonnées.The fields in that record remain set to the values that were most recently saved, not any changes that the user made and then abandoned.

Si l’utilisateur modifie une ou plusieurs valeurs dans le formulaire, puis sélectionne l’icône de coche, la fonction SubmitForm envoie les modifications apportées par l’utilisateur à la source de données.If the user changes one or more values in the form and then selects the "checkmark" icon, the SubmitForm function sends the user's changes to the data source.

  • Si les modifications sont correctement enregistrées, la formule OnSuccess du formulaire est exécutée et la fonction Back() ouvre l’écran de détails pour afficher l’enregistrement mis à jour.If the changes are successfully saved, the form's OnSuccess formula runs, and the Back() function opens the detail screen to show the updated record.
  • Si les modifications ne sont pas enregistrées, la formule OnFailure du formulaire est exécutée, mais cela n’entraîne aucune modification, car elle est vide.If the changes aren't successfully saved, the form's OnFailure formula runs, but it doesn't change anything because it's blank. L’écran de modification et de création reste ouvert afin que l’utilisateur puisse annuler les modifications ou corriger l’erreur.The Edit and Create screen remains open so that the user can either cancel the changes or fix the error. LblFormError1 affiche un message d’erreur convivial, sur lequel la propriété Error du formulaire est définie.LblFormError1 shows a user-friendly error message, to which the form's Error property is set.

Comme avec un contrôle Display form, un contrôle Edit form comporte des contrôles Card qui contiennent d’autres contrôles affichant différents champs dans un enregistrement :As with a Display form control, an Edit form control contains Card controls, which contain other controls that show different fields in a record:

Carte de modification et contrôles de carte sélectionnés dans l’expérience de création

Dans l’image précédente, la carte sélectionnée affiche le champ AssetID et contient un contrôle Text input afin que l’utilisateur puisse modifier la valeur de ce champ.In the previous image, the selected card shows the AssetID field and contains a Text input control so that the user can edit the value of that field. (En revanche, l’écran des détails affiche le même champ dans un contrôle Label, qui est en lecture seule.) Le contrôle Text input comporte une propriété Default, qui est définie sur Parent.Default.(In contrast, the detail screen shows the same field in a Label control, which is read-only.) The Text input control has a Default property, which is set to Parent.Default. Si l’utilisateur crée un enregistrement au lieu de le modifier, ce contrôle affiche une valeur initiale que l’utilisateur peut modifier pour le nouvel enregistrement.If the user were creating a record instead of editing one, that control would show an initial value that the user can change for the new record.

Dans le volet de droite, vous pouvez afficher ou masquer chaque carte, les réorganiser ou les configurer pour afficher les champs dans différents types de contrôles.In the right-hand pane, you can show or hide each card, rearrange them, or configure them to show fields in different types of controls.

Écran de modification avec le volet d’options ouvert

Générer une application à partir de zéroBuild an app from scratch

Une fois que vous avez compris comment PowerApps génère une application, vous pouvez en créer une vous-même en utilisant les mêmes blocs de construction et formules décrits précédemment dans cette rubrique.By understanding how PowerApps generates an app, you can build one yourself that uses the same building blocks and formulas discussed earlier in this topic.

Identifier les données de testIdentify test data

Pour tirer le meilleur parti de cette rubrique, démarrez avec une source de données avec laquelle vous pouvez faire des essais.To get the most from this topic, start with a data source with which you can experiment. Elle doit contenir des données de test que vous pouvez lire et mettre à jour sans problème.It should contain test data that you can read and update without concern.

Remarque : si vous utilisez une liste SharePoint ou un tableau Excel comprenant des noms de colonne avec des espaces en guise de sources de données, PowerApps remplace les espaces par "_x0020_".Note: If you use a SharePoint list or an Excel table that contains column names with spaces as your data source, PowerApps will replace the spaces with "_x0020_". Par exemple, le libellé « Nom de colonne » dans SharePoint ou Excel apparaît sous la forme « Nom_x0020_de_x0020_colonne » dans PowerApps quand il s’affiche dans la mise en page des données ou est utilisé dans une formule.For example, "Column Name" in SharePoint or Excel will appear as "Column_x0020_Name" in PowerApps when displayed in the data layout or used in a formula.

Pour suivre exactement le reste de cette rubrique, créez une liste SharePoint nommée « Ice Cream » comportant les données suivantes :To follow the rest of this topic exactly, create a SharePoint list named "Ice Cream" that contains this data:

Liste SharePoint Ice Cream

  • Créez une application vide pour téléphones et connectez-la à votre source de données.Create an app from blank, for phones, and connect it to your data source.

    Remarque : les applications pour tablettes sont très similaires, mais vous souhaiterez peut-être opter pour une autre disposition d’écran pour exploiter au mieux l’espace d’écran supplémentaire.Note: Tablet apps are very similar, but you may want a different screen layout to make the most of the extra screen space.

    Les exemples dans le reste de la rubrique sont basés sur une source de données nommée Ice Cream.The examples in the rest of the topic are based on a data source named Ice Cream.

Parcourir les enregistrementsBrowse records

Pour obtenir rapidement des informations à partir d’un enregistrement, recherchez-le dans une galerie sur un écran de navigation.Get a quick piece of information from a record by finding it in a gallery on a browse screen.

  1. Ajoutez une galerie Vertical et modifiez la mise en page en Titre uniquement.Add a Vertical gallery, and change the layout to Title only.

    Galerie connectée à la source de données Ice Cream

  2. Définissez la propriété Items de la galerie sur Crème glacée.Set the gallery's Items property to Ice Cream.
  3. Définissez la propriété Text de la première étiquette dans la galerie sur ThisItem.Title si elle est définie de la sorte.Set the Text property of the first label in the gallery to ThisItem.Title if it's set to something else.

    L’étiquette affiche à présent la valeur dans le champ Titre pour chaque enregistrement.The label now shows the value in the Title field for each record.

    Galerie connectée à la source de données Ice Cream

  4. Redimensionnez la galerie pour remplir l’écran et définissez sa propriété TemplateSize sur 60.Resize the gallery to fill the screen, and set its TemplateSize property to 60.

    L’écran ressemble à cet exemple, qui affiche tous les enregistrements dans la source de données :The screen resembles this example, which shows all records in the data source:

    Galerie connectée à la source de données Ice Cream

Afficher les détailsView details

Si la galerie n’affiche pas les informations que vous souhaitez, sélectionnez la flèche d’un enregistrement pour ouvrir l’écran de détails.If the gallery doesn't show the information that you want, select the arrow for a record to open the details screen. Un contrôle Display form sur cet écran affiche plus de champs, voire l’ensemble d’entre eux, pour l’enregistrement que vous avez sélectionné.A Display form control on that screen shows more, possibly all, fields for the record that you selected.

Le contrôle Display form utilise deux propriétés pour afficher l’enregistrement :The Display form control uses two properties to display the record:

  • Propriété DataSource.DataSource property. Nom de la source de données qui contient l’enregistrement.The name of the data source that holds the record. Cette propriété remplit le volet de droite avec des champs et détermine le nom d’affichage et le type de données (chaîne, nombre, date, etc.) de chaque champ.This property populates the right-hand panel with fields and determines the display name and data type (string, number, date, etc.) of each field.
  • Propriété Item.Item property. Enregistrement à afficher.The record to display. Cette propriété est souvent connectée à la propriété Selected du contrôle Gallery afin que l’utilisateur puisse sélectionner un enregistrement dans le contrôle Gallery, puis l’explorer.This property is often connected to the Selected property of the Gallery control so that the user can select a record in the Gallery control and then drill into that record.

Lorsque la propriété DataSource est définie, vous pouvez ajouter et supprimer des champs dans le volet de droite et modifier leur mode d’affichage.When the DataSource property is set, you can add and remove fields through the right-hand pane and change how they're displayed.

Dans cet écran, les utilisateurs ne peuvent pas intentionnellement ou accidentellement modifier des valeurs de l’enregistrement.On this screen, users can't intentionally or accidentally change any values of the record. Le contrôle Display form est en lecture seule. Ainsi, il ne peut pas modifier un enregistrement.The Display form control is a read-only control, so it won't modify a record.

Pour ajouter un contrôle Display form, procédez comme suit :To add a Display form control:

  1. Ajoutez un écran, puis ajoutez-y un contrôle Display formAdd a screen, and then add a Display form control to it
  2. Définissez la propriété DataSource du contrôle de formulaire sur 'Ice Cream'.Set the DataSource property of the form control to 'Ice Cream'.

Dans le volet de droite, vous pouvez sélectionner les champs à afficher sur votre écran et le type de carte à afficher pour chacun d’entre eux.In the right-hand pane, you can select the fields to display on your screen and which type of card to display for each field. Lorsque vous apportez des modifications dans le volet de droite, la propriété DataField sur chaque contrôle Card est définie sur le champ avec lequel l’utilisateur interagit.As you make changes in the right-hand pane, the DataField property on each Card control is set to the field that the user will interact with. Votre écran doit ressembler à ceci :Your screen should resemble this example:

Formulaire d’affichage pour la source de données Ice Cream

Enfin, vous devez connecter le contrôle Display form sur le contrôle Gallery de sorte à pouvoir examiner les détails d’un enregistrement spécifique.Finally, we need to connect the Display form control to the Gallery control so that we can look at details for a specific record. Une fois la configuration de la propriété Item terminée, le premier enregistrement de la galerie apparaît dans notre formulaire.As soon as we complete setting the Item property, the first record from the gallery will appear in our form.

  1. Définissez la propriété Item du contrôle Display form sur Gallery1.Selected.Set the Item property of the Display form control to Gallery1.Selected.

    Les détails de l’élément sélectionné apparaissent dans le formulaire.The details for the selected item appear in the form.

    Formulaire d’affichage de la source de données Ice Cream, connectée au contrôle de la galerie

Bien !Great! Passons maintenant à la navigation : comment un utilisateur peut ouvrir l’écran des détails à partir de l’écran de la galerie et inversement.We now turn to navigation: how a user opens the details screen from the gallery screen and opens the gallery screen from the details screen.

  1. Ajoutez un contrôle Button à l’écran, définissez sa propriété Text pour afficher Back et définissez sa propriété OnSelect sur Back().Add a Button control to the screen, set its Text property to show Back, and set its OnSelect property to Back().

    Cette formule renvoie l’utilisateur à la galerie lorsqu’il a terminé de consulter les détails.This formula returns the user back to the gallery when they finish viewing details.

Formulaire d’affichage pour la source de données Ice Cream avec bouton de retour

À présent, revenons au contrôle Gallery et ajoutons des éléments de navigation à notre écran de détails.Now, let's return to the Gallery control and add some navigation to our detail screen.

  1. Basculez vers le premier écran qui héberge notre contrôle Gallery, puis sélectionnez la flèche dans le premier élément de la galerie.Switch to the first screen, which is hosting our Gallery control, and select the arrow in the first item in the gallery.
  2. Définissez la propriété OnSelect de la forme sur la formule suivante :Set the OnSelect property of the shape to this formula:
    Navigate( Screen2, None )Navigate( Screen2, None )

    Formulaire d’affichage pour la source de données Ice Cream avec bouton de retour

  3. Appuyez sur F5, puis sélectionnez une flèche dans la galerie afin d’afficher les détails d’un élément.Press F5, and then select an arrow in the gallery to show the details for an item.
  4. Sélectionnez le bouton Back pour revenir à la galerie de produits, puis appuyez sur Échap.Select the Back button to return to the gallery of products, and then press Esc.

Modification des détailsEditing details

Enfin, notre dernière activité principale consiste à modifier le contenu d’un enregistrement, ce que les utilisateurs peuvent faire dans un contrôle Edit form.Finally, our last core activity is changing the contents of a record, which users accomplish in an Edit form control.

Le contrôle Edit form utilise deux propriétés pour afficher et modifier l’enregistrement :The Edit form control uses two properties to display and edit the record:

  • Propriété DataSource.DataSource property. Nom de la source de données qui contient l’enregistrement.The name of the data source that holds the record. Comme avec le contrôle Display form, cette propriété remplit le volet de droite avec des champs et détermine le nom d’affichage et le type de données (chaîne, nombre, date, etc.) de chaque champ.Just as with the Display form control, this property populates the right-hand panel with fields and determines the display name and data type (string, number, date, etc.) for each field. Cette propriété détermine également si la valeur de chaque champ est valide avant de le soumettre à la source de données sous-jacente.This property also determines whether each field's value is valid before submitting it to the underlying data source.
  • Propriété Item.Item property. Enregistrement à modifier, qui est souvent connecté à la propriété Selected du contrôle Gallery.The record to edit, which is often connected to the Selected property of the Gallery control. De cette façon, vous pouvez sélectionner un enregistrement dans le contrôle Gallery, l’afficher dans l’écran des détails et le modifier dans l’écran de modification et de création.That way, you can select a record in the Gallery control, show it in the details screen, and edit it in the Edit and Create screen.

Pour ajouter un contrôle Edit form, procédez comme suit :To add an Edit form control:

  1. Ajoutez un écran, ajoutez un contrôle Edit form, puis définissez sa propriété DataSource sur 'Ice Cream'.Add a screen, add an Edit form control, and then set the form's DataSource property to 'Ice Cream'.
  2. Définissez la propriété Item sur Gallery1.Selected.Set the Item property to Gallery1.Selected.

Vous pouvez maintenant sélectionner les champs à afficher sur votre écran.You can now select the fields to display on your screen. Vous pouvez également sélectionner le type de carte à afficher pour chaque champ.You can also select which type of card to display for each field. Lorsque vous apportez des modifications dans le volet de droite, la propriété DataField sur chaque contrôle Card est définie sur le champ avec lequel votre utilisateur interagit.As you make changes in the right-hand pane, the DataField property on each Card control is set to the field your user will interact with. Votre écran doit ressembler à ceci :Your screen should resemble this example:

Formulaire d’affichage pour la source de données Ice Cream

Ces deux propriétés sont les mêmes que les propriétés sur le contrôle Display form.These two properties are the same as the properties on the Display form control. Grâce à elles, nous pouvons afficher les détails d’un enregistrement.And with these alone, we can display the details of a record.

Le contrôle Edit form va plus loin en proposant la fonction SubmitForm pour l’écriture différée des modifications dans la source de données.The Edit form control goes further by offering the SubmitForm function to write back changes to the data source. Utilisez-le avec un contrôle de bouton ou d’image pour enregistrer les modifications apportées par un utilisateur.You use this with a button or image control to save a user's changes.

  • Ajoutez un contrôle Button, définissez sa propriété Text sur Save, puis définissez sa propriété OnSelect sur la formule suivante :Add a Button control, set its Text property to show Save, and set its OnSelect property to this formula:
    SubmitForm( Form1 ) SubmitForm( Form1 )

Formulaire de modification pour la source de données Ice Cream

Pour ajouter la navigation vers cet écran et à partir de celui-ci, procédez comme suit :To add navigation to and from this screen:

  1. Ajoutez un autre contrôle Button, définissez sa propriété Text sur Cancel, puis sa propriété OnSelect sur la formule suivante :Add another Button control, set its Text property to show Cancel, and set its OnSelect property to this formula:
    ResetForm( Form1 ); Back()ResetForm( Form1 ); Back()

    Cette formule ignore toutes les modifications non enregistrées et ouvre l’écran précédent.This formula discards any unsaved edits and opens the previous screen.

    Formulaire d’affichage pour la source de données Ice Cream

  2. Définissez la propriété OnSuccess du formulaire sur Back().Set the OnSuccess property of the form to Back().

    Lorsque les mises à jour sont enregistrées avec succès, l’écran précédent (dans ce cas, l’écran de détails) s’ouvre automatiquement.When updates are successfully saved, the previous screen (in this case, the details screen) opens automatically.

    Formulaire de modification avec la règle « OnSuccess »

  3. Sur l’écran d’affichage, ajoutez un bouton, définissez sa propriété Text sur Modifier, puis définissez sa propriété OnSelect sur la formule suivante :On the Display screen, add a button, set its Text property to show Edit, and set its OnSelect property to this formula:
    Navigate( Screen3, None )Navigate( Screen3, None )

    Formulaire d’affichage avec le bouton « Modifier » ajouté

Vous avez créé une application de base avec trois écrans d’affichage et de saisie de données.You've built a basic app with three screens for viewing and entering data. Pour la tester, affichez l’écran de la galerie, puis appuyez sur F5 (ou sélectionnez la flèche d’aperçu vers l’angle supérieur gauche de l’écran).To try it out, show the gallery screen, and then press F5 (or select the forward arrow "Preview" button near the upper-left corner of the screen). Le point rose indique où l’utilisateur clique ou appuie sur l’écran à chaque étape.The pink dot indicates where the user clicks or taps the screen at each step.

Tester l’application Ice Cream

Créer un enregistrementCreate a record

L’utilisateur interagit avec le même formulaire de modification pour mettre à jour et créer des enregistrements.The user interacts with the same Edit form to both update and create records. Lorsque l’utilisateur souhaite créer un enregistrement, la fonction NewForm bascule le formulaire en mode Nouveau.When the user wants to create a record, the NewForm function switches the form to New mode.

Lorsque le formulaire est en mode Nouveau, la valeur de chaque champ est définie sur les valeurs par défaut de la source de données.When the form is in New mode, the value of each field is set to the defaults of the data source. L’enregistrement qui est fourni pour la propriété Item du formulaire est ignoré.The record that's provided to the form's Item property is ignored.

Lorsque l’utilisateur est prêt à enregistrer le nouvel enregistrement, SubmitForm s’exécute.When the user is ready to save the new record, SubmitForm runs. Une fois que le formulaire est envoyé avec succès, le formulaire est basculé en mode EditMode.After the form is successfully submitted, the form is switched back to EditMode.

Sur le premier écran, vous allez ajouter un bouton Nouveau :On the first screen, you'll add a New button:

  1. Sur l’écran avec la galerie, ajoutez un contrôle Button.On the screen with the gallery, add a Button control.
  2. Définissez la propriété Text du bouton sur Nouveau, puis sa propriété OnSelect sur la formule suivante :Set the button's Text property to New and its OnSelect property to this formula:
    NewForm( Form1 ); Navigate( Screen3, None ) NewForm( Form1 ); Navigate( Screen3, None )

    Cette formule bascule le contrôle Edit form sur l’écran Screen3 en mode Nouveau et ouvre cet écran afin que l’utilisateur puisse le remplir.This formula switches the Edit form control on Screen3 to New mode and opens that screen so that the user can fill it in.

Formulaire d’affichage avec le bouton « Modifier » ajouté

Lorsque l’écran de modification et de création s’ouvre, le formulaire est vide et l’utilisateur peut y ajouter un élément.When the Edit and Create screen opens, the form is empty, ready for the user to add an item. Lorsque l’utilisateur sélectionne le bouton Enregistrer, la fonction SubmitForm garantit qu’un enregistrement est créé au lieu d’être mis à jour.When the user selects the Save button, the SubmitForm function ensures that a record is created instead of being updated. Si l’utilisateur sélectionne le bouton Annuler, la fonction ResetForm repasse le formulaire en mode de modification et la fonction Back ouvre l’écran pour parcourir la galerie.If the user selects the Cancel button, the ResetForm function switches the form back to Edit mode, and the Back function opens the screen for browsing the gallery.

Supprimer un enregistrementDelete a record

  1. Sur l’écran d’affichage, ajoutez un bouton et définissez sa propriété Text pour afficher Supprimer.On the Display screen, add a button, and set its Text property to show Delete..
  2. Définissez la propriété OnSelect du bouton sur la formule suivante :Set the button's OnSelect property to this formula:
    Remove( 'Ice Cream', Gallery1.Selected ); Back()Remove( 'Ice Cream', Gallery1.Selected ); Back()

    Formulaire d’affichage avec le bouton « Modifier » ajouté

Gestion des erreursHandling errors

Dans cette application, une erreur se produit lorsque la valeur d’un champ n’est pas valide, si un champ obligatoire est vide, si vous êtes déconnecté du réseau ou en cas d’autres problèmes.In this app, an error occurs when the value of a field is not valid, a required field is blank, you're disconnected from the network, or any number of other problems pop up.

Si SubmitForm échoue pour une raison quelconque, la propriété Error du contrôle Edit form contient un message d’erreur à afficher pour l’utilisateur.If SubmitForm fails for any reason, the Error property of the Edit form control contains an error message to show the user. Grâce à ces informations, l’utilisateur doit être en mesure de résoudre le problème et de soumettre à nouveau la modification ou il peut annuler la mise à jour.With this information, the user should be able to correct the issue and resubmit the change, or they can cancel the update.

  1. Sur l’écran de modification et de création, ajoutez un contrôle Label et déplacez-le juste en dessous du bouton Enregistrer.On the Edit and Create screen, add a Label control, and move it just below the Save button.

    Toute erreur sera facile à identifier une fois que l’utilisateur sélectionne ce contrôle pour enregistrer les modifications.Any error will be easy to see after the user selects this control to save changes.

  2. Définissez la propriété Text du contrôle Label pour qu’il affiche Form1.Error.Set the Text property of the Label control to show Form1.Error.

Formulaire d’affichage avec le bouton « Modifier » ajouté

Dans une application générée par PowerApps à partir des données, la propriété AutoHeight de ce contrôle est définie sur true afin qu’aucun espace ne soit utilisé si aucune erreur ne se produit.In an app that PowerApps generates from data, the AutoHeight property on this control is set to true so that no space is consumed if no error occurs. Les propriétés Height et Y du contrôle Edit form sont également ajustées de manière dynamique afin de prendre en compte l’augmentation de ce contrôle lorsqu’une erreur se produit.The Height and Y properties of the Edit form control are also adjusted dynamically to account for this control growing when an error occurs. Pour plus d’informations, générez une application à partir de données existantes et examinez ces propriétés.For more details, generate an app from existing data, and inspect these properties. Le contrôle de zone de texte des erreurs est très court si aucune erreur ne se n’est produite. Vous devrez peut-être ouvrir la vue Avancé (disponible dans l’onglet Affichage) pour sélectionner ce contrôle.The text-box control for errors is very short when no error has occurred, you may need to open the Advanced view (available on the View tab) to select this control.

Application à partir du formulaire de modification des données avec le contrôle de texte d’erreur sélectionné

Application à partir du formulaire de modification des données avec le contrôle de formulaire sélectionné

Actualiser les donnéesRefresh data

La source de données est actualisée chaque fois que l’utilisateur ouvre l’application, mais l’utilisateur peut choisir d’actualiser les enregistrements dans la galerie sans fermer l’application.The data source is refreshed whenever the user opens the app, but the user might want to refresh the records in the gallery without closing the app. Ajoutez un bouton Actualiser afin que l’utilisateur puisse le sélectionner pour actualiser manuellement les données :Add a Refresh button so that the user can select it to manually refresh the data:

  1. Sur l’écran avec le contrôle Gallery, ajoutez un contrôle Button et définissez sa propriété Text pour afficher Actualiser.On the screen with the Gallery control, add a Button control and set its Text property to show Refresh.
  2. Définissez la propriété OnSelect de ce contrôle sur la formule suivante :Set the OnSelect property of this control to this formula:
    Refresh( 'Ice Cream' )Refresh( 'Ice Cream' )

Actualiser la source de données

Dans l’application générée par PowerApps à partir des données, nous n’avons pas abordé deux contrôles en haut de l’écran de navigation.In the app that PowerApps generated from data, we neglected to discuss two controls at the top of the Browse screen. À l’aide de ces contrôles, l’utilisateur peut rechercher un ou plusieurs enregistrements, trier la liste des enregistrements dans l’ordre croissant, décroissant, ou les deux.By using these controls, the user can search for one or more records, sort the list of records in ascending or descending order, or both.

Tri et recherche des contrôles sur l’écran de navigation

Lorsque l’utilisateur sélectionne le bouton de tri, l’ordre de tri de la galerie est inversé.When the user selects the sort button, the sort order of the gallery reverses. Pour créer ce comportement, nous utilisons une variable de contexte pour suivre le sens de tri de la galerie.To create this behavior, we use a context variable to track the direction in which the gallery is sorted. Lorsque l’utilisateur sélectionne le bouton, la variable est mise à jour et le sens est inversé.When the user selects the button, the variable is updated, and the direction reverses. La propriété OnSelect du bouton de tri est définie sur la formule suivante : UpdateContext( {SortDescending1: !SortDescending1} )The OnSelect property of the sort button is set to this formula: UpdateContext( {SortDescending1: !SortDescending1} )

La fonction UpdateContext crée la variable de contexte SortDescending1 si elle n’existe pas déjà.The UpdateContext function creates the SortDescending1 context variable if it doesn't already exist. La fonction lit la valeur de la variable et la définit à l’opposé logique à l’aide de l’opérateur !.The function will read the value of the variable and set it to the logical opposite by using the ! .operator. Si la valeur est true, il devient false.If the value is true, it becomes false. Si la valeur est false, il devient true.If the value is false, it becomes true.

La formule de la propriété Items du contrôle Gallery utilise cette variable de contexte, ainsi que le texte dans le contrôle TextSearchBox1 :The formula for the Items property of the Gallery control uses this context variable, along with the text in the TextSearchBox1 control:

Gallery1.Items = Sort( If( IsBlank(TextSearchBox1.Text),
                           Assets,
                           Filter( Assets,
                                   TextSearchBox1.Text in Text(ApproverEmail) ) ),
                        ApproverEmail,
                        If(SortDescending1, Descending, Ascending) )

Décomposons cette formule :Let's break this down:

  • À l’extérieur, on trouve la fonction Sort, qui prend trois arguments : un tableau, un champ selon lequel trier et le sens du tri.On the outside, we have the Sort function, which takes three arguments: a table, a field on which to sort, and the direction in which to sort.

    • Le sens du tri est extrait de la variable de contexte qui est activée lorsque l’utilisateur sélectionne le contrôle ImageSortUpDown1.The sort direction is taken from the context variable that toggles when the user selects the ImageSortUpDown1 control. La valeur true/false est convertie en l’une des constantes Décroissant et Croissant.The true/false value is translated to the constants Descending and Ascending.
    • Le champ de tri est défini sur ApproverEmail.The field to sort on is fixed to ApproverEmail. Si vous modifiez les champs qui apparaissent dans la galerie, vous devez également modifier cet argument.If you change the fields that appear in the gallery, you'll need to change this argument too.
  • À l’intérieur, on trouve la fonction Filter, qui prend un tableau comme argument et une expression à évaluer pour chaque enregistrement.On the inside, we have the Filter function, which takes a table as an argument and an expression to evaluate for each record.

    • Le tableau correspond à la source de données Assets brute, qui est le point de départ avant le filtrage ou le tri.The table is the raw Assets data source, which is the starting point before filtering or sorting.
    • L’expression recherche une instance de la chaîne dans TextSearchBox1 dans le champ ApproverEmail.The expression searches for an instance of the string in TextSearchBox1 within the ApproverEmail field. Là encore, si vous modifiez les champs qui apparaissent dans la galerie, vous devez également mettre à jour cet argument.Again, if you change the fields that appear in the gallery, you'll also need to update this argument.
    • Si TextSearchBox1 est vide, l’utilisateur souhaite afficher tous les enregistrements et la fonction Filter est ignorée.If TextSearchBox1 is empty, the user wants to show all records, and the Filter function is bypassed.

Il s’agit simplement d’un exemple. Vous pouvez créer votre propre formule pour la propriété Items, selon les besoins de votre application, en composant les fonctions Filter et Sort ainsi que d’autres fonctions et opérateurs ensemble.This is but one example; you can craft your own formula for the Items property, depending on the needs of your app, by composing Filter, Sort, and other functions and operators together.

Conception de l’écranScreen design

Jusqu’à présent, nous n’avons pas abordé les différentes méthodes permettant de répartir les contrôles sur les écrans.So far, we haven't discussed other ways to distribute controls across screens. Il existe en réalité de nombreuses options et le meilleur choix dépend des besoins spécifiques de votre application.That's because you have many options, and the best selection depends on your specific app's needs.

L’espace disponible sur les écrans de téléphone étant limité, vous souhaiterez probablement parcourir, afficher et créer/modifier votre application sur différents écrans.Because real estate on phone screens is so limited, you probably want to browse, display, and edit/create on different screens. Dans cette rubrique, les fonctions Navigate et Back ouvrent chaque écran.In this topic, the Navigate and Back functions open each screen.

Sur une tablette, vous pouvez parcourir, afficher et créer/modifier sur deux écrans ou un seul.On a tablet, you can browse, display, and edit/create on two or even one screen. Dans le dernier cas, les fonctions Navigate ou Back ne seront pas requises.For the latter, no Navigate or Back function would be required.

Si l’utilisateur utilise le même écran, vous devez veiller à ce qu’il ne puisse pas modifier la sélection dans la galerie pour qu’il ne risque pas de perdre les modifications dans le contrôle Edit form.If the user is working on the same screen, you need to be careful that the user can't change the selection in the Gallery and potentially lose edits in the Edit form control. Pour empêcher l’utilisateur de sélectionner un autre enregistrement alors que les modifications apportées à un autre enregistrement n’ont pas encore été enregistrées, définissez la propriété Disabled de la galerie sur la formule suivante :To keep the user from selecting a different record when changes to another record haven't been saved yet, set the Disabled property of the gallery to this formula:
EditForm.Unsaved EditForm.Unsaved