Membuat Plugin Oracle APEX QR Code dengan Custom Logo

Di ekosistem Oracle APEX, fitur QR Code sebenarnya sudah banyak tersedia dalam bentuk plugin Oracle Apex. Tapi masalah muncul saat ada kebutuhan spesifik, misalnya menyisipkan logo perusahaan di tengah QR Code agar terlihat lebih profesional dan sesuai branding.

Setelah mencari beberapa referensi plugin yang ada, kebanyakan hanya mendukung generate QR standar tanpa opsi kustomisasi gambar. Akhirnya saya memutuskan untuk membangun plugin sendiri agar bisa digunakan berulang kali di berbagai proyek tanpa harus menulis ulang kode JavaScript di setiap aplikasi.

Alasan Membangun Plugin Sendiri
Sebagai developer, efisiensi itu penting. Saya ingin fitur ini bersifat "Plug-and-Play" dengan beberapa kriteria:

1. Konfigurasi logo, ukuran, dan warna bisa diatur langsung melalui Page Designer.
2. Mendukung Error Correction Level yang tinggi agar QR tetap bisa dibaca meski tertutup logo.
3. Bisa digunakan oleh developer lain hanya dengan drag-and-drop.

Proses Teknis dan Tantangan
Dalam pembuatan plugin ini, saya menggunakan library JavaScript qr-code-styling yang mendukung rendering pada elemen canvas.

Di sisi backend (PL/SQL), saya membuat fungsi render untuk menjembatani atribut yang diinput di APEX Page Designer ke dalam properti JavaScript.

function f_render (
p_dynamic_action in apex_plugin.t_dynamic_action,
p_plugin in apex_plugin.t_plugin )
return apex_plugin.t_dynamic_action_render_result
is
l_result apex_plugin.t_dynamic_action_render_result;
begin
l_RESULT.JAVASCRIPT_FUNCTION := 'qr.initialize';
l_result.attribute_01 := p_dynamic_action.attribute_01;
l_result.attribute_02 := p_dynamic_action.attribute_02;
l_result.attribute_03 := p_dynamic_action.attribute_03;
l_result.attribute_04 := p_dynamic_action.attribute_04;
l_result.attribute_05 := p_dynamic_action.attribute_05;
return l_result;
end;

Implementasi di Page Designer
Setelah plugin selesai dikemas dalam file .sql, cara pakainya jadi sangat sederhana hanya perlu import plugin ke Shared Components.

1. Buat Page item bertipe text field dan buat tombol.

2. Buat dynamic action untuk tombol ketika di klik.

3. Lalu pilih QR Code with logo.
   Plugin ini mempunyai 5 attribut dan wajib di isi.
   Saya berikan contoh isi dari attribut

1. Lalu buat sub region dengan isi html sebagai berikut

<center>
<div id="canvas">
</div>
</center>

Maka hasilnya akan seperti ini.

Kesimpulan
Membangun plugin sendiri memberikan fleksibilitas penuh terhadap UI/UX aplikasi kita. Selain menyelesaikan masalah kustomisasi logo, plugin ini juga mempercepat proses development di tim saya.

Tutorial atau dokumentasi Oracle APEX dalam bahasa Indonesia memang masih jarang. Semoga tulisan singkat ini bisa memberikan gambaran bagi teman-teman yang ingin mencoba mengekstensi fitur APEX melalui pembuatan plugin.

Jika ingin melihat detail kodenya atau mencoba plugin ini, silakan cek di repository saya: Github