Kuika’nın Multi Select elementi, kullanıcıların bir listeden birden fazla seçeneği aynı anda seçebilmesine olanak tanır. Seçilen öğeler etiket (tag) biçiminde görüntülenir ve kullanıcılar bu etiketleri kolayca silebilir veya güncelleyebilir. Filtreleme, kategori seçimi ve etiketleme gibi birden çok öğenin seçilmesi gereken durumlarda kullanılır.

Web ve mobil uygulamalarda desteklenir.

Kullanım Alanları

• Ürün filtreleme menülerinde (ör. renk, kategori, marka seçimi)
• Formlarda birden fazla ilgi alanı veya tercih seçimi
• Raporlama veya veri analizlerinde çoklu seçim
• Etkinlik veya bilet sistemlerinde birden fazla kategori seçimi
• Görev yönetimi uygulamalarında bir kullanıcıya birden fazla görev atama
• Eğitim platformlarında birden fazla ders veya beceri seçimi

Kullanım Senaryosu – Festival Bilet Kategorisi Seçimi

Bir festival bilet satış uygulamasında, kullanıcılar katılmak istedikleri alanları seçmek için Multi Select elementi kullanır.

• Kullanıcı “Music Fest 2024” ekranını açar.
• “Select Registered Card” alanından kayıtlı kartını seçer.
• “Select Guest Type” alanından bireysel veya grup seçimini yapar.
• “Select Club” alanında Multi Select elementi yer alır.
• Kullanıcı “Beach Club”, “VIP Zone” ve “After Party” gibi birden fazla kulüp seçebilir.
• Seçilen kulüpler etiket (tag) biçiminde alanın içinde görünür.
• Kullanıcı isterse (x) simgesine tıklayarak seçimini kaldırabilir.
• Tüm seçimler tamamlandığında “Buy a Ticket” butonuna basarak işlemi tamamlar.

Veri Kaynağı Bağlama

• Datasources modülüne gidin.
• Tables başlığı yanındaki “+” ikonuna tıklayarak “Clubs” adında aşağıdaki tabloyu oluşturun.

• Ardından Actions > SQL Actions sekmesinden “ClubList” adında bir aksiyon oluşturun.
• SQL komutu olarak şu sorguyu girin:

SELECT 1 AS ClubId, 'Beach Club' AS ClubNameUNION ALLSELECT 2, 'VIP Zone'UNION ALLSELECT 3, 'After Party'

• Multi Select elementine “ClubList” aksiyonunu bağlayın.
• Options → ClubList seçin, Key = ClubId, Text = ClubName olarak yapılandırın.

UI Design Modülü İşlemleri

• UI Design modülüne gidin.
• Sol panelden Elements > Select Input > Multi Select elementini sürükleyip bırakın.
• Properties panelinde şu ayarları yapın:

• Placeholder: Choose one or more clubs
• Options: ClubList
• Allow Clear: Aktif
• Auto Refresh: Aktif
• Max Tag Count: 3

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

• Value: Seçilen öğeleri liste olarak tutar (örn. [1,2]).
• Options: Listede gösterilecek veri kaynağını belirler.
• Placeholder: Kullanıcı seçim yapmadan önce görünen açıklayıcı metindir.
• Allow Clear: Seçimleri tek tıklamayla temizlemeyi sağlar.
• Auto Refresh: Seçim değiştiğinde sonuçların anında yenilenmesini sağlar.
• Max Tag Count: Görüntülenecek maksimum etiket sayısını belirler. Fazlası “+3 more” olarak görünür.

Senaryo Tamamlandığında

• Kullanıcı “Select Club” alanına tıkladığında liste açılır.
• Kullanıcı birden fazla seçeneği işaretler.
• Seçilen öğeler etiket şeklinde görünür.
• Kullanıcı gerekirse etiketleri kaldırabilir.
• “Buy a Ticket” butonuna tıklayarak seçimleri kaydeder.

Kısıtlamalar

• Çok fazla seçim yapıldığında ekran karmaşık hale gelebilir. Bu durumda Max Tag Count kullanılmalıdır.
• Auto Refresh kapalıysa seçim değişiklikleri anında görünmez.
• Dinamik veri kullanılacaksa Options alanı bir SQL Action’a bağlanmalıdır.

İpuçları ve Best Practices

• Placeholder metnini kullanıcı yönlendirmesi için açıklayıcı yapın (ör. “Select clubs you’d like to join”).
• Etiket renklerini tema ile uyumlu hale getirin.
• Çok sayıda seçenek varsa filtreleme veya arama özelliğini aktif edin.
• Kullanıcı deneyimini artırmak için “Select All” seçeneği ekleyin.
• Gerektiğinde seçimleri sınırlandırmak için maksimum seçim sayısı belirleyin.