• Bahasa Indonesia

      • Merender FlowModel

      FlowModelRenderer adalah Component React inti yang digunakan untuk merender FlowModel, bertanggung jawab mengkonversi instance FlowModel menjadi Component React yang dapat divisualisasikan.

      Penggunaan Dasar

      FlowModelRenderer

      import { FlowModelRenderer } from '@nocobase/flow-engine';

// Penggunaan dasar
<FlowModelRenderer model={myModel} />
      /**
 * Contoh kode menunjukkan cara menggunakan plugin dan fitur model NocoBase.
 * - Mendefinisikan HelloModel sederhana untuk merender block UI "Hello, NocoBase!".
 * - Membuat plugin PluginHelloModel yang mendaftarkan model dan merendernya ke route.
 * - Terakhir, memuat plugin dan menjalankan aplikasi melalui instance Application.
 */
import { Application, Plugin } from '@nocobase/client-v2';
import { FlowModelRenderer } from '@nocobase/flow-engine';


/**
 * PluginHelloModel adalah kelas plugin yang mendaftarkan HelloModel dan menambahkannya ke route.
 * - Metode load akan dieksekusi saat plugin dimuat.
 * - Mendaftarkan model ke flowEngine, dan membuat instance model.
 * - Merender instance model ke route pada path root '/'.
 */
class PluginHelloModel extends Plugin {
  async load() {
    // Mendaftarkan HelloModel ke flowEngine
    this.flowEngine.registerModelLoaders({
      HelloModel: {
        // Dynamic import, modul akan dimuat hanya saat model ini benar-benar digunakan untuk pertama kalinya
        loader: () => import('@docs/cn/flow-engine/_demos/HelloModel'),
      },
     });

    // Membuat instance HelloModel (hanya untuk contoh)
    const model = await this.flowEngine.createModelAsync({
      use: 'HelloModel',
    });

    // Menambahkan route, merender model ke path root (hanya untuk contoh)
    this.router.add('root', {
      path: '/',
      element: <FlowModelRenderer model={model} />,
    });
  }
}

// Membuat instance aplikasi, mendaftarkan plugin (hanya untuk contoh)
const app = new Application({
  router: { type: 'memory', initialEntries: ['/'] },
  plugins: [PluginHelloModel],
});

export default app.getRootComponent();

      FieldModelRenderer

      Untuk Model field yang dikontrol, gunakan FieldModelRenderer untuk render:

      import { FieldModelRenderer } from '@nocobase/flow-engine';

// Rendering field yang dikontrol
<FieldModelRenderer model={fieldModel} />

      Parameter Props

      FlowModelRendererProps

      ParameterTipeDefaultPenjelasan
      modelFlowModel-Instance FlowModel yang akan dirender
      uidstring-Identifier unik flow model
      fallbackReact.ReactNode<Skeleton.Button size="small" />Konten fallback saat rendering gagal
      showFlowSettingsboolean | objectfalseApakah menampilkan entry pengaturan flow
      flowSettingsVariant'dropdown' | 'contextMenu' | 'modal' | 'drawer''dropdown'Gaya interaksi pengaturan flow
      hideRemoveInSettingsbooleanfalseApakah menyembunyikan tombol remove dalam pengaturan
      showTitlebooleanfalseApakah menampilkan judul model di pojok kiri atas border
      skipApplyAutoFlowsbooleanfalseApakah melewati auto apply flow
      inputArgsRecord<string, any>-Konteks tambahan yang dilewatkan ke useApplyAutoFlows
      showErrorFallbackbooleantrueApakah membungkus Component FlowErrorFallback di lapisan terluar
      settingsMenuLevelnumber-Level menu pengaturan: 1=hanya model saat ini, 2=termasuk sub model
      extraToolbarItemsToolbarItemConfig[]-Item toolbar tambahan

      Konfigurasi Detail showFlowSettings

      Saat showFlowSettings adalah objek, mendukung konfigurasi berikut:

      showFlowSettings={{
  showBackground: true,    // Menampilkan background
  showBorder: true,        // Menampilkan border
  showDragHandle: true,    // Menampilkan drag handle
  style: {},              // Custom style toolbar
  toolbarPosition: 'inside' // Posisi toolbar: 'inside' | 'above' | 'below'
}}

      Siklus Hidup Rendering

      Seluruh siklus rendering akan memanggil method berikut secara berurutan:

      1. model.dispatchEvent('beforeRender') - Event sebelum rendering
      2. model.render() - Mengeksekusi method rendering model
      3. model.onMount() - Hook mounting Component
      4. model.onUnmount() - Hook unmounting Component

      Contoh Penggunaan

      Rendering Dasar

      import { FlowModelRenderer } from '@nocobase/flow-engine';

function MyComponent() {
  const model = useFlowModel();
  
  return (
    <FlowModelRenderer 
      model={model}
      fallback={<div>Loading...</div>}
    />
  );
}

      Rendering dengan Pengaturan Flow

      // Menampilkan pengaturan tetapi menyembunyikan tombol delete
<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  hideRemoveInSettings={true}
/>

// Menampilkan pengaturan dan judul
<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  showTitle={true}
/>

// Menggunakan mode menu kanan klik
<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  flowSettingsVariant="contextMenu"
  hideRemoveInSettings={true}
/>

      Custom Toolbar

      <FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  extraToolbarItems={[
    {
      key: 'custom-action',
      title: 'Action Kustom',
      icon: 'SettingOutlined',
      onClick: () => {
        console.log('Action kustom');
      }
    }
  ]}
/>

      Melewati Auto Flow

      <FlowModelRenderer
  model={myModel}
  skipApplyAutoFlows={true}
  showErrorFallback={false}
/>

      Rendering Field Model

      import { FieldModelRenderer } from '@nocobase/flow-engine';

function FormField({ model, onChange, ...props }) {
  return (
    <FieldModelRenderer
      model={model}
      onChange={onChange}
      {...props}
    />
  );
}

      Penanganan Error

      FlowModelRenderer memiliki mekanisme penanganan error bawaan yang lengkap:

      • Error Boundary Otomatis: Default mengaktifkan showErrorFallback={true}
      • Error Auto Flow: Menangkap dan menangani error saat eksekusi auto flow
      • Error Rendering: Menampilkan konten fallback saat rendering model gagal
      <FlowModelRenderer
  model={myModel}
  showErrorFallback={true}
  fallback={<div>Rendering gagal, silakan coba lagi</div>}
/>

      Optimasi Performa

      Melewati Auto Flow

      Untuk skenario yang tidak memerlukan auto flow, dapat dilewati untuk meningkatkan performa:

      <FlowModelRenderer
  model={myModel}
  skipApplyAutoFlows={true}
/>

      Update Reaktif

      FlowModelRenderer menggunakan observer dari @formily/reactive-react untuk update reaktif, memastikan Component dapat secara otomatis re-render saat status model berubah.

      Perhatian

      1. Validasi Model: Pastikan model yang dilewatkan memiliki method render yang valid
      2. Manajemen Siklus Hidup: Hook siklus hidup model akan dipanggil pada waktu yang tepat
      3. Error Boundary: Disarankan mengaktifkan error boundary di environment production untuk memberikan pengalaman pengguna yang lebih baik
      4. Pertimbangan Performa: Untuk skenario rendering banyak model, pertimbangkan menggunakan opsi skipApplyAutoFlows