Opsi Dropdown Berdasarkan Selected Dropdown Sebelumnya

baca : Issue #9

Untuk issue ini baru bisa dicapai ketika menggunakan FormLowcode

1. Buat Formlowcode Base, tambahkan fungsi untuk mendapatkan list option yang akan digunakan dan parsed menjadi format option yang sesuai. disini akan mencontohkan menggunakan data yang dari API dan juga yang statis

import { AlurkerjaForm, Select } from 'alurkerja-ui'
import { useForm } from 'react-hook-form'
import axios from 'axios'

const Example = () => {
  const { formState, handleSubmit, control, setValue } = useForm()

  const [optionJpn, setOptionJpn] = useState()

  async function getJpn() {
    const response = await axios.get('https://kpm-sys.merapi.javan.id/api/crud/jpn')

    const option = response.data.data.content.map((item: any) => ({
      label: item.kod_jpn,
      value: item.id,
    }))
    setTimeout(() => {
      setOptionJpn(option)
    }, 1)
  }

  useEffect(() => {
    getJpn()
  }, [])

  return(
    <AlurkerjaForm
      baseUrl={baseUrl}
      tableName={tableName}
      formState={formState}
      handleSubmit={handleSubmit}
      control={control}
      setValue={setValue}
    />
  )
}

2. Tambahkan attribute customField, kasih kondisi kepada field yang menjadi trigger, hide field dropdown yang dinamis via spec be karena jika dihide via FE labelnya masih ada. pada contoh API ini yang harus di hide adalah field Nama Program

customField={({ field, setValue, defaultField }) => {

  if (field.name === 'status') {
    
  }
  return defaultField
}}

3. Gunakan watch() dan Select dari Alurkerja-UI untuk membaca value dari dropdown, gunakan conditional rendering

customField={({ field, setValue, defaultField }) => {
  if (field.name === 'status') {
    return (
      <>
        {defaultField}
        {watch('status') && (
          <div className="mt-4">
            <div className="mb-1">
              <label htmlFor="">Nama Program</label>
            </div>
            {watch('status') == 0 && <Select options={optionJpn} />}
            {watch('status') == 1 && <Select options={[{ label: 'tes1', value: 1 }]} />}
          </div>
        )}
      </>
    )
  }
  return defaultField
}}

Hasilnya -> disini field nama program double karena belum di hide via spec be

Feedback & Pertanyaan

Apabila ada pertanyaan atau feedback bisa comment di issue gitlab yang terlampir dan menghubungi developer terkait