on” class=”mkdocs-anchor” aria-hidden=”true”># Field Dependencies (depends_on)

Salah satu fitur unggulan MadOptions adalah Field Dependencies. Fitur ini memungkinkan sebuah field disembunyikan atau ditampilkan secara dinamis berdasarkan nilai field lain secara real-time di browser tanpa perlu me-reload halaman.

# Cara Pakai

Tambahkan parameter dependson saat mendaftarkan field turunan. Nilainya adalah array dengan format 'fieldidpengontrol' => 'nilaiyang_diinginkan':

// 1. Field Pengontrol (Utama)
$panel->add_field( array(
    'id'      => 'header_layout',
    'section' => 'header',
    'type'    => 'select',
    'title'   => 'Layout Header',
    'default' => 'default',
    'options' => array(
        'default'  => 'Default',
        'centered' => 'Centered',
        'magazine' => 'Magazine',
    ),
) );

// 2. Field Dependen Tunggal — HANYA muncul jika header_layout = 'magazine'
$panel->add_field( array(
    'id'         => 'magazine_navbar_bg',
    'section'    => 'header',
    'type'       => 'color',
    'title'      => 'Warna Background Nav Bar',
    'default'    => '#0e0f0f',
    'depends_on' => array( 'header_layout' => 'magazine' ),
) );

// 3. Field Dependen Multi-Value — Muncul jika header_layout bernilai 'magazine' ATAU 'centered'
$panel->add_field( array(
    'id'         => 'header_search_color',
    'section'    => 'header',
    'type'       => 'color',
    'title'      => 'Warna Ikon Search',
    'depends_on' => array( 'header_layout' => array( 'magazine', 'centered' ) ),
) );

# Cara Kerja

• Sisi Server (PHP): Saat halaman admin pertama kali dimuat, field yang persyaratannya tidak cocok otomatis diberi kelas CSS madoptions-field-hidden. Ini menjamin tidak ada kedipan visual (no flash of unstyled content).
• Sisi Klien (JavaScript): Skrip assets/js/madoptions.js memantau event change atau input dari field pengontrol. Begitu nilai berubah, field dependen ditampilkan atau disembunyikan seketika dengan transisi yang halus.
• Indikator Visual: Field yang bersifat dependen otomatis diberi penanda visual prefix tanda panah ↳ pada label judulnya untuk memperjelas hierarki pengaturan.

# Tipe Field Pengontrol yang Didukung

Fitur depends_on mendukung berbagai tipe field sebagai pemicu: