1. Multi Select Elementine Genel Bakış

Multi Select elementi, kullanıcıların bir liste içerisinden birden fazla seçeneği aynı anda seçmesini sağlayan gelişmiş bir seçim elementidir. Kullanıcılar, ihtiyaçlarına uygun seçenekleri işaretleyerek kombinasyonlar oluşturabilir ve seçilen öğeleri görsel olarak etiketlenmiş şekilde görüntüleyebilir.

Multi Select elementi; çoklu tercih gerektiren form, filtreleme ve ayar senaryolarında kullanıcı deneyimini iyileştirir. Seçilen değerlerin net bir şekilde gösterilmesi, kullanıcıların yaptıkları tercihleri kolayca kontrol etmesini sağlar.

Multi Select elementi hem web hem de mobil uygulamalarda desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Birden fazla kategori veya etiket seçimi
• Filtreleme ve arama ekranlarında çoklu kriter belirleme
• Kullanıcı ilgi alanları veya yetkinlik seçimi
• Ayar ve tercih ekranlarında çoklu seçenek yönetimi
• Anket ve çoklu cevap gerektiren formlar

2. Temel Özellikler

• Çoklu seçim desteği: Kullanıcılar bir liste içerisinden birden fazla seçeneği aynı anda seçebilir.
• Dinamik liste ve veri kaynağı desteği: Seçenekler statik listelerden veya dinamik veri kaynaklarından oluşturulabilir.
• Hızlı ekleme ve kaldırma deneyimi: Kullanıcılar seçtikleri öğeleri tek tıklamayla ekleyebilir veya kaldırabilir.

2.1. Multi Select Elementi Özellikleri

• Value: Statik bir değer ekleyebilir veya Symbol Picker aracılığıyla başka bir elementin içeriğini ya da aksiyon sonucunu dinamik olarak gösterebilirsiniz.
• Options: Açılır liste içinde gösterilecek veri tablosunun bağlanacağı bölümdür.
• Placeholder: Kullanıcının veri girmediğinde görünen yer tutucu metindir.
• Allow Clear: Sağ kenarda bir Sil (X) simgesi ekleyerek girilen verinin tek tıklamayla silinmesini sağlar.
• Auto Refresh: Seçimler değiştirildiğinde sonuçların hemen güncellenmesini sağlar. Switch aktif olduğunda, seçimlerdeki değişiklikler otomatik olarak yansıtılır.
• Max Tag Count: Birden fazla seçim yapıldığında ekranda gösterilecek maksimum etiket sayısını belirler.
• Dropdown Scroll Item Limit: Açılır listede aynı anda görüntülenecek maksimum öğe sayısını belirler; limit aşıldığında liste kaydırma (scroll) ile devam eder.

2.2. Elemente Eklenebilen Aksiyonlar

Multi Select elementi, kullanıcıların yaptığı çoklu seçimlere bağlı olarak olay (event) bazlı aksiyonlar tanımlanmasını destekler. Aksiyonlar, elementin kendisine değil; kullanıcı etkileşimleri sonucunda tetiklenen event’lere bağlanır.

Multi Select elementi için aksiyonlar, Properties > Add Action alanı üzerinden aşağıdaki event’ler aracılığıyla eklenebilir.

Desteklenen Aksiyon Tetikleyicileri

onSelect: Kullanıcı açılır listeden bir öğe seçtiğinde tetiklenir.

Kullanım amaçları:

• Seçilen öğeyi state veya değişkene eklemek
• Bağlı alanları veya filtreleri güncellemek
• Seçime bağlı ek alanları görünür hale getirmek

onChange: Seçili öğeler listesi her değiştiğinde (ekleme veya kaldırma) tetiklenir.

Kullanım amaçları:

• Tüm seçili değerleri toplu şekilde state’e yazmak
• Çoklu filtreleme veya liste güncelleme işlemleri yapmak
• Hesaplama veya koşullu akışları tetiklemek

Örnek senaryo: Kullanıcı birden fazla kategori seçtiğinde, ürün listesi seçilen kategorilere göre anında filtrelenir.

onSearch: Kullanıcı Multi Select alanında arama yaptığında tetiklenir.

Kullanım amaçları:

• Girilen metne göre seçenek listesini dinamik olarak filtrelemek
• API üzerinden arama yaparak sonuçları güncellemek
• Büyük veri setlerinde performanslı arama sağlamak

onBlur: Kullanıcı Multi Select alanından odak çıktığında tetiklenir.

Kullanım amaçları:

• Seçim tamamlandıktan sonra validasyon çalıştırmak
• Alan boş bırakıldıysa uyarı göstermek

Aksiyonlara İlişkin Temel Kurallar

• Multi Select elementi birden fazla event üzerinden aksiyon tetikleyebilir.
• Aynı event için birden fazla aksiyon tanımlanabilir.
• onChange event’i, çoklu seçim senaryolarında ana tetikleyici olarak kullanılır.
• Büyük veri setleriyle çalışırken onSearch event’ine bağlı aksiyonların performansı dikkate alınmalıdır.

Multi Select elementi, özellikle çoklu filtreleme, etiketleme ve tercih yönetimi senaryolarında aksiyonlarla birlikte kullanıldığında esnek ve güçlü bir kullanıcı deneyimi sunar.

3. Multi Select Elementi Nasıl Kullanılır? 

Bu bölümde Multi Select elementinin uçtan uca kullanımını örnek senaryo üzerinden ele alacağız.

Senaryo: Proje Etiketleri Seçimi

Kullanıcı, bir proje veya görev oluştururken ilgili konuları belirtmek için MultiSelect elementini kullanır. MultiSelect sayesinde kullanıcı bir projeye birden fazla etiket ekleyebilir.

Senaryoda:

• Ekranda bir MultiSelect alanı bulunur ve kullanıcı bu alan üzerinden projeye ait etiketleri seçebilir. Kullanıcı listeden bir veya birden fazla etiketi seçtiğinde, seçilen değerler alan içerisinde etiket (tag) şeklinde görüntülenir.
• Kullanıcı isterse seçtiği etiketleri alan içerisindeki kapatma (x) ikonunu kullanarak kaldırabilir veya yeni etiketler ekleyebilir.
• Seçilen etiketler proje kaydı ile birlikte saklanır ve daha sonra projelerin filtrelenmesi, kategorize edilmesi veya raporlanması için kullanılabilir.

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

DataSources modülünde tablo oluşturma: 

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

• Önemli Alan adları:
  
  • TagName: Projelerde kullanılabilecek etiket adını ifade eder. MultiSelect elementi içerisinde kullanıcıya sunulan seçenekleri oluşturur ve kullanıcı bu etiketlerden bir veya birden fazlasını seçerek projeye ilişkilendirebilir.
• “Projects” adında yeni tablo oluşturun.
• Kurulması gereken tablo yapısı aşağıdaki gibidir:
  

• Önemli Alan adları:
  
  • ProjectName: Projeye ait adı ifade eder. Kullanıcı tarafından oluşturulan veya yönetilen projelerin tanımlanmasını sağlar ve uygulama içerisinde projelerin listelenmesi sırasında görüntülenir.
  • ProjectTags: Projeye ait etiket bilgilerini temsil eder. MultiSelect elementi üzerinden seçilen etiketlerin referanslarını tutmak veya ilgili proje ile etiketler arasındaki ilişkiyi göstermek amacıyla kullanılır.

Adım 2 - Gerekli Aksiyonun Tanımlanması

Arayüzde verileri göstermek için: 

1. Örnek üç aksiyon tanımlamanız gerekir.
2. Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.

• Örnek Verileri Ekleyen Aksiyon (InsertProjectTags): Uygulamayı örnek verilerle test etmek için aşağıdaki SQL aksiyonunu ekleyin ve TEST butonuna basın.

INSERT INTO ProjectTags (Id, TagName)
VALUES
(NEWID(), 'Frontend'),
(NEWID(), 'Backend'),
(NEWID(), 'Database'),
(NEWID(), 'API'),
(NEWID(), 'Bug Fix'),
(NEWID(), 'Improvement'),
(NEWID(), 'Performance')

Uygularken ProjectTags kısmını silip tekrar ProjectTags yazıp Enter'a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

• Etiketleri Listeleyen Aksiyon  (GetProjectTags):

SELECT * FROM ProjectTags;

Uygularken ProjectTags kısmını silip tekrar ProjectTags yazıp Enter'a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

Adım 3 - Initial Action Ekleme

Başlangıçta anasayfada: 

• MultiSelect içerisinde etiketlerin gösterimi için Add Action > Initial Action > Custom > Managed DB > GetProjectTags  aksiyonunu ekleyin.
  

Adım 4 - MultiSelect Elementini Ekleme ve Aksiyon Tanımlama

Başlangıçta anasayfada: 

• Sol yan panelden proje adını eklemek için Elements > Text Input > TextInput elementini sayfaya sürükleyip bırakın. 
• Sol yan panelden proje adını eklemek için Elements > Select Input > MultiSelect elementini sayfaya sürükleyip bırakın. 
• Multi Select içerisine etiketleri MultiSelect > Properties > Options > Action GetProjectTags, Field to display > TagName ve Field to Use as Key > Id olarak tanımlayın.
• Seçim sonrası etiketleri temizlemek için MultiSelect > Properties > AllowClear > Açık olarak ayarlayın.
• Altına sol yan panelden Elements > Navigation > Button elementini sayfaya sürükleyip bırakın. 
• Button yazısını Button > Properties > Label > “Save” olarak tanımlayın.
• Kayıt işlemleri için Button > Properties > Add Action > onClick > ManagedDB > Save Record aksiyonunu ekleyin.
• Save Record aksiyonu içerisinde Select Table > Projects tablosunu seçin.
  

• Select Columns alanında tüm sütunları seçin.
• ProjectName alanına Components > TextInput > Value tanımlaması yapınız.
  

•  ProjectTags alanına Components > MultiSelect >  tanımlaması yapınız.
  

Bu alan, kullanım ihtiyacınıza bağlı olarak kimlik (Id) bilgisi üzerinden de ilerletilebilir. İşlemlerin sonucu olan değerler (valuelar), virgülle (',') ayrılmış tek bir metin dizisi (string) olarak gelecektir. Örneğin: id1,id2,id3 veya tagname1, tagname2, tagname3.

•  Id alanına Default > New Guid tanımlaması yapın.
  

Preview:

Bu örnekte kullanıcıların bir projeye birden fazla etiket ekleyebilmesi için MultiSelect elementi kullanılır. Kullanıcı proje adını ilgili alana girdikten sonra, MultiSelect alanı üzerinden projeye ait etiketleri seçebilir. Seçilen etiketler alan içerisinde etiket (tag) şeklinde görüntülenir ve kullanıcı isterse bu seçimleri kaldırabilir veya yeni etiketler ekleyebilir.

Kullanıcı Save butonuna tıkladığında proje adı ve seçilen etiket bilgileri kaydedilir. Kaydedilen veriler alt bölümde yer alan Test Result alanında görüntülenir. Bu alanda proje kaydına ait Id, Project Name ve seçilen etiketlerin virgülle ayrılmış hali olan Project Tags bilgileri gösterilir. Böylece kullanıcı, oluşturduğu proje ve seçtiği etiketlerin sistemde nasıl saklandığını kolayca inceleyebilir. Aşağıdaki görselde, kaydedilen verinin sistemde nasıl tutulduğunun örnek çıktısı gösterilmiştir.

4. Ortak Özellikler (Properties)

Multi Select 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)

• Çoklu seçim gerektiren senaryolarda kullanın. Kullanıcının birden fazla seçenek seçmesi gerekiyorsa Multi Select tercih edilmelidir; tekli seçim için Radio Button önerilir.
• Max Tag Count ayarını kullanarak görsel kalabalığı azaltın. Çok sayıda seçim yapıldığında ekranda gösterilecek etiket sayısını sınırlamak, düzenli bir görünüm sağlar.
• onChange event’ini ana tetikleyici olarak değerlendirin. Seçimler eklendiğinde veya kaldırıldığında çalışması gereken işlemleri bu event’e bağlayın.
• onSearch event’ini büyük veri setleri için optimize edin. API tabanlı aramalarda debounce veya minimum karakter sayısı gibi önlemler alın.
• Allow Clear özelliğini kullanıcı deneyimi için değerlendirin. Tüm seçimlerin tek tıklamayla temizlenebilmesi, özellikle filtreleme senaryolarında faydalıdır.

6. Kısıtlamalar

• Multi Select elementi tekil seçim gerektiren senaryolar için uygun değildir.
• Aksiyonlar yalnızca desteklenen event’ler (onSelect, onChange, onSearch, onBlur) üzerinden tetiklenebilir.