#Ein benutzerdefiniertes Feld-Component erstellen

In NocoBase werden Feld-Components verwendet, um in Tabellen und Formularen Daten anzuzeigen und zu bearbeiten. Dieses Beispiel zeigt, wie Sie mit ClickableFieldModel ein benutzerdefiniertes Feld-Anzeige-Component erstellen — der Feldwert wird in eckige Klammern [] eingefasst und an ein Feld-Interface vom Typ input gebunden.

#Endergebnis

Wir erstellen ein benutzerdefiniertes Feld-Anzeige-Component:

• erbt von ClickableFieldModel und passt die Render-Logik an
• zeigt den Feldwert mit [] darum herum an
• über bindModelToInterface an Felder vom Typ input (einzeiliger Text) gebunden

Nach dem Aktivieren des Plugins können Sie im Tabellenblock zu einer einzeiligen Textfeld-Spalte wechseln, auf den Konfigurations-Button der Spalte klicken und im Dropdown „Feld-Component" die Option DisplaySimpleFieldModel sehen. Nach dem Wechsel wird der Wert dieser Spalte im Format [value] angezeigt.

Vollständigen Quellcode siehe @nocobase-example/plugin-field-simple. Wenn Sie es lokal ausprobieren möchten:

yarn pm enable @nocobase-example/plugin-field-simple

Im Folgenden bauen wir dieses Plugin Schritt für Schritt von Grund auf auf.

#Schritt 1: Plugin-Gerüst erstellen

Im Stammverzeichnis des Repositories ausführen:

yarn pm create @my-project/plugin-field-simple

Detaillierte Erläuterungen siehe Erstes Plugin schreiben.

#Schritt 2: Feld-Modell erstellen

Erstellen Sie src/client-v2/models/DisplaySimpleFieldModel.tsx. Das ist der Kern des Plugins — hier wird festgelegt, wie das Feld gerendert wird und an welches Feld-Interface es gebunden wird.

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

export class DisplaySimpleFieldModel extends ClickableFieldModel {
  public renderComponent(value: string) {
    // Über this.context.record erhalten Sie den vollständigen Datensatz der aktuellen Zeile
    console.log('Aktueller Datensatz:', this.context.record);
    console.log('Aktueller Datensatz-Index:', this.context.recordIndex);
    return <span>[{value}]</span>;
  }
}

// Den im Dropdown „Feld-Component" angezeigten Namen festlegen
DisplaySimpleFieldModel.define({
  label: tExpr('Simple field'),
});

// An das Feld-Interface vom Typ 'input' (einzeiliger Text) binden
DisplayItemModel.bindModelToInterface('DisplaySimpleFieldModel', ['input']);

Wichtige Punkte:

• renderComponent(value) — empfängt den aktuellen Feldwert als Parameter und gibt das gerenderte JSX zurück
• this.context.record — ruft den vollständigen Datensatz der aktuellen Zeile ab
• this.context.recordIndex — ruft den Index der aktuellen Zeile ab
• ClickableFieldModel — erbt von FieldModel und bringt Klick-Interaktion mit
• define({ label }) — legt den im Dropdown „Feld-Component" angezeigten Namen fest; ohne dies wird der Klassenname direkt angezeigt
• DisplayItemModel.bindModelToInterface() — bindet das Feld-Modell an einen bestimmten Feld-Interface-Typ (z. B. steht input für einzeilige Textfelder), sodass dieses Anzeige-Component bei den passenden Feldern auswählbar ist

#Schritt 3: Mehrsprachen-Dateien hinzufügen

Bearbeiten Sie die Übersetzungsdateien unter src/locale/ des Plugins und ergänzen Sie alle in tExpr() verwendeten Schlüssel mit Übersetzungen:

// src/locale/zh-CN.json
{
  "Simple field": "简单字段"
}

// src/locale/en-US.json
{
  "Simple field": "Simple field"
}

Mehr zur Schreibweise von Übersetzungsdateien und zur Verwendung von tExpr() siehe i18n Internationalisierung.

#Schritt 4: Im Plugin registrieren

Bearbeiten Sie src/client-v2/plugin.tsx und laden Sie das Modell per Lazy Loading mit registerModelLoaders:

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

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

export default PluginFieldSimpleClient;

#Schritt 5: Plugin aktivieren

yarn pm enable @my-project/plugin-field-simple

Nach der Aktivierung können Sie im Tabellenblock zu einer einzeiligen Textfeld-Spalte wechseln, auf den Konfigurations-Button der Spalte klicken und im Dropdown „Feld-Component" zu diesem benutzerdefinierten Anzeige-Component wechseln.

#Vollständiger Quellcode

• @nocobase-example/plugin-field-simple — Vollständiges Beispiel eines benutzerdefinierten Feld-Components

#Zusammenfassung

In diesem Beispiel verwendete Fähigkeiten:

#Verwandte Links

• Erstes Plugin schreiben — Plugin-Gerüst von Grund auf erstellen
• FlowEngine-Übersicht — Grundlegende Verwendung von FlowModel
• FlowEngine → Feld-Erweiterung — FieldModel, ClickableFieldModel, bindModelToInterface
• FlowEngine → Block-Erweiterung — Benutzerdefinierte Blöcke
• Component vs FlowModel — Wann FlowModel verwenden
• Plugin — Plugin-Einstiegspunkt und load()-Lebenszyklus
• i18n Internationalisierung — Schreibweise von Übersetzungsdateien und Verwendung von tExpr
• Vollständige FlowEngine-Dokumentation — Vollständige Referenz zu FlowModel, Flow, Context