Radio Button Group elementi, kullanıcıların bir grup seçenek arasından yalnızca tek bir seçeneği seçmesini sağlayan buton tabanlı bir seçim elementidir. Seçenekler aynı grup altında sunulur ve bir seçenek seçildiğinde diğer seçeneklerin seçimi otomatik olarak kaldırılır.
Radio Button Group, seçeneklerin net ve sınırlı olduğu senaryolarda kullanıcıya hızlı, sezgisel ve kontrollü bir seçim deneyimi sunar. Buton formu sayesinde kullanıcılar tüm seçenekleri aynı anda görebilir ve karşılaştırarak karar verebilir.
Radio Button Group elementi yalnızca web uygulamalarında desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Tekli seçim gerektiren form alanları
Cinsiyet, durum, teslimat tipi gibi seçenek grupları
Ayar ekranlarında alternatifler arası seçim
Anket ve değerlendirme soruları (tek cevaplı)
Filtreleme senaryolarında tek kriter belirleme
2. Temel Özellikler
Tekli seçim (single select) desteği: Kullanıcı aynı anda yalnızca bir seçeneği seçebilir; yeni bir seçim yapıldığında önceki seçim otomatik olarak kaldırılır.
Statik ve dinamik seçenek desteği: Seçenekler sabit olarak tanımlanabilir veya veri kaynakları üzerinden dinamik şekilde oluşturulabilir.
Anında görsel geri bildirim: Seçili ve seçili olmayan durumlar görsel olarak net biçimde ayırt edilir.
2.1. Radio Button Group Elementi Özellikleri
Value: Statik bir değer ekleyebilir veya Symbol Picker kullanarak başka bir elementin içeriğini ya da aksiyon sonucunu dinamik olarak gösterebilirsiniz.
Disabled: Radio Button Group'un kullanımını devre dışı bırakır. Aktif olduğunda butonlara tıklanarak seçim yapılamaz.
Space: Seçenekler arasındaki boşluğu (px cinsinden) ayarlayabilirsiniz. Varsayılan değer 0’dır.
Selected Font Color: Seçili butonun içindeki metnin rengini belirler.
Selected Bg Color: Seçili butonun arka plan rengini belirler.
Unselected Bg Color: Seçilmemiş butonların arka plan rengini ayarlar.
2.2. Elemente Eklenebilen Aksiyonlar
Radio Button Group elementi, kullanıcının yaptığı tekli seçime bağlı olarak olay (event) bazlı aksiyonlar tetiklenmesini destekler. Aksiyonlar, elementin kendisine değil; kullanıcı seçimini değiştirdiğinde tetiklenen event’e bağlanır.
Radio Button Group elementi için aksiyonlar, Properties > Add Action alanı üzerinden aşağıdaki event aracılığıyla tanımlanabilir.
Desteklenen Aksiyon Tetikleyicisi
onChange: Kullanıcı Radio Button Group içerisindeki seçeneği değiştirdiğinde tetiklenir.
Kullanım amaçları:
Seçilen değeri state veya değişkene kaydetmek
Seçime bağlı alanları görünür veya gizli hale getirmek
Form akışını veya adımlarını güncellemek
Filtreleme veya sıralama işlemlerini tetiklemek
API veya workflow çağrısı yaparak seçimi kaydetmek
Örnek senaryo: Kullanıcı “Teslimat Türü” alanında farklı bir seçenek seçtiğinde, seçime bağlı olarak adres veya teslimat zamanı alanları dinamik olarak güncellenir.
Aksiyonlara İlişkin Temel Kurallar
Radio Button Group elementi yalnızca onChange event’i üzerinden aksiyon tetikleyebilir.
Her seçim değişikliğinde onChange event’i çalışır.
Aynı onChange event’i için birden fazla aksiyon tanımlanabilir.
Tekli seçim yapısı sayesinde aksiyon akışları daha öngörülebilir ve kontrollüdür.
Radio Button Group elementi, özellikle form adımları, ayar seçimleri ve tek kriterli filtreleme senaryolarında aksiyonlarla birlikte kullanıldığında net ve kullanıcı dostu bir deneyim sunar.
3. Radio Button Group Elementi Nasıl Kullanılır?
Bu bölümde Radio Button Group elementinin uçtan uca kullanımını örnek senaryo üzerinden ele alacağız.
Senaryo: Ödeme Yöntemi Seçimi
Kullanıcı, bir siparişi tamamlarken tercih ettiği ödeme yöntemini belirlemek için Radio Button Group elementini kullanır. Radio Button Group sayesinde kullanıcı listelenen seçenekler arasından yalnızca bir tanesini seçebilir.
Senaryoda:
Ekranda farklı ödeme seçeneklerini temsil eden bir Radio Button Group bulunur. Kullanıcı aşağıdaki seçeneklerden kendisine uygun olan ödeme yöntemini seçer:
Kredi Kartı
Havale / EFT
Kapıda Ödeme
Kullanıcı bir seçenek seçtiğinde diğer seçenekler otomatik olarak pasif hale gelir ve yalnızca seçilen ödeme yöntemi aktif kalır. Böylece kullanıcı sipariş işlemini hangi ödeme yöntemi ile tamamlamak istediğini kolayca belirleyebilir.
Bu yapı sayesinde kullanıcılar birden fazla seçenek arasından tek bir tercih yapmaları gereken durumlarda hızlı ve anlaşılır bir şekilde seçim yapabilirler.
Adım 1 - Veri Kaynağı Oluşturma
DataSources modülünde tablo oluşturma:
Datasources modülüne gidin.
Ardından Tables sekmesine gidin.
“PaymentPreferences” adında yeni tablo oluşturun.
Kurulması gereken tablo yapısı aşağıdaki gibidir:
Önemli Alan adları:
Id: Ödeme yöntemini seçen kullanıcıyı temsil eder. Current Userid bilgisi üzerinden kayıt tutulur veya güncellenir.
Uygularken PaymentPreferences kısmınısiliptekrar PaymentPreferences yazıp Enter'a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.
Başlangıç Tercihini Getiren Aksiyon (PaymentPreferencesValue):
SELECT * FROM PaymentPreferences WHERE id = @CurentUserid
Uygularken PaymentPreferences kısmınısiliptekrar PaymentPreferences yazıp Enter'a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir. CurentUserid parametre türünü Guid olarak seçin.
Adım 3 - Initial Action Ekleme
Başlangıçta anasayfada:
Seçim ekranında Radio Button tercihlerinin kayıt ve güncelleme işlemlerini gözlemlemek için Add Action > Initial Action > Custom > Managed DB > PaymentPreferencesAll aksiyonunu ekleyin.
Açılış ekranında tercihin seçili gelmesi için Add Action > Initial Action > Custom > Managed DB > PaymentPreferencesValue aksiyonunu ekleyin.
PaymentPreferencesValue aksiyonu içerisinde CurrentUserid > Default > User > Current Userid tanımlamasını yapın.
Adım 4 - Radio Button Group Elementini Ekleme ve Aksiyon Tanımlama
Başlangıçta anasayfada:
Sol yan panelden alan adını belirtmek için Elements > Display > Label elementini sayfaya sürükleyip bırakın.
Yazıyı Label > Properties > Value > “Ödeme Türünü Seçin:” olarak tanımlayın.
Altına Elements > Select Input > RadioButtonGroup elementini sürükleyip bırakın.
Açılışta seçili değeri göstermek için RadioButtonGroup > Properties > Value > Action Results > PaymentPreferencesValue > First > PaymentMethod olarak tanımlayın.
Buttonlar arasındaki boşlukları RadioButtonGroup > Properties > Space > 10 olarak tanımlayın.
Seçili fontun rengini RadioButtonGroup > Properties > SelectedFontColor > Beyaz olarak ayarlayın.
Benzer şekilde seçili buttonun arka plan rengini RadioButtonGroup > Properties > SelectedBgColor > Mavi
Ödeme yöntemi tercihi sonrası kayıt işlemini RadioButtonGroup > Properties > onChange > ManagedDb > Save Record aksiyonunu ekleyin.
Save Record aksiyonu içerisinde Select Table > PaymentPreferences tablosunu seçin ve Columns alanında PaymentMethod seçimini yapın.
PaymentMethod alanına Components > RadioButtonGroup > value tanımlamasını yapın.
Id alanına Default > User > Current Userid tanımlamasını yapın.
Tercih sonrası seçimin ekranda güncellenmesi için oluşturulan RadioButtonGroup > Properties > Add Action > onChange > Custom > Managed DB > PaymentPreferencesAll aksiyonunu ekleyin.
Seçimleri ekranda görüntülemek için sol yan paneldeki Action Tree alanına tıklayın ve PaymentPreferencesAll aksiyonu yanındaki ikondan basılı tutup sayfaya sürükleyin.
Açılan ekranda aşağıdaki tanımlamaları yapın.
Son durumda ekran aşağıdaki gibi olmalıdır.
Preview:
Bu örnekte kullanıcıların tek bir ödeme yöntemi seçebilmesi için Radio Button Group elementi kullanılır. Kullanıcı, Kredi Kartı, Havale / EFT ve Kapıda Ödeme seçenekleri arasından yalnızca bir tanesini seçer. Seçilen değer ilgili kullanıcıya ait ödeme tercihi olarak kaydedilir.
Yapıda Id alanı kullanıcıya ait kayıt kimliğini temsil eder. Bu sayede sistem, ilgili kullanıcı için daha önce bir kayıt yoksa yeni bir kayıt oluşturur; mevcut bir kayıt varsa seçilen yeni ödeme yöntemine göre mevcut kaydı günceller. Böylece her kullanıcı için tek bir güncel ödeme tercihi saklanmış olur.
Seçim yapıldıktan sonra sonuçlar alt bölümde yer alan hazır tablo üzerinde görüntülenir. Bu tabloda kayıt kimliği ve seçilen Payment Method bilgisi gösterilir. Kullanıcı farklı bir ödeme yöntemi seçtiğinde, aynı kayıt üzerinde güncelleme yapılarak değişiklik anlık olarak tablo üzerinde izlenebilir.
4. Ortak Özellikler (Properties)
Radio Button Group 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:
Tekli seçim gereken senaryolarda tercih edin. Kullanıcı yalnızca bir seçenek seçebilecekse Radio Button Group kullanılmalıdır; çoklu seçim için Checkbox veya Multi Select önerilir.
Seçenek metinlerini net ve kısa yazın. Buton etiketleri, kullanıcıların hızlı karar verebilmesini sağlayacak şekilde açık olmalıdır.
onChange event’ini ana tetikleyici olarak kullanın. Seçime bağlı işlemler (alan gösterme/gizleme, form akışı) bu event üzerinden yönetilmelidir.
6. Kısıtlamalar
Çok sayıda seçenek içeren senaryolar için uygun değildir; bu durumda Select veya Auto Complete tercih edilmelidir.
Aksiyonlar yalnızca onChange event’i üzerinden tetiklenebilir.
