#Extension de champ

Dans NocoBase, les composants de champ (Field) servent à afficher et éditer les données dans les tableaux et formulaires. En étendant les classes parentes liées à FieldModel, vous pouvez personnaliser le rendu d'un champ — par exemple afficher un type de données dans un format spécifique ou utiliser un composant personnalisé pour l'éditer.

#Exemple : champ d'affichage personnalisé

L'exemple suivant crée un champ d'affichage simple — il ajoute des crochets [] autour de la valeur du champ :

// models/SimpleFieldModel.tsx
import React from 'react';
import { ClickableFieldModel } from '@nocobase/client-v2';
import { DisplayItemModel } from '@nocobase/flow-engine';

export class DisplaySimpleFieldModel extends ClickableFieldModel {
  public renderComponent(value) {
    // this.context.record permet de récupérer l'enregistrement complet de la ligne courante
    console.log('Enregistrement courant :', this.context.record);
    console.log('Index de l\'enregistrement courant :', this.context.recordIndex);
    return <span>[{value}]</span>;
  }
}

// Lie au type d'interface de champ 'input'
DisplayItemModel.bindModelToInterface('DisplaySimpleFieldModel', ['input']);

Quelques points clés :

• renderComponent(value) — reçoit la valeur courante du champ en paramètre et renvoie le JSX
• this.context.record — récupère l'enregistrement complet de la ligne courante
• this.context.recordIndex — récupère l'index de la ligne courante
• ClickableFieldModel — étend FieldModel avec la capacité d'interaction au clic
• DisplayItemModel.bindModelToInterface() — lie le modèle de champ à un type d'interface de champ (par exemple input pour les champs texte) ; ce composant d'affichage devient alors sélectionnable sur les champs du type correspondant

#Enregistrer un champ

Dans load() du Plugin, utilisez registerModelLoaders pour le chargement à la demande :

// plugin.tsx
import { Plugin } from '@nocobase/client-v2';

export class PluginFieldSimpleClient extends Plugin {
  async load() {
    this.flowEngine.registerModelLoaders({
      DisplaySimpleFieldModel: {
        loader: () => import('./models/SimpleFieldModel'),
      },
    });
  }
}

Une fois enregistré, dans un bloc tableau, trouvez la colonne d'un champ d'un type correspondant (ici input pour les champs texte sur une ligne), cliquez sur le bouton de configuration de la colonne et, dans le menu déroulant « Composant de champ », vous pourrez basculer vers ce composant d'affichage personnalisé. Voir Faire un composant de champ personnalisé pour un exemple pratique complet.

#Code source complet

• @nocobase-example/plugin-field-simple — exemple de composant de champ personnalisé

#Liens connexes

• Pratique : faire un composant de champ personnalisé — construire un composant d'affichage de champ personnalisé de zéro
• Pratique : faire un plugin de gestion de données front+back — application réelle du champ personnalisé dans un plugin complet
• Aperçu de FlowEngine — utilisation de base de FlowModel
• Extension de bloc — bloc personnalisé
• Extension d'action — bouton d'action personnalisé
• Définition de Flow FlowDefinition — paramètres complets de registerFlow et types d'événements
• Documentation complète FlowEngine — référence complète