Kuika’nın Text Area elementi, kullanıcıların uzun metinler veya açıklamalar girmesini sağlar. Klasik Text Input elementine göre daha geniş bir alan sunarak, kullanıcıların çok satırlı metinleri rahatça yazmasına ve düzenlemesine olanak tanır. Otomatik boyutlandırma (autosize), karakter limiti, sesli giriş (speech-to-text) ve karakter sayacı (show count) gibi özellikleri destekler.

Text Area elementi hem web hem de mobil uygulamalarda kullanılabilir.

Kullanım Alanları

• Yorum veya değerlendirme formları
• Geri bildirim veya şikayet ekranları
• Profil açıklamaları veya biyografi alanları
• Blog, not veya açıklama metinleri
• Destek formu veya müşteri mesaj panelleri

Kullanım Senaryosu – Kafe Değerlendirmesi

Bir restoran veya kafe uygulamasında kullanıcıların, sipariş ettikleri ürünleri değerlendirmesi için bir puanlama (Rating) ve Text Area alanı bulunur.
Kullanıcılar yıldızla puan verir, ardından Text Area içine yorumlarını yazar.

Senaryoda:

• Kullanıcı, “Honey Cafe” ekranına gelir.
• Ürünü puanlamak için yıldızlardan birine tıklar.
• Altında yer alan Text Area alanına “Sandviç çok lezzetliydi, servis hızlıydı.” gibi bir yorum girer.
• “Save” butonuna tıkladığında yorum ve puan, veri kaynağına kaydedilir.
• Yorum, ileride diğer kullanıcılar tarafından görüntülenebilir.

Veri Kaynağı Bağlama

1. Datasources modülüne gidin.
2. Tables sekmesine tıklayın.
3. Yeni tablo oluşturun: UserReviews
4. Aşağıdaki alanları ekleyin:

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

INSERT INTO UserReviews (UserName, Rating, CommentUser, CreatedAt)VALUES (@UserName, @Rating, @CommentUser, SYSDATETIMEOFFSET());

Bu sorgu, kullanıcı tarafından girilen değerlendirme verilerini kaydeder.

UI Design Modülü İşlemleri

1. UI Design modülüne gidin.
2. Sol kenardaki Elements → Text Input → Text Area kategorisinden Text Area elementini seçin.
3. Ekrana sürükleyip bırakın.
4. Properties Panel üzerinden aşağıdaki ayarları yapılandırın:

• Placeholder: “Type here...”
• Value: reviewComment
• Autosize: Aktif
• Max Length: 200
• Show Count: Aktif
• Allow Clear: Aktif
• Speech To Text: Aktif

5. Altına bir Button (Save) elementi ekleyin.
6. Buton için şu aksiyonu tanımlayın:

• onClick → Managed DB → Custom SQL Action (SaveReview)
• Parametreler:
  
  • UserName → loggedInUser.name
  • Rating → Rating1.value
  • Comment → TextArea1.value
    

7. Aksiyon tamamlandığında kullanıcıya “Your review has been saved successfully.” bildirimi gösterin.

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

• Value: Kullanıcı tarafından girilen metni temsil eder.
• Placeholder: Kullanıcının girdi yapmadan önce göreceği açıklayıcı metindir. Örnek: “Yorumunuzu buraya yazın.”
• Autosize: Metin uzunluğuna göre Text Area yüksekliğini otomatik ayarlar.
• Show Count: Giriş yapılan karakter sayısını gösterir.
• Max Length: Metin uzunluğu sınırını belirler.
• Speech To Text: Kullanıcının mikrofondan konuşarak yorum girmesini sağlar.

Senaryo Adımı Tamamlandığında

• Kullanıcı puan verir ve yorumunu yazar.
• “Save” butonuna bastığında veriler veri tabanına kaydedilir.
• Yorum ekranı temizlenir veya kullanıcıya bildirim gösterilir.
• Diğer kullanıcılar bu yorumu daha sonra görebilir.

Kısıtlamalar

• Çok uzun metinlerde karakter limiti kullanılmadığında performans düşebilir.
• Boş yorum gönderimi engellenmelidir (örnek: if TextArea1.value == "").
• Sesli giriş özelliği yalnızca mobil tarayıcılarda desteklenir.

İpuçları ve Best Practices

• Autosize özelliğini aktif tutarak kullanıcı deneyimini artırın.
• Maksimum karakter sınırını (örn. 200–500) belirleyerek veri bütünlüğünü koruyun.
• Speech To Text özelliğiyle mobil kullanıcılar için erişilebilirliği artırın.
• Placeholder metinlerinde sade ve yönlendirici ifadeler kullanın:
  “Lezzet, servis veya deneyiminiz hakkında yorum yapın.”
• Form gönderiminden sonra Text Area içeriğini temizleyin (Clear Value Action).