# Barcode Generator

Cara menambahkan Barcode Generator component

Berikut langkah-langkah untuk menambahkan barcode generator *component*

* Buka Qore App Editor 

* Pada tab library, di section media pilih barcode 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%2FnWa082i7bN1WzzjUuRfb%2Fmed5.png?alt=media&#x26;token=09eaeb9f-817f-4ed4-ad3a-9e62f016e074" alt=""><figcaption></figcaption></figure>

* Jika berhasil maka barcode 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%2FRBVZUrUc2YsFlTAD431I%2Fmed55.png?alt=media&#x26;token=69eee1e3-2e78-4a80-87c6-a4faa6276b90" alt=""><figcaption></figcaption></figure>

Properties dari barcode 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)
* Format : format tampilan dari barcode, apakah code 39 atau code 128

Berikut contoh barcode generator yang telah dimodifikasi

<figure><img src="https://2184609992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2oMlC98xrWRwMo6hcAGn%2Fuploads%2FqUdL6B8z1sPHP79CaJwR%2Fmed555.png?alt=media&#x26;token=9c074aea-1781-481e-a300-c5269ba92667" alt=""><figcaption></figcaption></figure>