Kuika’nın Barcode Renderer elementi, uygulamalarınızda barkod oluşturmak ve görüntülemek için kullanılan özel bir görselleştirme elementidir. Ürün, stok, sipariş veya kimlik bilgisi gibi verileri barkod formatına dönüştürerek hızlı tarama ve otomasyon süreçlerine destek sağlar. Kullanıcılar, barkodu herhangi bir cihaz kamerası veya barkod okuyucu ile kolayca tarayarak ilgili bilgilere anında ulaşabilir.
Barcode Renderer elementi yalnızca web uygulamalarında desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Ürün Yönetimi ve Stok Takibi: Ürünlerin sistemdeki ID veya SKU bilgilerini barkod formatında görüntüleyerek fiziksel stok yönetim süreçlerini kolaylaştırmak.
Sipariş ve Kargolama Sistemleri: Sipariş numaralarının barkod olarak gösterilmesi, barkod okuma ile hızlı işlem yapılması.
Biletleme ve Giriş Kontrol: Etkinlik biletleri, kuponlar veya geçiş kartlarını barkod formatında sunmak.
Kullanıcı veya Ürün Kimliklendirme: Benzersiz ID değerlerini barkod olarak göstererek hızlı erişim sağlamak.
Fatura ve Evrak İşlemleri: Belge numaralarının barkodlaştırılması ile arşivleme ve doğrulama süreçlerini hızlandırmak.
Otomasyon Senaryoları: Barkod okuma ile otomatik tetiklenen işlemler veya kayıt eşleştirme süreçleri.
2. Temel Özellikler
Dinamik Barkod Üretimi: Barkod değeri, Symbol Picker üzerinden aksiyon sonuçlarına, input değerlerine veya tablo alanlarına bağlanabilir. Böylece her kullanıcıya veya kayda özel barkod oluşturulabilir.
Farklı Barkod Formatlarını Destekleme: Uygulamanın ihtiyacına göre Code128, EAN, UPC gibi birden fazla yaygın barkod türleri desteklenir.
Kolay Entegrasyon: Ürün detay sayfaları, sipariş ekranları, stok yönetimi veya kullanıcı kartları gibi farklı arayüzlerde hızlıca kullanılabilir.
2.1. Barcode Renderer Elementi Özellikleri
Barcode Renderer elementinin özelliklerini, sağ kenardaki Properties panelinden yapılandırabilirsiniz.
Value: Statik bir değer ekleyebilir veya Symbol Picker aracılığıyla bir durumu, Input elementinin içeriğini veya bir aksiyon sonucuna ait değeri dinamik olarak alabilirsiniz.
Format: Barkod formatını dünya standartlarına uygun seçenekler arasından belirleyebilirsiniz. Properties panelinde bulunan Formatter açılır menüsünü kullanarak aşağıdaki formatlardan birini seçebilirsiniz:
EAN13: Uluslararası ürün tanımlama için kullanılan 13 haneli barkod kodu.
UPC: Kuzey Amerika'da yaygın olarak kullanılan evrensel ürün kodu.
EAN8: Daha az bilgi taşıyan 8 haneli barkod formatı.
EAN5: Özel etiketlemeler için kullanılan 5 haneli barkod kodu.
Code128A, Code128B, Code128C: Yüksek yoğunluklu barkod formatları olup, farklı karakter setlerini temsil eder.
Code39: Düşük yoğunluklu barkod formatıdır. Harf, rakam ve özel karakterleri içerebilir.
ITF14: 14 haneli barkod olup, kartonlar ve lojistik süreçler için idealdir.
MSI, MSI10, MSI11, MSI1010, MSI1110: Modulus barkodları olup, 10 ve 11 gibi modlarla işlenir.
Pharmacode: İlaç ambalajlarını tanımlamak için kullanılan özel bir barkod formatıdır.
Codebar: Hızlı tarama işlemleri için tercih edilen bir barkod formatıdır.
Barcode Renderer elementi, kullanıcıların uygulama içinde ürün bilgilerini hızlı bir şekilde iletmelerini ve tanımlamalarını sağlar.
2.2. Elemente Eklenebilen Aksiyonlar
Barcode Renderer elementi, yalnızca barkod görüntülemek için kullanılan pasif bir elementtir. Bu nedenle kullanıcı etkileşimine bağlı bir tetikleyici oluşturmaz ve element üzerine doğrudan aksiyon eklenemez. Barcode Renderer seçildiğinde ADD ACTION butonu görünmez.
Aşağıdaki noktalar, elementin aksiyon yapısını açıklar:
Barcode Renderer, kullanıcı tıklaması, üzerine gelme (hover) veya seçim gibi etkileşimlere yanıt vermez.
Barkodun içeriğini değiştirmek için elemente aksiyon bağlanamaz; bunun yerine barkod değeri (Value) dışarıdaki başka elementlerde tetiklenen aksiyonlardan gelen sonuçlarla güncellenmelidir.
Barkodun yeniden oluşturulması veya güncellenmesi, Value alanına bağlanan veri değiştiğinde otomatik olarak gerçekleşir.
Kullanıcı etkileşimi gerektiren senaryolarda (ör. “butona basınca barkod güncellensin”), aksiyonlar Button ve Icon gibi başka elementlerde tanımlanır.
Barcode Renderer yalnızca kendisine verilen veriyi görüntüler; kendi içinde aksiyon tetikleyemez ve herhangi bir işlem başlatmaz.
3. Barcode Renderer Elementi Nasıl Kullanılır?
Bu bölümde Barcode Renderer elementinin uçtan uca dinamik kullanımını, örnek bir ürün detay senaryosu üzerinden ele alacağız.
Senaryo: Ürün Detay Ekranında Dinamik Barkod Gösterimi
Bir e-ticaret veya stok yönetimi uygulamasında, her ürünün barkod değeri veritabanında saklanır. Kullanıcı ürün detay ekranına girdiğinde, ürüne ait barkod dinamik olarak oluşturularak ekranda gösterilir.
Bu senaryoda:
Barkodun değer bilgisi veri kaynağından alınır.
Default tanımlı olarak Code 128 formatında oluşturma sağlanır.
İsteğe bağlı olarak barkodun formatı (EAN13, EAN8 vb.) manuel olarak belirlenebilir.
Sayfa açıldığında barkod otomatik olarak render edilir.
Bu yapı sayesinde barkodlar her ürün için tekrar kullanılabilir ve merkezi olarak yönetilir.
Adım 1 – Örnek Veri Aksiyonunu Oluşturma
UI Design modülünü açın.
Sol yan panelde Custom Actions alanından yeni SQL Action oluşturun.
Editör içerisindeki alana aşağıdaki SQL sorgusunu ekleyin ve Aksiyon adını GetProductBarcodeValue olarak belirleyin.
SELECT
'1234567890123' AS BarcodeValue,
'Laptop' AS ProductName;
Adım 2 – Initial Action Ekleme
Sol yan panelde Screens alanından elementin ekleneceği sayfaya gidin.
Adım 3 – Sayfaya Barcode Renderer Elementi Ekleme ve Bağlama
Sayfaya Elements > Display > Label elementini sürükleyip bırakın.
Yazıyı Label > Properties > Value > Action Result > GetProductBarcodeValue > First > BarcodeName
Sayfaya Elements > Display > BarcodeRenderer elementini sürükleyip bırakın.
Barcode alanı içerisine yazılacak değeri BarcodeRenderer > Properties > Value > Action Result > GetProductBarcodeValue > First > BarcodeValue tanımlayın.
Mevcut senaryoda Barcode Format’ını default olarak Code 128 kullanacağız. İsteğe bağlı olarak EAN13, EAN8 vb. Formatta kullanabilirsiniz.
Preview
Uygulama test edildiğinde, Barcode Renderer alanında seçilen ürün/kayıt için Code 128 formatında barkod görseli otomatik olarak üretilir ve ekranda görüntülenir. Barkodun altında, barkoda karşılık gelen sayısal değer (ör. 1234567890123) okunabilir biçimde metin olarak da gösterilerek doğrulama yapılması kolaylaştırılır.
Bu yapı sayesinde kullanıcı, ilgili kayda ait barkodu tek ekranda hızlıca görüntüleyebilir; hem görsel barkod hem de değer bilgisi birlikte sunulduğu için kontrol, çıktı alma veya etiketleme gibi süreçlerde pratik ve kullanıcı dostu bir deneyim sağlar.
4. Ortak Özellikler (Properties)
Barcode Renderer elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:
Doğru barkod tipini seçin. Ürün, stok, bileklik, bilet veya QR benzeri yapılar için desteklenen barkod türlerinden amacınıza en uygun olanı kullanın.
Veri formatına dikkat edin. Barkod türlerinin çoğu belirli karakter kısıtlamalarına sahiptir. Örneğin, bazı tipler yalnızca numerik (sayı) giriş kabul eder. Hatalı format barkodun görüntülenmemesine neden olabilir.
Barkod değerini (Value) dinamik verilerle bağlayın. Stok kodu, sipariş numarası, kullanıcı ID’si gibi değerleri Datasource veya Symbol Picker üzerinden dinamik olarak göndermek barkodun kullanımını anlamlı hale getirir.
6. Kısıtlamalar
Barcode Renderer yalnızca web uygulamalarında desteklenir. Mobil uygulamalarda görüntülenemez.
Desteklenen barkod türleri sınırlıdır. Her barkod tipini oluşturamaz; yalnızca Kuika’nın desteklediği formatlarda render işlemi yapılabilir.
Veri formatı hataları barkodun görüntülenmesini engeller. Örneğin, barkod tipi numerik beklerken harf içeren bir değer gönderilirse barkod render edilmez.
Value alanı boş olduğunda barkod oluşturulamaz. Barkodun görüntülenmesi için mutlaka bir değer atanmış olmalıdır.
