Kuika’nın Select Box elementi, kullanıcıların açılır bir menü aracılığıyla belirli seçenekler arasından seçim yapmalarını sağlar. Formlarda, kayıt ekranlarında veya dinamik filtreleme işlemlerinde tercih edilen Select Box, kullanıcıların uzun veri listelerinde kolayca seçim yapmasına olanak tanır.

Hem web hem de mobil uygulamalarda desteklenir.

Kullanım Alanları

• Kayıt ve başvuru formları (örn. şehir, departman, kategori seçimi)
• Ödeme veya rezervasyon işlemleri (örn. kart, tarih, oda tipi seçimi)
• Filtreleme ekranları (örn. ürün kategorisi, fiyat aralığı, marka seçimi)
• Raporlama ve analiz ekranlarında dinamik veri seçimi
• Çok aşamalı form yapılarında birbirine bağlı (dependent) dropdown menüler

Kullanım Senaryosu – Festival Bilet Bilgisi Seçimi

Bir etkinlik rezervasyon uygulamasında, kullanıcılar “Music Fest 2024” bileti alırken Select Box elementiyle kart, misafir tipi ve tarih seçimi yapar.

Senaryoda:

• Kullanıcı etkinlik sayfasını açar.
• “Select Registered Card” alanından sistemde kayıtlı olan kartını seçer (ör. MasterCard).
• Ardından “Select Guest Type” alanından bilet tipini belirler (ör. Standard, VIP, Premium).
• Son olarak “Select Date” alanından etkinliğe katılmak istediği tarihi seçer.
• Seçimler tamamlandığında “Buy a Ticket” butonuna tıklayarak işlemi tamamlar.

Bu senaryoda her Select Box, farklı bir veri kaynağına bağlanarak dinamik içerik sunar.

Veri Kaynağı Bağlama

• Datasources modülüne gidin.
• Tables başlığı yanındaki “+” ikonuna tıklayın.
• Tabloya GuestTypes adını verin.
• Aşağıdaki tabloyu oluşturun. 

• SQL Actions sekmesinden yeni bir aksiyon oluşturun ve adına SelectGuestType yazın.
• SQL komutunu girin:
  

SELECT 1 AS TypeId, 'Standard' AS TypeNameUNION ALLSELECT 2, 'VIP'UNION ALLSELECT 3, 'Premium'

• UI Design modülüne dönerek Select Box elementini seçin.
• Options → SelectGuestType bağlantısını yapın.
• Key = TypeId, Text = TypeName olarak ayarlayın.

UI Design Modülü İşlemleri

1. UI Design modülünü açın.
2. Sol panelden Elements > Select Input > Select Box elementini seçin.
3. Elementi ekrana sürükleyip bırakın.
4. Properties panelinde aşağıdaki ayarları yapılandırın:

• Label: Select Guest Type
• Placeholder: Standard, VIP, etc.
• Options: SelectGuestType
• Allow Clear: Aktif
• Searchable: Aktif
• Contains Null Item: Pasif
• Sort By: A-Z
• Dropdown Scroll Item Limit: 5

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

• Value: Seçilen değeri tutar (ör. “2” → VIP).
• Options: Listeye bağlanacak veri kaynağını belirler.
• Fixed Options List: Manuel (sabit) değerlerle liste oluşturur.
• Placeholder: Kullanıcı seçim yapmadan önce görüntülenen açıklama metni.
• Allow Clear: Seçilen değeri tek tıklamayla silme imkânı sağlar.
• Searchable: Açılır listede arama yapılmasını sağlar.
• Contains Null Item: Listenin ilk satırını boş bırakır.
• Sort By: Öğeleri alfabetik sırayla düzenler.
• Dropdown Scroll Item Limit: Görüntülenecek maksimum öğe sayısını belirler, kalan öğeler kaydırılarak görünür.

Senaryo Tamamlandığında

• Kullanıcı “Select Guest Type” kutusuna tıklar.
• Liste açılır ve sistemden gelen seçenekler gösterilir.
• Kullanıcı VIP seçeneğini seçer.
• Alan VIP olarak güncellenir ve işlem devam eder.
• Gerekirse kullanıcı (X) simgesine basarak seçimini temizleyebilir.

Kısıtlamalar

• Dynamic data kullanıldığında Options bağlantısının doğru yapılması gerekir.
• Çok uzun listelerde performans için “Dropdown Scroll Item Limit” kullanılmalıdır.
• Contains Null Item aktif edilmezse ilk satır boş bırakılmaz.
• Select Box, çoklu seçim için uygun değildir (bunun için Multi Select kullanılmalıdır).

İpuçları ve Best Practices

• Placeholder metni kullanıcıyı yönlendirmelidir (ör. “Select your ticket type”).
• Gereksiz seçenekleri gizlemek için dinamik filtreleme kullanılabilir.
• “Searchable” aktif edilerek kullanıcı deneyimi artırılabilir.
• Temaya uygun renkler kullanarak tutarlı bir görsel stil oluşturun.
• Eğer seçim yapılması zorunluysa, “Allow Clear” özelliğini devre dışı bırakın.