LOV dengan Oracle APEX


Dalam sebuah form, kadangkala kita membutuhkan sebuah komponen dropdown list yang isi item pilihannya diambil dari satu atau lebih tabel dalam database. Pada Oracle APEX, untuk jenis dropdown list ini disebut sebagai LOV (List of Value). LOV merupakan sebuah objek tersendiri dalam APEX, sehingga sebuah LOV dapat digunakan di banyak komponen form dropdown list. Model LOV ini sebetulnya sudah ada sejak Oracle Form.

Untuk pembuatan sebuah LOV, kita dapat melakukannya dari bagian Shared Components pada halaman administrasi Application. Berikut adalah langkah-langkah pembuatannya:

  1. masuklah ke Application Builder, lalu klik item aplikasi yang sudah dibuat. Dalam hal ini saya telah membuat sebuah aplikasi bernama “Keuangan Sederhana” yang sudah saya jelaskan minggu sebelumnya.
  2. pada halaman Application Builder untuk aplikasi kita, klik icon [Shared Components].Screenshot_5_6_13_9_02_AM
  3. Pada bagian User Interface, klik tautan [Lists of Values]. Kemudian klik tombol [Create >] pada halaman administrasi LOV. Terdapat beberapa tahapan untuk pembuatan LOV:
    1. Oleh karena kita membuat dari awal, pilih item [From Scratch], lalu klik tombol [Next]
    2. berikutnya, masukkan nama dari LOV, misalnya: REKENING_LOV, dan pilih item Dynamic. Klik tombol [Next]
    3. Ketikkan SQL berikut ini untuk mengisi daftar rekening:
      select namakel, kdkel
      from kelrekening
      order by 2
    4. Klik tombol [Create List of Values].
  4. Dengan demikian objek LOV telah terbentuk.

Selanjutnya kita akan menambahkan 2 halaman lagi, yaitu halaman pertama untuk Report, dan halaman kedua berisi form. Tahap pertama kita akan menambahkan halaman Report terlebih dahulu. Berikut langkah-langkahnya :

  1. Pada halaman administrasi aplikasi, klik tombol [Create].
  2. Pilih [Report] > [Next] > [Interactive Report] > [Next].
  3. Pada langkah berikutnya, masukkan Daftar Rekening pada item [Page Name] dan Master Rekening pada item [Region Name]. Pilih [Breadscrumb], dan masukkan Daftar Rekening pada item [Entry Name] di bagian Create Breadscrumb Entry. Klik [Next].
  4. Pilih item [Use an existing tab set and create a new tab within the existing tab set] pada langkah berikutnya. Jangan lupa masukkan Rekening pada item [New Tab Label]. Klik [Next].
  5. Masukkan sql berikut : SELECT KODEREK, NAMAREK, D_K FROM REKENING ORDER BY 1. Pilih No untuk item Link to Single Row View. Klik tombol [Next].
  6. Klik [Finish].

daftarrekening

Berikutnya kita akan membuat sebuah form yang dapat digunakan untuk memasukan data rekening baru, ataupun untuk mengubah data rekening yang sudah ada. Berikut langkahnya:

  1. Pada halaman administrasi Aplikasi, kita akan buat sebuah form baru dengan cara klik tombol [Create Page].
    1. Pilih item [Form], klik tombol [Next].
    2. Pilih item [Form on a Table or View], lalu klik tombol [Next].
    3. Schema yang terpilih otomatis defaultnya adalah sesuai dengan Workspace, dan klik tombol [Next].
    4. Pilih tabel REKENING, lalu klik [Next].
    5. Masukkan Form Rekening  baik untuk item [Page Name] maupun [Region Title]. Pilih item [Breadscrumb] pada item [Breadscrumb], ketikkan Form Rekening pada item [Entry Name] di bagian Create Breadscrumb Entr, dan pilih item [Daftar Rekening] sebagai [Parent Entry]. Klik tombol [Next].
    6. Pilih item [Do not use tab], dan klik tombol [Next] untuk melanjutkan.
    7. pada item Primary Key Column 1, otomatis terpilih KODEREK sebagai primary keynya. Klik tombol [Next] untuk melanjutkan.
    8. Kita terima pilihan defaultnya [Existing Trigger], lalu klik [Next].
    9. Pilih ketiga field yang dimunculkan untuk ditampilkan, yaitu NAMAREK, D_K, KELOMPOK. Klik tombol [Next].
    10. Dari semua pilihan untuk tombol proses yang dimunculkan, kita terima saja semua, cukup klik tombol [Next].
    11. Dari langkah percabangan, silahkan pilih Page Daftar Rekening baik untuk item [After Page Submit…] dan [When Cancel Button…]. Klik tombol [Next] untuk melanjutkan.
    12. Silahkan klik tombol [Finish] untuk menyelesaikan.
    13. Cobalah jalankan dengan klik tombol [Run Page].
  2. Ternyata setelah dijalankan item field KODEREK tidak muncul karena defaultnya untuk semua primary key akan disembunyikan. Untuk itu edit halaman form tersebut.
  3. Sekarang pada halaman edit, klik ganda item P10_KODEREK, kemudian ganti sebagai “Textfield” pada item [Display as]. Label dapat kita ganti, misalnya Kode Rekening. Jangan lupa untuk mengganti item [Template] menjadi Required, dan item [Value Required] menjadi Yes. Klik [Apply Change] untuk menyimpan.
  4. Berikutnya kita akan menambahkan item LOV sebagai [Select List] untuk item P5_KELOMPOK. Klik ganda pada item P5_KELOMPOK.
  5. Pada item [Display As], gantilah menjadi [Select List].
  6. Perhatikan pada bagian List of Values. Pilih objek REKENING_LOV untuk mengisi item [Named LOV], dan pilih No untuk item Display Extra Values dan Display Null Value.
  7. Klik tombol [Apply Changes], dan cobalah klik tombol [Run].

formRekening

Tahap berikutnya adalah mengkaitkan antara halaman Daftar Rekening dan Form Rekening. Pertama, kita akan menambahkan tombol [Create] untuk menambah data Rekening baru. Berikut langkah-langkahnya:

  1. pada halaman administrasi aplikasi, klik item page [Daftar Rekening].
  2. Pada item [MasterRekening], klik kanan dan pilih [Create Region Button].
  3. Klik tautan [Create] untuk mengisi item [Button Name] dan [Label]. Klik tombol [Next].
  4. Pada item [Position] pilih Right of Interactive Report Search Bar, dan klik tombol [Next].
  5. Pada item [Action], pilih item Redirect to Page in this Application. Berikutnya pilih item Form Rekening untuk mengisi item [Page]. Dari pilihan tersebut akan dimunculkan nomor urut ID dari halaman Form Rekening. Pastikan juga item [Clear Cache] dengan id yang sama pada item [Page].
  6. Saat ini, langsung kita klik [Finish]. Silahkan coba klik [Run].

daftarRekening2Cobalah klik tombol [Create] tersebut, maka akan ditampilkan Form Rekening. Cobalah masukkan data contoh rekening, dan simpan. Maka tampilan akan dikembalikan ke Daftar Rekening dengan data baru ditampilkan.

Tahap kedua adalah menambahkan icon Edit pada setiap baris record di Daftar Rekening. Untuk melakukan ini, kita dapat menambahkannya sebagai sebuah tautan icon. Berikut langkah-langkah sederhananya:

  1. kembali ke tampilan Edit Application. Klik halaman Daftar Rekening sehingga menampilkan kembali halaman Edit Page.
  2. klik kanan item [MasterReport] dan pilih menu [Edit Report Attributes].
  3. silahkan cari bagian Link Column. Di sana pilih Link to Custom Target untuk item [Link Column].
  4. Untuk item [Link Icon], silahkan pilih bentuk icon yang ingin ditampilkan pada kolom Link dari tabel.
  5. Pastikan bahwa nilai item [Target] berisi [Page in this Application], dan pilih Form Rekening untuk mengisi ID item [Page].
  6. Oleh karena kita harus mengirimkan parameter dan nilai ke Form Rekening terkait dengan data Rekening mana yang akan diedit, maka kita perlu mengisi parameter Name dan Value. Klik icon senter untuk setiap item. Pastikan Name berisi P6_KODEREK dan Value berisi #KODEREK#.
  7. Klik tombol [Apply Changes].
  8. Cobalah klik tombol [Run].

Screenshot_5_6_13_6_39_PMKetika kita klik tautan [Edit], maka akan dimunculkan Form Rekening beserta data yang kita pilih. Namun sayangnya, kita tidak dapat mengubah nilai field KODEREK, karena saat ini Form Rekening kita menggunakan atribut tersebut sebagai referensi Form. Masalah ini dapat diselesaikan dengan menggunakan basis ROWID sebagai referensi, bukan primary key. Minggu depan kita akan lanjutkan tentang hal ini.