Kuika’nın Dynamic Input elementi, kullanıcıların önceden tanımlanmış seçeneklerden seçim yapmasını veya yeni bir değer girmesini sağlar. Element, sabit bir değer listesiyle ya da bir veri kaynağına bağlanarak dinamik olarak doldurulabilir. Ayrıca, arama (search) ve otomatik tamamlama (autocomplete) özellikleriyle veri girişini hızlandırır.

Dynamic Input elementi yalnızca web uygulamalarda kullanılabilir.

Kullanım Alanları

• Kayıt veya giriş ekranlarında form alanı oluşturma
• Kategori, şehir, ürün veya departman seçimi
• E-posta veya kullanıcı adı girişi
• Veri tabanına bağlı arama kutuları
• Otomatik öneri sistemleri (autocomplete)
• Dinamik dropdown listeler

Kullanım Senaryosu – Kullanıcı Kayıt Formu

Bir kullanıcı kayıt ekranında, kullanıcıların hesap bilgilerini girmesi için Dynamic Input elementleri kullanılır. Formda üç alan bulunur: Kullanıcı Adı, E-posta Adresi ve Parola.

Senaryoda:

• Kullanıcı “Create Account” ekranına gelir.
• Dynamic Input alanlarına kullanıcı adını, e-postasını ve şifresini girer.
• Giriş verileri türüne göre doğrulanır (örneğin e-posta formatı veya parola uzunluğu).
• “Create Account” butonuna basıldığında bilgiler veri tabanına kaydedilir.

Veri Kaynağı Bağlama

1. Datasources modülüne gidin.
2. Managed DB → Tables sekmesine tıklayın.
3. + Add New Table seçeneğiyle yeni bir tablo oluşturun.
4. Aşağıdaki tablo alanlarını ekleyin. 

5. Ardından Actions > SQL Actions sekmesine gidin.
6. Yeni bir aksiyon oluşturun: CreateUserAccount
7. Aşağıdaki SQL sorgusunu ekleyin:

INSERT INTO UserAccounts (Username, Email, PasswordUser, CreatedAt)VALUES (@Username, @Email, @PasswordUser, SYSDATETIMEOFFSET());

UI Design Modülü İşlemleri

1. UI Design modülüne gidin.
2. Sol panelden Elements > Text Input > Dynamic Input elementini seçin.
3. Ekrana üç adet Dynamic Input elementi ekleyin.
4. Aşağıdaki şekilde yapılandırın:

• DynamicInput1 → Placeholder: “Enter your name”, Data Type: String
• DynamicInput2 → Placeholder: “Enter your email”, Data Type: Email
• DynamicInput3 → Placeholder: “Enter your password”, Data Type: Password

5. Formun altına bir Button elementi ekleyin (Label: “Create Account”).

6. Butona onClick → Managed DB → Save Record aksiyonu tanımlayın.
7. Tablo: UserAccounts
8. Alan eşleştirmelerini yapın:
   
   • Username → DynamicInput1.value
   • Email → DynamicInput2.value
   • Password → DynamicInput3.value
   • CreatedAt → Now()

Özelliklerin Senaryo Bağlamında Kullanılması

• Value: Elementin kullanıcı tarafından girilen veya veri kaynağından gelen değerini temsil eder. 
• Placeholder: Kullanıcıya rehberlik eden örnek metindir. Örnek: “Enter your email”
• Data Type: Giriş verisinin türünü belirler (örneğin, String, Email, Password).
• Allow Clear: Kullanıcının girdiği değeri temizlemesini sağlar.
• Formatter: Girilen değerin biçimlendirilmesini sağlar (örneğin, tüm harfleri küçük gösterme).

Senaryo Adımı Tamamlandığında

• Kullanıcı formu doldurur ve “Create Account” butonuna basar.
• Veriler dinamik olarak veri tabanına kaydedilir.
• Email alanı format doğrulamasından geçer.
• Başarılı kayıt sonrası kullanıcıya “Account created successfully” bildirimi gösterilir.

Kısıtlamalar

• Dynamic Input yalnızca tek bir veri tipiyle çalışır.
• Boş alanlar için doğrulama (validation) yapılmadığında kayıt başarısız olabilir.
• Password tipi alanlarda karakterler maskelenir.
• Çok uzun metinler için karakter sınırlaması önerilir.

İpuçları ve Best Practices

• Placeholder metinlerini açık ve yönlendirici yazın.
• Data Type: Email kullanarak otomatik format doğrulaması ekleyin.
• Şifre alanında minimum karakter sayısı kontrolü ekleyin.
• Allow Clear özelliğini aktif tutarak kullanıcıya kolaylık sağlayın.
• Veritabanına kaydetmeden önce tüm alanların dolu olduğundan emin olun.
• Gerekiyorsa, REST API veya SQL üzerinden dinamik değer listeleri ekleyin.