1. Dynamic Input Elementine Genel Bakış

Dynamic Input elementi, kullanıcıların mevcut seçenekler arasından seçim yapmasına veya ihtiyaç halinde yeni bir değer girmesine olanak tanıyan esnek bir veri giriş elementidir. Sabit listelerle çalışabildiği gibi, veri kaynaklarına bağlanarak dinamik olarak doldurulabilir.

Dynamic Input elementi yalnızca web uygulamalarında desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Önceden tanımlı seçeneklere ek olarak yeni değer girilmesi gereken alanlar
• Etiket (tag), kategori veya serbest metin destekli seçimler
• Dinamik veri kaynaklarına bağlı giriş alanları
• Arama ve otomatik tamamlama gerektiren formlar
• Esnek ve kullanıcı odaklı veri toplama ekranları

2. Temel Özellikler

• Seçim ve serbest giriş desteği: Kullanıcılar listede yer alan seçenekleri seçebilir veya yeni bir değer ekleyebilir.
• Dinamik veri kaynağı ile çalışma: Seçenekler statik olarak tanımlanabilir ya da datasource ve aksiyon çıktıları üzerinden dinamik olarak yüklenebilir.
• Kullanıcı hatalarını azaltan yapı: Öneri listeleri sayesinde yanlış veya tutarsız veri girişi minimize edilir.
• Esnek form senaryolarına uygunluk: Kategori, etiket, serbest metin destekli alanlar gibi çok yönlü kullanım sağlar.

2.1. Dynamic Input Elementi Özellikleri 

Properties panelinden aşağıdaki ayarları yapılandırabilirsiniz:

• Value: Elementin varsayılan veya bağlı olduğu değeri tanımlar. Bu değer, veri kaynağından ya da kullanıcıdan gelen veriyi temsil eder.
• Placeholder: Kullanıcı herhangi bir seçim yapmadığında veya değer girmediğinde görünen bilgilendirme metnidir.
• Allow Clear: Aktif hale getirildiğinde, kullanıcı seçili değeri temizlemek için bir silme simgesi kullanabilir.
• Formatter: Girilen değerin veya seçilen öğenin nasıl gösterileceğini belirlemek için kullanılan biçimlendirme fonksiyonudur. Formatter altında aşağıdaki seçenekler bulunur:
  
  • String: Metin (string) değerler için biçimlendirme kurallarını belirler.
    
    • None: Girilen metin olduğu gibi gösterilir, herhangi bir dönüşüm uygulanmaz.
    • Lowercase: Girilen tüm metinler otomatik olarak küçük harfe dönüştürülür.
    • Uppercase: Girilen tüm metinler otomatik olarak büyük harfe dönüştürülür.
  • Date Time: Tarih ve saat değerlerinin hangi formatta gösterileceğini belirler. Aşağıdaki hazır formatlar desteklenir:
    
    • DD/MM/YYYY
    • MM/DD/YYYY
    • YYYY/MM/DD
    • YYYY/DD/MM
    • MM/DD
    • YYYY/MM
    • D M Y
    • YYYY-MM-DD HH:mm
    • DD-MM-YYYY HH:mm
    • DD-MM-YYYY HH:mm:ss
    • mm:ss
• Data Type: Giriş verisinin veri türünü tanımlar. Örneğin text, number, boolean gibi değerler seçilebilir.

2.2. Elemente Eklenebilen Aksiyonlar

Dynamic Input elementi, kullanıcı etkileşimlerine bağlı olarak onChange tetikleyicisini destekler. Kullanıcı, alandaki değeri değiştirdiğinde bu tetikleyici çalışır.

onChange: Dynamic Input alanında seçilen değer değiştiğinde veya kullanıcı yeni bir değer girdiğinde tetiklenir.

Kullanım senaryoları:

• Form alanlarına girilen değere göre başka elementleri güncellemek
• Dinamik filtreleme veya koşullu alan gösterimi yapmak
• Girilen değeri doğrulamak veya formatlamak

onChange tetikleyicisi, Dynamic Input elementinin esnek ve dinamik form senaryolarında etkin şekilde kullanılmasını sağlar.

3. Dynamic Input Elementi Nasıl Kullanılır? 

Bu bölümde Dynamic Input elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.

Senaryo: Satın Alınan Ürünlerin Kaydı

Bir kişisel finans veya gider takip uygulamasında kullanıcılar, satın aldıkları ürünlere ait bilgileri hızlı ve pratik bir şekilde sisteme kaydetmek ister. Dynamic Input elementi, bu senaryoda her alanın veri türüne göre otomatik olarak uygun input tipinde oluşturulmasını sağlar.

Senaryoda:

• Kullanıcı, Ürün Adı alanına ürün ismini metin olarak girer.
• Fiyat alanı, sayısal veri türüne uygun şekilde yalnızca rakamsal girişe izin verir.
• Satın Alma Tarihi alanı, tarih veri tipine göre otomatik olarak tarih seçici şeklinde görüntülenir.
• Kullanıcı formu doldurup Kaydet butonuna tıkladığında, girilen bilgiler tek aksiyonla sisteme kaydedilir.

Adım 1 - Veri Kaynağı Oluşturma

DataSources modülünde tablo oluşturma: 

• Datasources modülüne gidin. 
• Ardından Tables sekmesine gidin.
• “PurchasedProducts” adında yeni tablo oluşturun.
• Kurulması gereken tablo yapısı aşağıdaki gibidir:

• Önemli Alan adları: 
  
  • ProductName: Satın alınan ürünün ad bilgisini tutar. Form üzerinde kullanıcı tarafından girilen ana metin alanıdır.
  • Price: Ürünün satın alma fiyatını ifade eder. Sayısal veri türünde olup tutar bazlı hesaplamalarda kullanılır.‍
  • PurchaseDate: Ürünün satın alındığı tarih ve saat bilgisini saklar. Zaman bazlı filtreleme ve raporlama senaryolarında kullanılır.

Adım 2 - Gerekli Aksiyonları Tanımlama

Arayüzde verileri göstermek ve kaydetmek için: 

• Bu senaryoda üç aksiyon kullanılacaktır.
• Kayıt işlemleri için Kuika tarafından sunulan Save Record hazır sistem aksiyonu kullanılır.
• Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.
  

• Verileri Getiren Aksiyon (GetPurchasedProducts):
  

SELECT * FROM PurchasedProducts;

Uygularken PurchasedProducts kısmını silip tekrar PurchasedProducts yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir. Şema adını aşağıdaki aksiyon içerisinde de kullanacaksınız.

• Alanların Veri Tiplerini Getiren Aksiyon (GetFieldType):
  

SELECT
    MAX(CASE 
            WHEN COLUMN_NAME = 'Id' THEN DATA_TYPE 
        END) AS IdType,

    MAX(CASE 
            WHEN COLUMN_NAME = 'Price' THEN DATA_TYPE 
        END) AS PriceType,

    MAX(CASE 
            WHEN COLUMN_NAME = 'ProductName' 
                 AND DATA_TYPE IN ('nvarchar', 'varchar', 'nchar', 'char')
            THEN 'string'
            WHEN COLUMN_NAME = 'ProductName'
            THEN DATA_TYPE
        END) AS ProductNameType,

    MAX(CASE 
            WHEN COLUMN_NAME = 'PurchaseDate' THEN DATA_TYPE 
        END) AS PurchaseDateType
FROM INFORMATION_SCHEMA.COLUMNS
WHERE TABLE_SCHEMA = ''
  AND TABLE_NAME = 'PurchasedProducts';

Uygularken TABLE_SCHEMA alanını kendi şema adınız ile güncelleyiniz.

Adım 3 - Initial Action Ekleme

• UI Design modülünü açın.
• Sayfaya ADD ACTION butonundan Initial Actions > Custom > Managed Db > GetFieldType aksiyonunu ekleyin.
  

Adım 4 - Elementlerin Eklenmesi ve Ayarlanması

• Sayfaya Elements > Text Input > DynamicInput elementini sürükleyip bırakın.
• Yer tutucu metin için DynamicInput > Properties > PlaceHolder > “Ürün Adı” metnini giriniz.
  

• İçeriği temizlemek için DynamicInput > Properties > AllowClear > Açık olarak ayarlayın.
  

• Tüm adların büyük olması için DynamicInput > Properties > Formatter > Uppercase olarak ayarlayın.
  

• Veri tipine göre dinamik input davranışı sağlamak için DynamicInput > Properties > DataType alanını, Action Result > GetFieldType > First > ProductNameType olarak ayarlayın.

• Sayfaya yeni bir Elements > Text Input > DynamicInput elementi ekleyin.
• Yer tutucu metin için DynamicInput > Properties > PlaceHolder > “Ürün Fiyatı” metnini giriniz.
• İçeriği temizlemek için DynamicInput > Properties > AllowClear > Açık olarak ayarlayın.
• Veri tipine göre dinamik input davranışı sağlamak için DynamicInput > Properties > DataType alanını, Action Result > GetFieldType > First > PriceType olarak ayarlayın.
  

• Sayfaya son Elements > Text Input > DynamicInput elementini ekleyin.
• Yer tutucu metin için DynamicInput > Properties > PlaceHolder > “Satın Alma Tarihi” metnini giriniz.
• İçeriği temizlemek için DynamicInput > Properties > AllowClear > Açık olarak ayarlayın.
• Veri tipine göre dinamik input davranışı sağlamak için DynamicInput > Properties > DataType alanını, Action Result > GetFieldType > First > PurchaseDateType olarak ayarlayın.
  

•  İlgili aşamada sayfanın aşağıdaki gibi olması beklenmektedir.
  

•  Sayfaya Elements > Navigation > Button elementini sürükleyip bırakın.
•  Button yazısını Button > Properties > Label > “Kaydet” olarak düzenleyin.
•  Button elementine kayıt aksiyonunu Button > Add Action > onClick > ManagedDb > Save Record ekleyin.
  

•  Save Record aksiyonunda PurchasedProducts tablosunu seçin. Açılan sütun adları alanında tüm sütun adlarını seçin.

• Id alanını Default > New Guid olarak tanımlayın.
  

19.  ProductName alanını Components > DynamicInput1 > value olarak tanımlayın.
    

•  Price alanını Components > DynamicInput2 > value > To Decimal olarak tanımlayın.
  

•  PurchaseDate alanını Components > DynamicInput3 > value > To Decimal olarak tanımlayın.
  

•  Tanımlamalar sonucunda Save Record aksiyonun tüm alanları aşağıdaki gibi olmalıdır.
  

•  Button elementine eklenen kayıları getiren aksiyonu Button > Add Action > onClick > Custom > ManagedDB > GetPurchasedProducts ekleyin.
  

•  Sol yan paneldeki Action Tree alanından GetPurchasedProducts aksiyonun yanındaki mavi ikonuna basılı tutup sayfaya sürükleyin.
  

•  Açılan ekranda aşağıdaki tanımlamayı yapın.
  

•  Sayfa son durumda aşağıdaki gibi olmalıdır.
  

Preview:

Uygulama test edildiğinde, Dynamic Input kullanılarak oluşturulan form üzerinden ürün bilgileri kolayca girilebilir. Ürün adı alanı metin girişi için uygun şekilde görüntülenirken, fiyat alanı yalnızca sayısal veri girişine izin verecek biçimde otomatik olarak yapılandırılır. Satın alma tarihi alanı ise tarih ve saat seçimini destekleyen bir tarih seçici olarak sunulur.

Kullanıcı, formu doldurup Kaydet butonuna tıkladığında girilen ürün bilgileri tabloya eklenir ve alt bölümde yer alan liste anlık olarak güncellenir. Böylece farklı veri tiplerine sahip alanlar için input türleri otomatik belirlenerek, kullanıcıya sade ve tutarlı bir veri giriş deneyimi sağlanır.

4. Ortak Özellikler (Properties)

Dynamic Input 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:

• Authorization (Yetkilendirme) Ayarları
• Visibility (Görünürlük)
• Editability (Düzenlenebilirlik)
• Style Panel (Stil Ayarları)

5. Kullanım Tavsiyeleri (Best Practices)

• Dinamik veri kaynaklarıyla birlikte kullanın. Büyük ve değişken veri listelerinde arama ve autocomplete performansı artırır.
• Formatter ayarlarını veri tipine uygun seçin. Metin ve tarih formatlarının doğru gösterildiğinden emin olun.
• onChange tetikleyicisini kontrollü kullanın. Gereksiz backend veya state güncellemelerinden kaçının.
• Placeholder ile kullanıcıyı yönlendirin. Beklenen giriş formatını açıklayan kısa metinler kullanıcı deneyimini iyileştirir.

6. Kısıtlamalar

• Dynamic Input elementi yalnızca web uygulamalarında kullanılabilir.
• Mobil projelerde desteklenmez.
• Görüntülenen format, verinin kaynağını değil yalnızca ekran üzerindeki gösterimini etkiler.
• Karmaşık doğrulama senaryoları için ek Validation kuralları gereklidir.