# QR Code Generator

Cara menambahkan QR Code Generator component

Berikut langkah-langkah untuk menambahkan qr code generator *component*

* Buka Qore App Editor 

* Pada tab library, di section media pilih qr code generator *component*. Terdapat 2 cara untuk menambahkan *component* ke dalam emulator 

  * Jika ingin menambahkan *component* langsung ke suatu page, kamu dapat *double-click card* tersebut
  * Jika ingin menambahkan *component* ke dalam salah satu kontainer di page tersebut, kamu dapat *drag and drop* ke dalam kontainer yang diinginkan

  <figure><img src="https://2184609992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2oMlC98xrWRwMo6hcAGn%2Fuploads%2FYvUh0F0DB45O8WFbwBoW%2Fmed4.png?alt=media&#x26;token=ad088beb-f87f-438b-a19c-32816226d3c8" alt=""><figcaption></figcaption></figure>

* Jika berhasil maka qr code generator *component* akan muncul di *emulator editor screen* seperti berikut&#x20;

<figure><img src="https://2184609992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2oMlC98xrWRwMo6hcAGn%2Fuploads%2F8Eaa6Fgc9o5t6PCuLmzU%2Fmed44.png?alt=media&#x26;token=2b9967da-2503-4904-bfd8-13749c53571a" alt=""><figcaption></figcaption></figure>

Properties dari qr code generator component adalah&#x20;

Data :

* Source : tabel pada qore data yang digunakan sebagai sumber data
* Default row : baris data yang akan diretrieve dari tabel, apakah defaultnya adalah baris pertama, atau juga dapat menggunakan id baris

Design :&#x20;

* Title : judul dari QR code&#x20;
* Description : keterangan atau deskripsi singkat dari qr code
* Code : code yang akan digunakan untuk menggenerate qr code
* Display code : Jika toggle diaktifkan maka di bawah qr code akan ditampilkan code dari qr code
* Style : mengatur style tampilan qr code, apakah ghost (tanpa background) ataupun solid (menggunakan background)

Berikut contoh qr code generator yang telah dimodifikasi

<figure><img src="https://2184609992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2oMlC98xrWRwMo6hcAGn%2Fuploads%2FFKHctYpJGDQu7qs53KIt%2Fmed444.png?alt=media&#x26;token=9298771a-f6ed-495d-9ccf-d271fe4ee17d" alt=""><figcaption></figcaption></figure>