• 日本語

      • フィールド拡張

      NocoBase では、フィールドコンポーネント（Field） はテーブルやフォーム内でデータを表示・編集するために使います。FieldModel 関連の基底クラスを継承することで、フィールドのレンダリング方法をカスタマイズできます。例えば特殊なフォーマットでデータを表示したり、カスタムコンポーネントで編集したりできます。

      例：カスタム表示フィールド

      以下の例では、フィールドの値の両側に角括弧 [] を追加するシンプルな表示フィールドを作成します：

      20260407201138

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

// 'input' タイプのフィールドインターフェースにバインド
DisplayItemModel.bindModelToInterface('DisplaySimpleFieldModel', ['input']);

      重要なポイント：

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

      フィールドの登録

      Plugin の load() 内で registerModelLoaders を使って遅延読み込み登録します：

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

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

      登録完了後、テーブルブロック内の対応するタイプのフィールド列（上記の例では input にバインドしたため単行テキストフィールド）で、列の設定ボタンをクリックし、「フィールドコンポーネント」ドロップダウンからこのカスタム表示コンポーネントに切り替えられます。完全な実践例はカスタムフィールドコンポーネントを作るをご覧ください。

      20260407201221

      完全なソースコード

      関連リンク