Seperti yang sudah diketahui bersama, sampai dengan versi 2025, PHPMaker memberikan keleluasaan bagi Web Developer untuk memutuskan apakah ingin menggunakan control Combobox dengan tipe Select2 atau Native Select pada Field yang menampilkan beberapa opsi. Masing-masing jenis control tersebut memiliki kelebihan dan keterbatasan masing-masing.
Control Select2 sangat cocok untuk Field yang harus menampilkan data opsi yang berasal dari Lookup Table, dimana jumlah opsinya relatif banyak, serta memiliki potensi bertambah atau berkurang di masa yang akan datang. Dengan kata lain, data opsi di dalamnya bersifat dinamis.
Mengapa demikian? Karena control Select2 memiliki fitur Search yang memungkinkan Pengguna Akhir mengetikkan satu atau beberapa karakter, dan control tersebut akan otomatis menyaring dan menampilkan beberapa opsi yang mendekati karakter yang diketik tadi. Nah, fitur ini tidak ada di control Native Select.
Selain itu, karena data opsi yang berasal dari Lookup Table di Database tadi, maka control Select2 ini memiliki kemungkinan menampilkan data yang lebarnya sangat bervariasi. Mulai dari yang sangat kecil, sampai dengan yang sangat besar. Nah, karakteristik data dengan lebar dinamis seperti ini sangat cocok menggunakan control Select2.
Kebalikannya pada control Native Select. Control yang satu ini sangat cocok untuk Field yang hanya menampilkan sedikit opsi data yang biasanya tidak berasal dari Lookup Table, tapi cukup didefinisikan melalui fitur User Values di bagian Fields Setup dari project PHPMaker.
Karena sifatnya yang statis dan memiliki potensi data yang lebarnya tidak terlalu besar atau relatif kecil, maka control Native Select sangat cocok untuk kebutuhan ini.
Contoh kasus untuk control Native Select yang menampilkan sedikit data opsi statis, yang biasanya jumlahnya kurang dari 5, seperti Yes dan No, Pria dan Wanita, Bidding dan Winner, dan sejenis lainnya yang mirip dengan data tadi.
Karena jumlah opsi tersebut relatif sedikit, dan sekali lagi, memiliki kemungkinan bahwa lebar data tersebut tidak terlalu besar, maka kita perlu mengurangi lebar control Native Select tadi. Lantas, bagaimana cara mengurangi lebar control Combobox dengan tipe Native Select tersebut?
Jawabannya sangat mudah dan cepat, apalagi jika kita menggunakan PHPMaker 2025 untuk membuat aplikasi web.
Katakanlah di suatu table, kita memiliki field yang bernama Tipe_CBA, yang memiliki 2 opsi saja, yaitu BIDDING dan WINNER, dan kedua opsi ini telah kita definisikan lewat fitur User Values pada Fields setup di project PHPMaker 2025.
Maka, langkah pertama yang harus kita lakukan adalah cukup dengan menambahkan kode berikut ke dalam server event Page_Load pada halaman yang kita inginkan, seperti List Page, Search Page, Add Page, dan/atau Edit Page (sesuaikan dengan kebutuhan kalian):
$this->Tipe_CBA->setNativeSelect(true);
Arti dari kode di atas, kita mengubah jenis control yang digunakan field Tipe_CBA dari Select2 (yang default di-generate oleh PHPMaker), menjadi jenis control Native Select. Bayangkan, dengan satu baris kode itu saja, kita bisa memerintahkan PHPMaker untuk mengubah jenis control Combobox yang kita inginkan!
Langkah kedua, tambahkan kode ini ke bagian Custom attributes yang terdapat di Fields setup -> panel Edit Tag -> SELECT Tag untuk field Tipe_CBA tadi:
"style='min-width: 6em !important'"
Arti dari kode di atas, kita menambahkan CSS kode yang membatasi lebar minimal sebanyak 6em pada field Tipe_CBA. Dengan kata lain, hal ini akan mengurangi lebar control Native Select tadi menjadi lebih optimal, dan tidak mengikuti lebar minimal control Combobox dengan tipe Select2 yang secara default oleh PHPMaker menggunakan nilai 20em.
Atau, jika tidak ingin menulis kode dari Fields setup -> panel Edit Tag tadi, maka bisa dengan menulis kode ini pada server event Page_Load milik halaman Add dan Edit:
$this->Tipe_CBA->EditCustomAttributes = "style='min-width: 6em !important'";
Langkah ketiga, generate ulang semua file script seperti biasa menggunakan PHPMaker 2025, lalu silahkan nikmati hasilnya dari aplikasi web yang dihasilkan tersebut.
Betapa mudah dan cepatnya, bukan? Bukan! 😛
Hanya dengan dua langkah itu saja, kita sudah bisa mengurangi lebar control Combobox yang kita inginkan. Tidak hanya itu saja, kita menjadi bisa memilah-milah, mana saja Field yang cocok menggunakan tipe Native Select, dan mana yang perlu menggunakan tipe Select2.
Kesimpulannya: tidak semua field yang menampilkan beberapa opsi harus menggunakan control Combobox dengan tipe Select2. Ada kalanya kita harus mengubahnya ke control Combobox dengan tipe Native Select. Dengan menggunakan control Combobox tipe Native Select, maka kita bisa menghemat space pada Form di halaman yang bertalian, karena kita bisa mengatur lebar minimum melalui fitur Custom attributes untuk masing-masing Field yang bertalian.
Tinggalkan Balasan