#カスタムフィールドコンポーネントを作る

NocoBase では、フィールドコンポーネントはテーブルやフォーム内でデータを表示・編集するために使います。この例では ClickableFieldModel を使ってカスタムフィールド表示コンポーネントを作る方法を示します。フィールドの値の両側に角括弧 [] を追加し、input タイプのフィールドインターフェースにバインドします。

#最終的な効果

カスタムフィールド表示コンポーネントを作ります：

• ClickableFieldModel を継承し、レンダリングロジックをカスタマイズ
• フィールドの値の両側に [] を追加して表示
• bindModelToInterface で input（単行テキスト）タイプのフィールドにバインド

プラグインを有効化後、テーブルブロック内の単行テキストフィールドの列で、列の設定ボタンをクリックし、「フィールドコンポーネント」ドロップダウンに DisplaySimpleFieldModel オプションが表示されます。切り替えると、その列の値が [value] 形式で表示されます。

完全なソースコードは @nocobase-example/plugin-field-simple を参照してください。ローカルで動作確認したい場合：

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

以下、ゼロからこのプラグインを構築していきます。

#ステップ1：プラグインスケルトンの作成

リポジトリのルートで実行します：

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

詳しくははじめてのプラグインを書くをご覧ください。

#ステップ2：フィールドモデルの作成

src/client-v2/models/DisplaySimpleFieldModel.tsx を新規作成します。これがプラグインの中核で、フィールドのレンダリング方法とバインド先のフィールドインターフェースを定義します。

// 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) {
    // this.context.record で現在の行の完全なレコードを取得可能
    console.log('現在のレコード：', this.context.record);
    console.log('現在のレコード index：', this.context.recordIndex);
    return <span>[{value}]</span>;
  }
}

// 「フィールドコンポーネント」ドロップダウンでの表示名を設定
DisplaySimpleFieldModel.define({
  label: tExpr('Simple field'),
});

// 'input'（単行テキスト）タイプのフィールドインターフェースにバインド
DisplayItemModel.bindModelToInterface('DisplaySimpleFieldModel', ['input']);

重要なポイント：

• renderComponent(value) — 現在のフィールドの値を引数として受け取り、レンダリングする JSX を返す
• this.context.record — 現在の行の完全なデータレコードを取得
• this.context.recordIndex — 現在の行のインデックスを取得
• ClickableFieldModel — FieldModel を継承し、クリックインタラクション機能を持つ
• define({ label }) — 「フィールドコンポーネント」ドロップダウンでの表示名を設定。追加しないとクラス名がそのまま表示される
• DisplayItemModel.bindModelToInterface() — フィールドモデルを指定のフィールドインターフェースタイプにバインド（例：input は単行テキストフィールド）。対応するタイプのフィールドでこの表示コンポーネントを選択できるようになる

#ステップ3：多言語ファイルの追加

プラグインの src/locale/ 配下の翻訳ファイルを編集し、tExpr() で使用する key の翻訳を追加します：

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

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

翻訳ファイルの書き方と tExpr() のその他の使い方については、i18n 国際化をご覧ください。

#ステップ4：プラグインへの登録

src/client-v2/plugin.tsx を編集し、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;

#ステップ5：プラグインの有効化

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

有効化後、テーブルブロック内の単行テキストフィールドの列で、列の設定ボタンをクリックし、「フィールドコンポーネント」ドロップダウンからこのカスタム表示コンポーネントに切り替えられます。

#完全なソースコード

• @nocobase-example/plugin-field-simple — カスタムフィールドコンポーネントの完全な例

#まとめ

この例で使用した機能：

#関連リンク

• はじめてのプラグインを書く — ゼロからプラグインスケルトンを作成
• FlowEngine 概要 — FlowModel の基本的な使い方
• FlowEngine → フィールド拡張 — FieldModel、ClickableFieldModel、bindModelToInterface
• FlowEngine → ブロック拡張 — カスタムブロック
• Component vs FlowModel — いつ FlowModel を使うか
• Plugin プラグイン — プラグインエントリと load() ライフサイクル
• i18n 国際化 — 翻訳ファイルの書き方と tExpr の使い方
• FlowEngine 完全ドキュメント — FlowModel、Flow、Context の完全リファレンス