Switch elementi, kullanıcıların bir özelliği veya durumu açık (aktif) / kapalı (pasif) olacak şekilde hızlıca kontrol etmesini sağlayan bir durum (toggle) elementidir. Tek dokunuş veya tıklama ile durum değiştirilebilmesi sayesinde sezgisel ve akıcı bir kullanıcı deneyimi sunar.
Switch elementi hem web hem de mobil uygulamalarda desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Ayarlar ekranlarında özellik açma / kapatma
Bildirim, izin veya görünürlük kontrolleri
Aktif–pasif durum yönetimi
Kullanıcı tercihlerinin hızlıca değiştirilmesi
2. Temel Özellikler
İkili durum (on/off) kontrolü: Switch yalnızca iki durumu temsil eder: açık (true) veya kapalı (false).
Anında görsel geri bildirim: Switch’in konumu ve rengi, mevcut durumu kullanıcıya açıkça gösterir.
Tek dokunuşla hızlı etkileşim: Kullanıcılar, tıklama veya dokunma ile durumu kolayca değiştirebilir.
Form ve aksiyonlarla uyumlu yapı: Switch; state güncelleme, ayar kaydetme ve koşullu işlemlerde sorunsuz şekilde çalışır.
2.1. Switch Elementi Özellikleri
Value: Switch'in aktif veya pasif durumunu statik olarak ayarlayabilirsiniz. Ayrıca, Symbol Picker kullanarak bu değeri başka bir elementin içeriğine veya aksiyon sonucuna bağlı olarak dinamik şekilde belirleyebilirsiniz.
2.2. Elemente Eklenebilen Aksiyonlar
Switch elementi, kullanıcının anahtarı açık (on) veya kapalı (off) konuma getirmesine bağlı olarak olay (event) bazlı aksiyonlar tetiklenmesini destekler. Aksiyonlar, elementin kendisine değil; Switch’in durumu değiştiğinde tetiklenen event’e bağlanır.
Switch elementi için aksiyonlar, Properties > Add Action alanı üzerinden aşağıdaki event aracılığıyla tanımlanabilir.
Switch durumunu state veya değişkene (true / false) kaydetmek
Seçime bağlı alanları görünür veya gizli hale getirmek
Ayar veya tercih bilgisini otomatik olarak kaydetmek
Koşullu akışları (if/else) tetiklemek
API veya workflow çağrısı yaparak durum değişikliğini sisteme iletmek
Örnek senaryo: Kullanıcı “Bildirimleri Aç” Switch’ini aktif ettiğinde, bildirim ayarları alanı görünür hale gelir ve tercih state’e kaydedilir.
Aksiyonlara İlişkin Temel Kurallar
Switch elementi yalnızca onChange event’i üzerinden aksiyon tetikleyebilir.
Her durum değişikliğinde (true → false veya false → true) onChange çalışır.
Aynı onChange event’i için birden fazla aksiyon tanımlanabilir.
Switch elementi, özellikle ayar yönetimi, izin kontrolleri ve aktif/pasif durum senaryolarında aksiyonlarla birlikte kullanıldığında hızlı ve sezgisel bir kullanıcı deneyimi sunar.
3. Switch Elementi Nasıl Kullanılır?
Bu bölümde Switch elementinin uçtan uca kullanımını örnek senaryo üzerinden ele alacağız.
Kullanıcı, uygulama içerisindeki bildirim ayarları ekranında kendisine hangi kanallar üzerinden bildirim gönderileceğini belirlemek için Switch elementini kullanır. Bu ekranda kullanıcıya iki farklı bildirim tercihi sunulur: E-posta Bildirimleri ve SMS Bildirimleri.
Senaryoda:
Her iki seçenek de birer Switch elementi ile gösterilir. Kullanıcı, Switch’i açık (On) konuma getirdiğinde ilgili bildirim türünü aktif hale getirir; kapalı (Off) konuma getirdiğinde ise o bildirim türü devre dışı bırakılır.
Kullanıcı tercihlerini değiştirdiğinde sistem, ilgili değerleri veritabanında bulunan bildirim tercihleri tablosuna kaydeder. Böylece her kullanıcının bildirim ayarları sistem tarafından saklanır ve gönderilecek bildirimler bu tercihlere göre belirlenir.
Adım 1 - Veri Kaynağı Oluşturma
DataSources modülünde tablo oluşturma:
Datasources modülüne gidin.
Ardından Tables sekmesine gidin.
“NotificationPreferences” adında yeni tablo oluşturun.
Sms: SMS bildirimlerinin açık/kapalı durumu tutar.
Adım 2 - Gerekli Aksiyonun Tanımlanması
Arayüzde verileri göstermek için:
Örnek bir aksiyon tanımlamanız gerekir.
Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.
Kullanıcı Tercihlerini Getiren Aksiyon (UserNotificationPreferences):
SELECT * FROM NotificationPreferences WHERE Id = @Id
Uygularken NotificationPreferences kısmınısiliptekrar NotificationPreferences yazıp Enter'a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir. Id parametresinin türünü Guid olarak ayarlayın.
Adım 3 - Initial Action Ekleme
Başlangıçta anasayfada:
Switch elementleri üzerinde seçili tercihlerin gösterimi için Add Action > Initial Action > Custom > Managed DB > UserNotificationPreferences aksiyonunu ekleyin.
UserNotificationPreferences aksiyonu içerisinde ilgili kullanıcı kaydı için Id > Default > User > Current Userid tanımlamasını yapın.
Adım 4 - Switch Elementini Ekleme ve Aksiyon Tanımlama
Başlangıçta anasayfada:
Sol yan panelden alt alta sabit aralıklarda tasarım yapabilmek için Elements > Container > VerticalStack elementini sayfaya sürükleyip bırakın.
Sol yan panelden alan adını belirtmek için Elements > Display > Label elementini Vertical Stack içerisine sürükleyip bırakın.
Yazıyı Label > Properties > Value > “E-posta bildirimleri” olarak tanımlayın.
Label elementi altına Elements > Select Input > Switch elementini sürükleyip bırakın.
Switch elementinde mevcut ayarı göstermek için Switch > Properties > Value > Action Results > UserNotificationPreferences > First > Email tanımlamasını yapın.
Switch elementine değişiklik sonrası kayıt işlemi için Switch > Properties > Add Action > onChange > ManagedDb > Save Record aksiyonunu ekleyin.
Save Record aksiyonu içerisinde Select Table > NotificationPreferences ve Select Columns > Sms - Email tercihlerini yapın.
Açılan Email alanına Components > Switch1 > value tanımlamasını yapın.
Sms alanına Components > Switch2 > value tanımlamasını yapın.
İlgili kullanıcının tercih kaydı için Id alanına Default > User > Current Userid tanımlamasını yapın.
Sol yan panelden ikinci alan adını belirtmek için Elements > Display > Label elementini Vertical Stack içerisine sürükleyip bırakın.
Yazıyı Label > Properties > Value > “Sms bildirimleri” olarak tanımlayın.
Label elementi altına Elements > Select Input > Switch elementini sürükleyip bırakın.
Switch elementinde mevcut ayarı göstermek için Switch > Properties > Value > Action Results > UserNotificationPreferences > First > Sms tanımlamasını yapın.
Benzer kayıt işlemi yapılacağı için E-posta alanındaki Switch1 > Properties > onChange içerisindeki Save Record aksiyonuna ilerleyin ve kopyalayın.
Kullanıcı, bildirim tercihlerini yönetmek için Switch elementlerini kullanabilir. Ekranda bulunan E-posta Bildirimleri ve SMS Bildirimleri seçenekleri ayrı ayrı açılıp kapatılabilir. Switch açık konuma getirildiğinde ilgili bildirim kanalı aktif hale gelir ve kullanıcıya o kanal üzerinden bildirim gönderilir. Switch kapalı konuma getirildiğinde ise bildirim gönderimi devre dışı bırakılır.
Kullanıcı tercihlerini değiştirdiğinde seçilen ayarlar kaydedilir ve gönderilecek bildirimler bu tercihlere göre belirlenebilir.
4. Ortak Özellikler (Properties)
Switch 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:
