Field Micro Frontend (MFE)

Komponen Micro Frontend pada Form Builder memungkinkan Anda menyematkan aplikasi React sendiri ke dalam form AlurKerja. Halaman ini menjelaskan arti setiap key pada deklarasi field EXTERNAL_MICRO_FRONTEND_FORM, siapa yang mengonsumsi key tersebut (platform atau komponen MFE), dan kenapa sebagian key terlihat "tidak berefek" — kasus paling sering: "disabled": true yang ternyata tetap bisa diisi user.

Contoh Deklarasi Lengkap

{
  "ui_type": "EXTERNAL_MICRO_FRONTEND_FORM",
  "label": {
    "en": "External Micro Frontend Form",
    "id": "Formulir Micro Frontend Eksternal"
  },
  "name": "email_raf_user_form_form_user_form",
  "url": "https://api.staging.alurkerja.com/api/v1/integration/addons/email_form/views/remoteEntry.js",
  "component_scope": "email_form",
  "component_name": "create_view",
  "height": "",
  "width": "100%",
  "disabled": false,
  "logic": {
    "expression": ""
  },
  "constraints": {
    "required": false,
    "required_if": { "expression": "" }
  },
  "additional_mfe_config": {
    "addonId": "1189"
  }
}

Prinsip Utama: Host Hanya Menitipkan, MFE yang Merender

Ada dua kelompok key dalam deklarasi di atas, dan ini sumber semua kebingungan:

Untuk field bawaan AlurKerja (TEXT_FIELD, SELECT, dll.), host yang merender input-nya, sehingga host bisa memaksakan disabled/required/placeholder. Untuk EXTERNAL_MICRO_FRONTEND_FORM, yang merender adalah React component milik Anda. Host tidak punya cara memaksa <input> di dalam JSX pihak ketiga menjadi disabled — maka semua payload key statusnya advisory: hanya data titipan.

Bentuk prop yang diterima komponen (lihat views/src/type/AlurkerjaType.ts pada project addon):

export interface AlurkerjaMfeInputProps {
    props: {
        form: { setValue, register, control, watch, getValues };
        item: InputType;      // ← SELURUH JSON deklarasi di atas masuk ke sini
    };
    alurkerjaParams: {
        apiBaseUrl?: string;
        token: string;
        activeTenant: string;
        probis: string;
        taskId: string;
        [key: string]: any;
    };
}

Tabel Referensi Key

Kenapa disabled: true Tidak Terimplementasi?

Karena tidak ada bug di platform — disabled memang tidak pernah ditegakkan (enforced) oleh host untuk MFE. Host hanya menyalinnya ke props.item.disabled. Jika komponennya tidak membaca nilai itu, tidak ada yang berubah di layar.

Perbandingan dua komponen pada project addon:

Jadi checklist Disabled di konfigurator addon itu valid dan tersimpan; yang belum ada adalah implementasinya di sisi komponen. Ini keputusan developer per-komponen, bukan setting yang hilang.

Cara Menghormati disabled di Komponen

Pola yang dipakai TeamFormView.tsx — sembunyikan kontrol input, tetap tampilkan datanya:

export default function MyView({ props, alurkerjaParams }: AlurkerjaMfeInputProps) {
    const { form, item } = props;
    const isReadOnly = Boolean(item.disabled);

    return (
        <div className="space-y-4">
            {/* Kontrol input: sembunyikan saat read-only */}
            {!isReadOnly && (
                <button onClick={handleAnalyze} disabled={isLoading}>
                    Analisa Nota
                </button>
            )}

            {/* Hasil / data: tetap tampil di kedua mode */}
            {result && <ResultTable data={result} />}
        </div>
    );
}

Tiga hal yang sering terlewat saat mengimplementasikan disabled:

1. Semua tombol aksi (submit, tambah, hapus, upload) ikut dimatikan — bukan hanya yang utama.

2. Validasi required ikut dilepas, supaya form read-only tidak macet saat submit:

   required: (!item.disabled && item.constraints?.required) ? 'Field wajib diisi' : false

3. Alternatif dari menyembunyikan: teruskan ke atribut native/library — <input disabled={isReadOnly} /> atau <Select isDisabled={isReadOnly} />. Pilih satu gaya dan konsisten dalam satu komponen.

Konfigurasi Tambahan: additional_mfe_config

Ini jalur resmi untuk mengirim parameter custom dari deklarasi addon ke komponen, tanpa perlu menambah key baru ke skema field (key baru di luar skema berisiko dibuang oleh validator platform).

1. Deklarasikan di JSON field:

{
  "ui_type": "EXTERNAL_MICRO_FRONTEND_FORM",
  "name": "analyze_receipt",
  "component_name": "analize_nota_view",
  "additional_mfe_config": {
    "addonId": "1189",
    "targetField": "total_amount",
    "maxFiles": "5",
    "autoAnalyze": "false"
  }
}

2. Baca di komponen:

const item = props.item;
const addonId = item.additional_mfe_config?.addonId ?? 3;

Aturan Main

• Selalu pakai optional chaining + default. Konfigurasi/instance lama bisa saja belum punya key-nya: item.additional_mfe_config?.maxFiles ?? 5.

• Nilai dari form builder masuk sebagai string. Perhatikan "addonId": "1189" — bertanda kutip. Konversi eksplisit sebelum dipakai sebagai angka atau boolean:

  const maxFiles = Number(item.additional_mfe_config?.maxFiles ?? 5);
  const autoAnalyze = item.additional_mfe_config?.autoAnalyze === 'true'; // JANGAN Boolean("false")

• Jangan simpan rahasia di sini. Isinya terkirim ke browser dan terbaca di DevTools. Token/API key taruh di config addon (index.json) yang dipakai oleh script Python di sisi server.

• Gunakan camelCase untuk key-nya, mengikuti addonId yang sudah ada.

• Dokumentasikan setiap key baru di README komponen — konfigurator addon tidak punya deskripsi field untuk kantong bebas ini, jadi README-lah satu-satunya sumber kebenaran.

• Agar tab pengisiannya muncul di form builder, sertakan juga:

  "edit_tabs": { "mfeConfig": { "additional_mfe_config": {} } }

Sumber Nilai additional_mfe_config

Nilai additional_mfe_config diisi lewat form builder: klik dua kali komponen Micro Frontend untuk membuka Edit Element, lalu buka tab Mfe Config. Tambahkan pasangan key/value melalui tombol Add Entry — hasilnya dapat langsung dilihat pada bagian Preview dalam bentuk JSON.

Key Lain yang Dikenali Platform

Pemetaan antara field di konfigurator form builder dan key JSON yang dihasilkan:

FAQ

Saya sudah mencentang Disabled, kenapa field MFE masih bisa diisi?

Karena disabled tidak ditegakkan oleh platform untuk field MFE — nilainya hanya dititipkan ke props.item.disabled. Komponen MFE harus membacanya sendiri. Lihat Cara Menghormati disabled di Komponen.

MFE saya tidak muncul sama sekali (blank), apa yang perlu diperiksa?

Periksa ketiga loader key ini: url harus URL absolut yang benar ke remoteEntry.js, component_scope harus sama persis dengan name di ModuleFederationPlugin dan component_scope di index.json, serta component_name harus ditulis tanpa prefix ./.

Bagaimana cara mengirim parameter custom ke komponen MFE?

Gunakan additional_mfe_config. Jangan menambah key baru di luar skema field karena berisiko dibuang oleh validator platform. Lihat Konfigurasi Tambahan.

Kenapa nilai boolean dari additional_mfe_config selalu bernilai true?

Karena semua nilai dari form builder masuk sebagai string. Boolean("false") menghasilkan true. Bandingkan secara eksplisit: item.additional_mfe_config?.autoAnalyze === 'true'.

Apakah label yang saya isi otomatis tampil di atas komponen MFE?

Tidak. Host tidak mencetak judul untuk field MFE. Jika butuh judul, render sendiri di komponen dari item.label.