Personnaliser le contrôle de grille modifiable

Cet article explique comment personnaliser le contrôle de grille modifiable dans Power Apps pour répondre aux exigences spécialisées en matière de visuel et d’interaction. Utilisez les API d’extensibilité du contrôle de grille Power Apps pour créer un composant de code de personnalisation de grille avec des moteurs de rendu de cellule et des éditeurs de cellule personnalisés.

Commande de personnalisation de la grille

Un personnalisateur de grille est un contrôle PCF qui implémente l’interface du personnalisateur de contrôle de grille Power Apps. Cette interface vous permet de définir l’élément React qui s’affiche lorsqu’une cellule de grille est en mode lecture seule (le renderer de cellule) ou en mode édition (l’éditeur de cellule). Plusieurs contrôles de personnalisation de grille peuvent exister dans un environnement, mais chaque grille ne peut avoir qu’un seul contrôle de personnalisation de grille attribué. Vous pouvez décider qu’un contrôle de personnalisateur distinct est nécessaire pour chaque grille que vous souhaitez modifier, ou vous pouvez choisir de réutiliser le même contrôle de personnalisateur pour plusieurs grilles.

Implémenter un contrôle de personnalisation de grille

Pour implémenter un contrôle de personnalisation de grille, vous devez d’abord vous familiariser avec les étapes visant à Créer et construire un composant de code et vous devez avoir accès au contrôle du modèle.

Le contrôle de modèle est inclus dans le référentiel GitHub PowerApps – Échantillons. Vous devez cloner ou télécharger le référentiel pour accéder aux fichiers situés ici : PowerApps-Samples/component-framework/resources/GridCustomizerControlTemplate

1. Ouvrez le dossier GridCustomizerControlTemplate avec Visual Studio Code.

2. Dans une fenêtre de terminal, exécutez npm install.

3. Créez vos rendus et éditeurs de cellules personnalisés.

   Le code de personnalisation se trouve dans le dossier personnalisateurs.

   • CellRendererOverrides.tsx inclut des personnalisateurs de rendu de cellule par type de données.
   • CellEditorOverrides.tsx inclut des personnalisateurs d’éditeur de cellule par type de données.

   Modifiez ces fichiers pour ajouter des éléments React à afficher lorsqu’une cellule est en lecture seule (rendu de cellule) ou en mode édition (éditeur de cellule).

   Chaque fichier exporte un objet qui associe le type de données d’une colonne à une fonction qui renvoie un élément React à afficher dans les cellules de ce type de colonne.

   /**
    * Provide cell renderer overrides per column data type.
   */
    export interface CellRendererOverrides {
      [dataType: string]: (props: CellRendererProps, rendererParams: GetRendererParams)
      => React.ReactElement | null | undefined; 
   };
   
   /**
    * Provide cell editor overrides per column data type.
   */
    export interface CellEditorOverrides {
      [dataType: string]: (defaultProps: CellEditorProps, rendererParams: GetEditorParams)
      => React.ReactElement | null | undefined; 
   };
   

   Remarque

   Si la fonction retourne null ou non définie, la grille utilise le renderer interne ou l’éditeur pour les cellules ciblées.

4. Après avoir défini vos rendus et éditeurs de cellules personnalisés, empaquetez le contrôle du personnalisateur de grille et importez-le vers votre environnement Power Apps. Vous pouvez également utiliser la commande pac pcf push .

5. Après avoir publié le contrôle de personnalisateur de grille, ouvrez le volet Personnaliser le système depuis le menu Paramètres > Personnalisations.

   

6. À partir du nœud Entités, sélectionnez une entité ciblée par votre contrôle de personnalisateur (par exemple, Compte).

7. Depuis le volet de droite, sélectionnez l’onglet Contrôles.

   

8. Dans la liste Contrôles, ajoutez le Contrôle de grille Power Apps.

   

9. Dans le volet Propriétés, définissez la propriété Contrôle du personnalisateur sur le nom logique complet de votre composant de code de personnalisateur de grille.

   Nom logique complet = {publisher prefix}_{namespace}.{control name}

   

10. Enregistrez et publiez vos personnalisations pour cette entité.

11. Testez votre personnalisateur en ouvrant la grille principale de l’entité personnalisée.

12. Répétez les étapes 6 à 11 pour toutes les autres entités dont la grille nécessite un contrôle de personnalisation de grille.

Bonnes pratiques

• Les moteurs de rendu et les éditeurs de cellule sont des composants de l’interface utilisateur. Ne les utilisez pas pour modifier les données ou les métadonnées de la grille.
• Les contrôles du personnalisateur doivent être légers et rapides afin qu’ils n’affectent pas les performances globales de la grille.
• Pour maintenir la cohérence de la conception, suivez les Principes Fluent Design et utilisez les Contrôles Fluent dans les personnalisateurs.
• Vérifiez que votre convertisseur ou éditeur personnalisé est accessible.
• La fonction de personnalisation doit être pure, car la grille l’appelle plusieurs fois pour obtenir des éléments personnalisés et s’attend à ce que la valeur de retour soit cohérente.
• La grille peut libérer un élément de personnalisation à tout moment et en demander un nouveau. Veillez à libérer tout état interne lors du démontage afin d’éviter les fuites de mémoire.
• N’utilisez pas de moteurs de rendu pour remplacer les valeurs de la grille, car le serveur n’utilise pas les nouvelles valeurs pour effectuer le filtrage ou le tri.

Exemple

Vous pouvez trouver un exemple de contrôle de grille modifiable personnalisé ici : Grille modifiable personnalisée.

Voir aussi

Vue d'ensemble de Power Apps component framework
Création de votre premier composant de code
Découvrir Power Apps Component Framework