Partager via

Créer une application pour modifier des tableaux dans des applications canevas

Concevoir une application de productivité pour avoir des données et des fonctions associées en un seul endroit vous permet d’en faire plus sans avoir à basculer entre les écrans. Microsoft Excel est un exemple qui permet d’éditer des données en temps réel de manière rapide et efficace.

Avec Power Apps, vous pouvez appliquer le même concept en le fournissant comme interface à n’importe quelle source de données. Vous pouvez également le personnaliser encore plus.

Gestion du catalogue d’administration - exemple de démonstration d’application.

Ce didacticiel utilise les composants suivants pour créer un exemple d’application :

  • Une source de données (Microsoft Dataverse, vous pouvez également utiliser Excel à la place)
  • Formulaire—Pour les nouveaux articles
  • Galerie—Pour afficher les éléments existants
  • Contrôles Saisie de texte—Pour mettre à jour des éléments existants

Conditions préalables

Pour suivre ce tutoriel, vous aurez besoin d’accéder à un environnement Power Platform, et de la possibilité de créer des tables dans Microsoft Dataverse.

Ce didacticiel utilise la structure suivante pour créer l’exemple d’application :

Colonnes Dataverse pour l’exemple de table.

Pour savoir comment ajouter des colonnes, consultez Travailler avec des colonnes de table.

Un nouveau formulaire principal a été créé pour ajouter des exemples de données :

Nouveau formulaire principal pour ajouter des données à la table Dataverse.

Pour savoir comment créer un formulaire principal avec les colonnes requises, consultez Créer un formulaire. Assurez-vous d’utiliser le bon ordre de formulaire pour ajouter des enregistrements à l’aide du nouveau formulaire.

Étape 1 : créer une application vierge

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

Étape 2 : Ajouter une source de données

Cette section montre comment ajouter une table Dataverse en tant que source de données pour l’exemple d’application. Vous pouvez également utiliser un fichier Excel à partir d’un site SharePoint ou OneDrive comme source de données ; ou tout autre type de source de données de votre choix.

  1. Dans le volet gauche, sélectionnez Données > Ajouter des données.

  2. Sélectionnez Afficher toutes les tables.

  3. Sélectionnez Tables modifiables ou la table que vous avez créée précédemment.

    Ajouter une table Dataverse en tant que source de données.

Pour plus d’informations sur l’ajout d’une connexion à une application canevas, consultez Ajouter une source de données.

Étape 3 : Configurer un contrôle Form

Cette étape ajoute un contrôle Form pour ajouter de nouveaux éléments.

  1. Sélectionnez + (Insérer) > Modifier le formulaire.

    Ajouter un contrôle Modifier le formulaire.

  2. Dans le volet droit, choisissez la table comme source de données pour le contrôle Modifier le formulaire.

    Choisissez la table comme source de données pour le contrôle Modifier le formulaire.

  3. Utilisez l’option de propriétés Edit Fields pour sélectionner les colonnes à afficher sur le contrôle Modifier le formulaire. Vous pouvez également modifier l’ordre des colonnes selon vos besoins.

    Modifier les champs sur le contrôle Modifier le formulaire.

  4. Choisissez le mode par défaut Nouveau pour le formulaire.

    Choisissez le mode de contrôle Form Nouveau.

  5. Ajustez les propriétés Largeur, Hauteur pour la taille des cartes de données pour remplir le canevas le cas échéant.

  6. Dans le volet de guache, sélectionnez + (Insérer) > Bouton.

  7. Mettez à jour le texte du bouton sur Ajouter un produit.

  8. Sélectionnez la propriété OnSelect pour le contrôle Bouton dans la partie supérieure gauche de l’écran.

  9. Entrez la formule suivante dans la barre de formule.

    SubmitForm(Form1);
NewForm(Form1);
    • La fonction SubmitForm soumet les nouveaux détails du produit à la table Dataverse.
    • NewForm change le mode du formulaire en nouveau formulaire pour ajouter de nouveaux produits après avoir soumis les nouveaux détails du produit.
    • Form1 dans cette formule est le nom du contrôle Modifier le formulaire ajouté précédemment. Mettez à jour le nom du formulaire dans cette formule si votre nom de formulaire est différent.

    Bouton OnSelect - nouveau formulaire.

Cette étape ajoute une galerie verticale vierge pour modifier les éléments en tant que table modifiable.

  1. Dans le volet de gauche, sélectionnez + (Insérer) > Disposition > Galerie verticale vierge.

  2. Sélectionnez la table de Dataverse comme source de données.

  3. Redimensionnez la galerie pour prendre en charge la moitié restante du canevas entier, car cette galerie contiendra toutes les colonnes modifiables de la source de données.

  4. Sélectionnez Modifier la galerie.

    Modifier une galerie verticale vierge.

  5. Dans le volet de gauche, sélectionnez + (Insérer) > Entrée > Entrée de texte.

  6. Alignez la galerie sur les actions suivantes :

    Aligner une galerie verticale vierge.

    1. Déplacez la ligne la plus haute pour le contrôle de saisie de texte dans le coin supérieur gauche de la galerie. Le déplacement de cette ligne la plus haute déplace automatiquement les lignes restantes pour la même colonne.
    2. Redimensionnez la hauteur de la première ligne dans la galerie pour occuper la taille de la première ligne que vous venez de déplacer en haut à gauche.

    À la fin, vous devriez voir toutes les lignes empilées sur le côté gauche de la galerie.

  7. Mettez à jour la formule de propriété Default pour la première ligne de saisie de texte dans la galerie :

    ThisItem.Product
    • ThisItem dans cette formule se rapporte à l’élément dans la source de données sélectionnée ; qui est la table Dataverse dans cet exemple.
    • « Produit » est le nom de la colonne dans la table.
    • Lorsque cette formule est mise à jour pour la première ligne de la galerie, elle met automatiquement à jour toute la colonne avec les noms de produit. Si vous voyez une erreur, vérifiez si vous avez connecté la galerie à la table Dataverse.

    Produit comme vu dans la galerie avec la formule.

  8. Répétez les étapes précédentes pour ajouter un contrôle de saisie de texte pour chaque colonne que vous souhaitez afficher dans l’application en tant que champ modifiable. Assurez-vous de choisir les bonnes colonnes dans la formule en remplaçant « Produit » par les noms de colonnes appropriés.

    Conseil

    Pour redimensionner la largeur, utilisez la propriété Width ou glissez à l’aide des boutons autour de la première ligne de chaque colonne.

  9. Sélectionnez la première ligne de la première colonne à l’intérieur de la galerie et ajoutez la formule suivante à la propriété OnChange avec les modifications apportées aux noms de colonne et de contrôle, le cas échéant :

    Patch('Editable tables',ThisItem,{Product:TextInput8.Text})
    • La fonction Patch dans cette formule met à jour la table sélectionnée en tant que source de données avec les valeurs lorsqu’elles sont modifiées.
    • « Tables modifiables » est l’exemple de nom de la source de données.
    • ThisItem se rapporte à l’élément dans le source de données sélectionné pour cette colonne.
    • « Produit » est le nom de la colonne dans la source de données sélectionnée.
    • « TextInput8 » est le nom du contrôle de saisie de texte ajouté à la galerie attachée à la colonne « Produit » pour la source de données sélectionnée.
    • « Texte » pour « TextInput8 » est le texte entré dans la cellule sélectionnée dans le tableau modifiable sur le canevas.

    Formule OnChange pour la galerie.

  10. Répétez l’étape précédente pour chaque contrôle de saisie de texte ajouté pour le reste des colonnes de la source de données connectée. Assurez-vous que la formule est mise à jour pour utiliser les noms de colonne et de contrôle corrects.

Étape 5 : Configurer les options de modification et d’annulation

Cette étape ajoute les options de modification et d’annulation de la progression de la modification. La galerie ayant des contrôles de saisie de texte modifiables par défaut peut être soumise à des mises à jour involontaires. Le fait d’avoir une option de modification explicite, puis d’arrêter la capacité de modification, garantit que les modifications sont toujours attendues.

  1. Sélectionnez Insérer dans le menu supérieur > Icônes, puis ajoutez deux icônes - Modifier et Annuler (badge).

    Possibilité de modifier ou d’annuler.

  2. Dans le volet gauche, sélectionnez Arborescence, puis sélectionnez Application.

  3. Sélectionnez la propriété OnStart, puis ajoutez la formule suivante avec les modifications apportées au nom de la galerie, le cas échéant :

    Gallery2.DisplayMode = "galleryDisplayMode";
Set(galleryDisplayMode, DisplayMode.Disabled);
    • « Gallery2 » dans cette formule est le nom de la galerie.
    • DisplayMode est la propriété DisplayMode de la galerie sélectionnée.
    • « galleryDisplayMode » est la nouvelle variable que cette formule crée pour stocker la valeur du mode d’affichage de la galerie.
    • La fonction Set définit la variable « galleryDisplayMode » définie dans la ligne précédente avec la valeur « Disabled » en utilisant « DisplayMode.Disabled ». Avec le mode d’affichage désactivé, la galerie n’est pas modifiable par défaut au démarrage de l’application (application OnStart).

  4. Sélectionnez la galerie verticale vide, puis sélectionnez la propriété DisplayMode.

  5. Mettez à jour la valeur de la propriété de Edit à galleryDisplayMode. Ce changement garantit que le mode de la galerie est toujours défini à l’aide de la valeur de la variable « galleryDisplayMode » créée à l’étape précédente.

  6. Mettez à jour les propriétés et les formules des icônes comme ci-dessous :

    Icône Propriété Formule
    Modifier OnSelect Set(galleryDisplayMode, DisplayMode.Edit)
    Modifier Visible galleryDisplayMode = DisplayMode.Disabled
    Annuler OnSelect Set(galleryDisplayMode, DisplayMode.Disabled)
    Annuler Visible galleryDisplayMode = DisplayMode.Edit
    • La fonction Set définit le mode d’affichage de la galerie en fonction de l’icône sélectionnée.
    • La variable « galleryDisplayMode » contrôle la visibilité des icônes de modification ou d’annulation. Lorsque la galerie est modifiable, seul le bouton Annuler apparaît. Et seul le bouton de modification apparaît lorsque la galerie est désactivée.

  7. Chevauchez les icônes de modification et d’annulation, car nous gérons la visibilité des deux icônes en fonction de l’état de la galerie.

    Modifier ou annuler avec modification de la galerie.

    Conseil

    Vous pouvez utiliser le bouton Aperçu en haut à droite de l’écran pour prévisualiser l’application, ou utiliser la touche F5 du clavier. Une autre alternative rapide pour tester est d’appuyer sur le bouton Alt du clavier et de sélectionner le bouton tout en maintenant la touche enfoncée. Cette méthode simule également la fonctionnalité de prévisualisation de l’application pour la sélection spécifique pendant que la touche reste enfoncée.

Étape 6 : Ajouter une fonction de recherche

À mesure que les données de la source de données connectée augmentent, il devient difficile de trouver une ligne spécifique. Cette étape ajoute une capacité de recherche à l’application pour filtrer la galerie avec les mots-clés recherchés, ce qui facilite la recherche de données pertinentes.

  1. Ajoutez un contrôle de saisie de texte au milieu du canevas, au-dessus de la galerie.

  2. Mettre à jour la propriété Items pour la galerie avec la formule suivante au lieu du nom de la table, en remplaçant les noms de table et de contrôle selon le cas.

    If(IsBlank(TextInput15.Text),'Editable tables',Filter('Editable tables',(TextInput15.Text in Product) || TextInput15.Text in Segment))
    • La fonction If vérifie si les termes de recherche sont spécifiés ou vides. La galerie est remplie en fonction des éléments répertoriés.
    • La fonction IsBlank vérifie si le texte de recherche est spécifié ou non.
    • « Tables modifiables » est le nom de l’exemple de source de données connectée dans cet exemple. Cette valeur est définie par défaut si aucun terme de recherche n’est spécifié.
    • La fonction Filter filtre les éléments de la galerie en fonction des critères de texte définis dans cette fonction. Cette fonction permet de filtrer la galerie en fonction du terme recherché.
    • « TextInput15 » est le nom du contrôle de saisie de texte utilisé comme champ de recherche pour filtrer la galerie.
    • « Produit » et « Segment » sont les noms des colonnes recherchées à l’aide du texte défini dans le champ « TextInput15 » à l’aide de la syntaxe .Text.
    • « In » vérifie la valeur du contrôle de saisie de texte dans la colonne spécifiée dans la source de données connectée.
    • « || » est la condition « OR », ce qui signifie que la recherche doit être effectuée pour les colonnes Produit ou Segment. De même, vous pouvez mettre à jour la formule en fonction des besoins spécifiques de votre entreprise.

    Filtrer la galerie en fonction des critères définis.

    Conseil

    Vous pouvez conserver les anciennes fonctions ou ajouter des commentaires en utilisant « // » dans la barre de formule. Cette méthode peut être plus utile pour des formules plus complexes ou pour conserver des fonctionnalités plus anciennes au cas où vous voudriez revenir plus tard.

Étape 7 : Modifications diverses telles que la marque, les informations de profil et la réinitialisation

L’exemple d’application est complet avec les fonctionnalités attendues dans ce didacticiel. Cependant, des considérations supplémentaires peuvent être ajoutées, telles que la possibilité de réinitialiser le contrôle de saisie de texte de filtre, la marque comme le titre de la galerie et de l’application, et les détails du profil utilisateur. Vous pouvez également faire plus, commencer par Ajouter et configurer des contrôles dans les applications canevas.

Le tableau suivant récapitule toutes les informations de personnalisation, de profil et de réinitialisation ajoutées à l’exemple d’application. Utilisez la méthode décrite plus haut dans cet article pour travailler avec différents contrôles et propriétés. Assurez-vous de remplacer les noms de table, de connecteur et de contrôle comme il convient.

Fonctionnalité Control Propriétés Informations supplémentaires
Bannière/Étiquette de l’application en haut de l’écran Étiquette de texte Texte - « Gestion du catalogue d’administration »
Taille de police - 28
Couleur de remplissage - Bleu
Alignement du texte - Aligner au centre		 Modifiez toutes les valeurs comme il convient.
Ajoutez le nom complet de l’utilisateur en haut à droite de l’écran Étiquette de texte Texte - Office365Users.MyProfileV2().displayName Connectez-vous d’abord à Microsoft 365 en ajoutant une connexion à Utilisateurs Office 365.
Ajouter une photo de profil utilisateur sur le côté gauche du nom complet de l’utilisateur sur le côté supérieur droit de l’écran Image Image - Office365Users.UserPhotoV2(Office365Users.MyProfileV2().userPrincipalName) Connectez-vous d’abord à Microsoft 365 en ajoutant une connexion à Utilisateurs Office 365.
Réinitialiser la zone de texte de recherche dans le coin supérieur gauche de l’écran Icône de type « Recharger » OnSelect - Reset(TextInput15) où « TextInput15 » est le contrôle de saisie de texte utilisé comme zone de recherche. Lorsqu’il est sélectionné, il réinitialisera la zone de texte de recherche, ce qui entraînera la galerie à afficher toutes les données par défaut.
Mettre à jour le texte pour le bouton Ajouter un produit Bouton Ajouter un produit Texte - « Ajouter un nouveau produit » Modifiez le cas échéant.
Ajoutez une Étiquette au-dessus de la galerie, sur le côté gauche de la zone de saisie de recherche pour indiquer les produits actuels Étiquette de texte Texte - « Produits actuels »
Taille de police - 16
Épaisseur de police - Gras		 Modifiez le cas échéant.
Ajouter un texte d’astuce pour la zone de saisie de texte de recherche Saisie de texte Texte de l’astuce - « Rechercher des produits ou des segments » Modifiez le cas échéant et assurez-vous que la liste des champs (tels que Produits, Segments) s’aligne avec les noms de colonne dans votre source de données.

Par exemple, l’écran terminé ressemble à ceci avec les contrôles et les propriétés configurés ci-dessus :

Version finale de l’application avec tous les contrôles et propriétés configurés.

Étape 8 : Enregistrer, publier et partager

Maintenant que vous avez terminé l’exemple d’application, enregistrez, publiez et partagez l’application au sein de votre organisation ou avec des invités.

Voir aussi

Notes

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

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