Checkbox elementi, kullanıcıların birden fazla seçenek arasından çoklu seçim yapmasına olanak tanıyan temel bir seçim elementidir. Her bir seçenek bağımsız olarak işaretlenebilir veya kaldırılabilir; bu sayede kullanıcılar birden fazla tercihi aynı anda belirleyebilir.
Checkbox elementi; form, ayar, filtreleme ve onay gerektiren senaryolarda sıkça kullanılır. Basit ve anlaşılır yapısı sayesinde kullanıcıların seçimlerini net bir şekilde ifade etmesini sağlar.
Checkbox elementi hem web hem de mobil uygulamalarda desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Birden fazla seçenek içeren form alanları
Filtreleme ve kategori seçimi ekranları
Ayar ve tercih listeleri
Kullanıcı onayları ve izinler (ör. “Kullanım koşullarını kabul ediyorum”)
Anket ve çoklu cevap gerektiren değerlendirme soruları
2. Temel Özellikler
Çoklu seçim desteği: Kullanıcılar birden fazla Checkbox’ı aynı anda seçebilir veya seçimleri kaldırabilir.
Bağımsız çalışma mantığı: Her Checkbox diğerlerinden bağımsızdır; bir seçeneğin işaretlenmesi diğerlerini etkilemez.
Net ve anlaşılır kullanıcı deneyimi: İşaretli ve işaretsiz durumlar görsel olarak açıkça ayırt edilir.
2.1. Checkbox Elementi Özellikleri
Properties panelinden aşağıdaki ayarları yapılandırabilirsiniz:
Label: Checkbox elementinin yanında görünen metni tanımlar.
Checked: Checkbox’ın seçili olup olmadığını belirler. Seçili olduğunda checkbox işaretlenmiş olarak görünür.
Box Color: Checkbox kutusunun arka plan rengini belirler (işaretlenmediğinde görünür).
Box Color OnChecked: Checkbox işaretlendiğinde kutunun arka plan rengini tanımlar.
Android ve iOS uygulamalarında, Checkbox elementinin rengini Properties panelindeki Text Color alanından değiştirebilirsiniz.
2.2. Elemente Eklenebilen Aksiyonlar
Checkbox elementi, kullanıcının seçim yapmasına bağlı olarak olay (event) bazlı aksiyonlar tetiklenmesini destekler. Aksiyonlar, elementin kendisine değil; Checkbox’ın işaretlenmesi veya işaretinin kaldırılması sonucunda tetiklenen event’e bağlanır.
Checkbox elementi için aksiyonlar, Properties > Add Action alanı üzerinden aşağıdaki event aracılığıyla tanımlanabilir.
Desteklenen Aksiyon Tetikleyicisi
onChange: Kullanıcı Checkbox’ı işaretlediğinde veya işareti kaldırdığında tetiklenir.
Kullanım amaçları:
Seçim durumunu state veya değişkene kaydetmek
Seçime bağlı olarak başka alanları görünür/gizli yapmak
Form alanlarını aktif/pasif hale getirmek
Filtreleme seçeneklerini güncellemek
API veya workflow tetikleyerek seçimi kaydetmek
Örnek senaryo: Kullanıcı “Kullanım koşullarını kabul ediyorum” Checkbox’ını işaretlediğinde, “Devam Et” butonu aktif hale gelir.
Aksiyonlara İlişkin Temel Kurallar
Checkbox elementi yalnızca onChange event’i üzerinden aksiyon tetikleyebilir.
Checkbox’ın durumu her değiştiğinde onChange event’i çalışır.
Aynı onChange event’i için birden fazla aksiyon tanımlanabilir.
Checkbox elementi, özellikle form onayları, filtreleme ve tercih yönetimi senaryolarında aksiyonlarla birlikte kullanıldığında esnek ve kullanıcı dostu bir deneyim sunar.
3. Checkbox Elementi Nasıl Kullanılır?
Bu bölümde Checkbox elementinin uçtan uca kullanımını örnek senaryo üzerinden ele alacağız.
Senaryo: İlgi Alanı Seçimi
Kullanıcı, profil oluşturma veya tercih ayarları ekranında ilgi alanlarını belirlemek için Checkbox elementini kullanabilir. Her bir ilgi alanı ayrı bir Checkbox olarak gösterilir ve kullanıcı birden fazla seçeneği aynı anda işaretleyebilir.
Senaryoda:
Ekranda aşağıdaki seçenekler bulunur:
Teknoloji
Spor
Seyahat
Müzik
Kitap
Kullanıcı ilgilendiği alanları işaretler. Seçilen ilgi alanları kullanıcı profilinde saklanır ve uygulama içerisinde önerilen içeriklerin veya bildirimlerin kişiselleştirilmesi için kullanılır.
Adım 1 - Veri Kaynağı Oluşturma
DataSources modülünde tablo oluşturma:
Datasources modülüne gidin.
Ardından Tables sekmesine gidin.
“UserInterests” adında yeni tablo oluşturun.
Kurulması gereken tablo yapısı aşağıdaki gibidir:
Önemli Alan adları:
KUserId: İlgili kayıtların hangi kullanıcıya ait olduğunu belirtir. Kullanıcı tercihlerini kullanıcı bazında saklamak ve gerektiğinde ilgili kullanıcıya ait seçimleri getirebilmek için kullanılır. Type alanında KUser tablosunu seçmeniz gerekir.
IsTechnology: Kullanıcının teknoloji alanına ilgi duyup duymadığını belirtir. Checkbox seçili olduğunda değer true (1) olarak kaydedilir, seçili olmadığında false (0) olarak tutulur.
IsSports: Kullanıcının spor ile ilgili içeriklere ilgi duyup duymadığını belirtir. Checkbox seçimine bağlı olarak true (1) veya false (0) değeri alır.
IsTravel: Kullanıcının seyahat ile ilgili içeriklere ilgi duyup duymadığını ifade eder. Kullanıcı ilgili checkbox’ı seçtiğinde değer true (1) olarak saklanır.
IsMusic: Kullanıcının müzik ile ilgili içeriklere ilgi duyup duymadığını belirtir. Checkbox seçimine göre true (1) veya false (0) değeri alır.
IsBooks: Kullanıcının kitap ile ilgili içeriklere ilgi duyup duymadığını ifade eder. Checkbox seçildiğinde true (1) olarak kaydedilir ve kullanıcının ilgi alanları içerisinde yer alır.
Adım 2 - Checkbox Elementini Ekleme ve Aksiyon Tanımlama
Başlangıçta anasayfada:
Sol yan panelden Elements > Display > Label elementini sayfaya sürükleyip bırakın.
Yazıyı Label > Properties > Value > “İlgi Alanlarınız” şeklinde tanımlayın.
Yazı stilini ön tanımlı yazı stillerinden Label > Styling > Text > Style > Normal Text ve Heading 2 olarak tanımlayın.
Altına sol yan panelden Elements > Container > HorizontalStack elementini sayfaya sürükleyip bırakın.
Yazı stilini Checkbox > Styling > Text > Style > Normal Text ön tanımlı stilini ayarlayın.
Kayıt sırasında birden fazla checkbox elementinin doğru seçilebilmesi için sağ yan panelden Checkbox1 > Rename > “SporCheckbox”elementi yeniden adlandırın.
Horizontal Stack elementi içerisine yeni Elements > Select Input > Checkbox elementi daha ekleyin.
Açıklama yazısını Checkbox > Properties > Value > “Teknoloji” olarak tanımlayın.
Yazı stilini Checkbox > Styling > Text > Style > Normal Text ön tanımlı stilini ayarlayın.
Benzer checkbox ekleme ve düzenleme işlemlerini Seyehat, Müzik ve Kitap için de uygulayın.
Sayfaya Elements > Navigation > Button elementini sürükleyip bırakın.
Adını Button > Properties > Label > “Kaydet” olarak tanımlayın.
Button’a kayıt aksiyonunu ekleyin. Button > Properties > Add Action > onClick > Managed Db > Save Record aksiyonunu ekleyin.
Save Record aksiyonunda aşağıdaki alanları seçin.
IsBooks alanına Components > KitapCheckbox1 > checked tanımlamasını yapın.
Benzer şekilde IsMusic, IsSports, IsTechnology ve IsTravel alanlarını da Components > ilgili Checkbox1 > checked şeklinde tanımlayın.
Hangi kullanıcıya ait tercih olduğunu belirtmek için KuserID alanına Default > User > Current Userid tanımlamasını yapın.
Son olarak yeni kayıt için Id alanına Default > New Guid tanımlamasını yapın.
Preview:
Bu örnekte kullanıcıların ilgi alanlarını seçebilmesi için Checkbox elementleri kullanılır. Kullanıcı, ekranda yer alan Spor, Teknoloji, Seyehat, Müzik ve Kitap seçeneklerinden ilgilendiği alanları işaretleyebilir. Her bir seçenek bağımsız olarak seçilebilir veya kaldırılabilir.
Kullanıcı seçimlerini yaptıktan sonra Kaydet butonuna tıklayarak tercihlerini sisteme kaydeder. Seçilen ilgi alanları kullanıcıya özel olarak saklanır ve uygulama içerisinde öneriler, içerikler veya bildirimler bu tercihlere göre özelleştirilebilir.
4. Ortak Özellikler (Properties)
Checkbox 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:
