#Membuat Component Field Kustom

Di NocoBase, Component Field digunakan untuk menampilkan dan mengedit data di tabel dan form. Contoh ini menunjukkan cara membuat Component tampilan Field kustom dengan ClickableFieldModel — menambahkan tanda kurung siku [] di kedua sisi nilai Field, dan mengikatnya ke interface Field tipe input.

#Hasil Akhir

Yang akan kita buat adalah Component tampilan Field kustom:

• Mewarisi ClickableFieldModel, dengan logika rendering kustom
• Menampilkan nilai Field dengan tanda kurung siku [] di kedua sisinya
• Mengikat ke Field tipe input (single-line text) melalui bindModelToInterface

Setelah plugin diaktifkan, di Block tabel temukan kolom Field single-line text, klik tombol konfigurasi kolom, di dropdown menu "Component Field" Anda akan melihat opsi DisplaySimpleFieldModel. Setelah berpindah, nilai kolom tersebut akan ditampilkan dalam format [value].

Source code lengkap lihat @nocobase-example/plugin-field-simple. Jika Anda ingin langsung menjalankannya secara lokal untuk melihat hasilnya:

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

Berikutnya, mari kita bangun plugin ini dari nol, langkah demi langkah.

#Langkah 1: Membuat Skeleton Plugin

Eksekusi di direktori root repository:

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

Untuk penjelasan detail lihat Menulis Plugin Pertama Anda.

#Langkah 2: Membuat Model Field

Buat src/client-v2/models/DisplaySimpleFieldModel.tsx. Ini adalah inti dari plugin — mendefinisikan bagaimana Field dirender dan ke interface Field mana ia diikat.

// 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 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>;
  }
}

// Mengatur nama tampilan di dropdown menu "Component Field"
DisplaySimpleFieldModel.define({
  label: tExpr('Simple field'),
});

// Mengikat ke interface Field tipe 'input' (single-line text)
DisplayItemModel.bindModelToInterface('DisplaySimpleFieldModel', ['input']);

Beberapa poin penting:

• renderComponent(value) — Menerima nilai Field saat ini sebagai parameter, mengembalikan JSX yang akan dirender
• this.context.record — Mendapatkan record data lengkap baris saat ini
• this.context.recordIndex — Mendapatkan index baris saat ini
• ClickableFieldModel — Mewarisi dari FieldModel, memiliki kapabilitas interaksi klik
• define({ label }) — Mengatur nama tampilan di dropdown menu "Component Field", jika tidak ditambahkan akan langsung menampilkan nama kelas
• DisplayItemModel.bindModelToInterface() — Mengikat model Field ke tipe interface Field yang ditentukan (misalnya input mewakili Field single-line text), sehingga di Field tipe yang sesuai dapat memilih Component tampilan ini

#Langkah 3: Menambahkan File Multibahasa

Edit file terjemahan di src/locale/ plugin, tambahkan terjemahan untuk key yang digunakan tExpr():

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

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

Untuk cara penulisan file terjemahan dan penggunaan tExpr() lebih lanjut, lihat i18n Internasionalisasi.

#Langkah 4: Mendaftarkan di Plugin

Edit src/client-v2/plugin.tsx, lazy loading model dengan 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;

#Langkah 5: Mengaktifkan Plugin

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

Setelah diaktifkan, di Block tabel temukan kolom Field single-line text, klik tombol konfigurasi kolom, di dropdown menu "Component Field" Anda dapat berpindah ke Component tampilan kustom ini.

#Source Code Lengkap

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

#Ringkasan

Kapabilitas yang digunakan dalam contoh ini:

#Tautan Terkait

• Menulis Plugin Pertama Anda — Membuat skeleton plugin dari nol
• Ikhtisar FlowEngine — Penggunaan dasar FlowModel
• FlowEngine → Ekstensi Field — FieldModel, ClickableFieldModel, bindModelToInterface
• FlowEngine → Ekstensi Block — Block Kustom
• Component vs FlowModel — Kapan menggunakan FlowModel
• Plugin — Entry point Plugin dan lifecycle load()
• i18n Internasionalisasi — Cara menulis file terjemahan dan penggunaan tExpr
• Dokumentasi FlowEngine Lengkap — Referensi lengkap FlowModel, Flow, Context