#Ekstensi Field

Di NocoBase, Component Field digunakan untuk menampilkan dan mengedit data di tabel dan form. Dengan extends class dasar terkait FieldModel, Anda dapat menyesuaikan cara rendering Field — seperti menampilkan data dalam format khusus, atau mengedit dengan Component kustom.

#Contoh: Field Tampilan Kustom

Contoh berikut membuat Field tampilan sederhana — menambahkan kurung siku [] di kedua sisi nilai field:

// 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 dapat mendapatkan record lengkap baris saat ini
    console.log('Record saat ini:', this.context.record);
    console.log('Index record saat ini:', this.context.recordIndex);
    return <span>[{value}]</span>;
  }
}

// Mengikat ke interface field tipe 'input'
DisplayItemModel.bindModelToInterface('DisplaySimpleFieldModel', ['input']);

Beberapa poin kunci:

• renderComponent(value) — Menerima nilai field saat ini sebagai parameter, return JSX yang dirender
• this.context.record — Mendapatkan record data lengkap baris saat ini
• this.context.recordIndex — Mendapatkan index baris saat ini
• ClickableFieldModel — Inherits dari FieldModel, dengan kemampuan interaksi klik
• DisplayItemModel.bindModelToInterface() — Mengikat model field ke tipe interface field yang ditentukan (seperti input merepresentasikan field tipe input teks), sehingga di field tipe yang sesuai dapat memilih Component tampilan ini

#Mendaftarkan Field

Di load() Plugin gunakan registerModelLoaders untuk loading dan registrasi sesuai kebutuhan:

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

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

Setelah registrasi selesai, di Block tabel temukan kolom field tipe yang sesuai (seperti contoh di atas mengikat input, sesuai dengan field teks satu baris), klik tombol konfigurasi kolom, di dropdown menu "Component Field" dapat beralih ke Component tampilan kustom ini. Untuk contoh praktis lengkap lihat Membuat Component Field Kustom.

#Source Code Lengkap

• @nocobase-example/plugin-field-simple — Contoh Component Field kustom

#Tautan Terkait

• Praktik Plugin: Membuat Component Field Kustom — Membangun Component tampilan field kustom dari nol
• Praktik Plugin: Membuat Plugin Manajemen Data Front-Back End — Aplikasi praktis Field kustom dalam plugin lengkap
• Ikhtisar FlowEngine — Penggunaan dasar FlowModel
• Ekstensi Block — Block kustom
• Ekstensi Action — Tombol Action kustom
• Definisi FlowDefinition — Parameter lengkap dan tipe event registerFlow
• Dokumentasi Lengkap FlowEngine — Referensi lengkap