1. Radio Group Elementine Genel Bakış

Radio Group elementi, kullanıcıların bir grup seçenek arasından yalnızca tek bir seçeneği seçmesini sağlayan klasik radyo buton tabanlı bir seçim elementidir. Seçenekler aynı grup altında listelenir ve bir seçenek seçildiğinde diğer seçeneklerin seçimi otomatik olarak kaldırılır.

Radio Group elementi yalnızca web uygulamalarında desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Tekli seçim gerektiren form alanları
• Anket ve değerlendirme soruları (tek cevaplı)
• Ayar ekranlarında alternatifler arası seçim
• Durum, tercih veya kategori belirleme alanları
• Filtreleme senaryolarında tek kriter seçimi

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.
• Klasik radyo buton arayüzü: Seçenekler dikey veya yatay olarak listelenir ve form yapılarıyla uyumlu bir görünüm sunar.
• Statik ve dinamik seçenek desteği: Seçenekler sabit olarak tanımlanabilir veya veri kaynakları üzerinden dinamik şekilde oluşturulabilir.

2.1. Radio 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.
• Options: Radio Group içerisinde sunulacak seçeneklerin listesini tanımlar.
• Direction: Radio Button'ların yatay veya dikey olarak nasıl görüntüleneceğini belirler.
• Space: Seçenekler arasındaki boşluğu (px cinsinden) ayarlayabilirsiniz. Varsayılan değer 0’dır.
• Selected Radio Color: Kullanıcının seçtiği Radio Button'ın arka plan rengini ayarlar.
• Unselected Radio Color: Seçili olmayan Radio Button'ların arka plan rengini belirler.
• Multi Selectable: Kullanıcıların aynı anda birden fazla seçeneği seçip seçemeyeceğini belirler. Varsayılan olarak sadece tek seçim yapılabilir; etkinleştirildiğinde birden fazla seçenek seçilebilir.

2.2. Elemente Eklenebilen Aksiyonlar

Radio 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 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 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ı “Ödeme Türü” alanında farklı bir seçenek seçtiğinde, seçime bağlı olarak kart bilgileri veya fatura alanları dinamik olarak güncellenir.

Aksiyonlara İlişkin Temel Kurallar

• Radio 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.

Radio Group elementi, özellikle form senaryoları, ayar seçimleri ve tek kriterli filtreleme kullanımında aksiyonlarla birlikte sade ve kullanıcı dostu bir deneyim sunar.

3. Radio Group Elementi Nasıl Kullanılır?

Bu bölümde Radio 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öntemlerini belirlemek için MultiSelect elementini kullanır. MultiSelect sayesinde kullanıcı listelenen seçenekler arasından bir veya birden fazla ödeme yöntemini aynı anda seçebilir.

Senaryoda:

• Ekranda farklı ödeme seçeneklerini temsil eden bir MultiSelect alanı bulunur. Kullanıcı aşağıdaki seçeneklerden kendisine uygun olan ödeme yöntemlerini seçebilir:
  
  • Kredi Kartı
  • Havale / EFT
  • Kapıda Ödeme
• Kullanıcı bir veya birden fazla seçeneği seçtiğinde, seçilen değerler alan içerisinde etiket (tag) şeklinde görüntülenir. Kullanıcı isterse seçtiği ödeme yöntemlerini kaldırabilir veya farklı seçenekler ekleyebilir.
• Bu yapı sayesinde kullanıcılar birden fazla seçenek arasından bir veya birden fazla tercih yapmaları gereken durumlarda hızlı ve anlaşılır bir şekilde seçim yapabilirler. MultiSelect elementi, özellikle kullanıcıya birden fazla seçeneğin aynı anda sunulması gereken senaryolarda esneklik sağlar.

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.
  • PaymentMethod: Kullanıcının seçtiği ödeme yöntemini tutar (Kredi Kartı, Havale/EFT, Kapıda Ödeme vb.)
• “PaymentTypes” adında yeni tablo oluşturun.
• Kurulması gereken tablo yapısı aşağıdaki gibidir:
  

• Önemli Alan adları:
  
  • PaymentTypeName: Ödeme yöntemlerinin listesini tutar (Kredi Kartı, Havale/EFT, Kapıda Ödeme vb.)

Adım 2 - Gerekli Aksiyonun Tanımlanması

Arayüzde verileri göstermek için: 

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

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

INSERT INTO PaymentTypes (Id, PaymentTypeName)
VALUES
(NEWID(), N'Kredi Kartı'),
(NEWID(), N'Havale / EFT'),
(NEWID(), N'Kapıda Ödeme')

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

• Etiketleri Listeleyen Aksiyon  (PaymentTypes):

SELECT * FROM PaymentTypes

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

• Kaydedilen Etiketleri Listeleyen Aksiyon  (PaymentPreferencesAll):

SELECT * FROM PaymentPreferences

Uygularken PaymentPreferences kısmını silip tekrar 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ı silip tekrar 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: 

• Radio Group içerisinde gösterilecek etiketler için Add Action > Initial Action > Custom > Managed DB > PaymentTypes  aksiyonunu ekleyin.
  

• Seçim ekranında Radio Group 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 tercihlerin 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 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 > “Tercih Ettiğiniz Ödeme Türünlerini Seçin:” olarak tanımlayın.

• Altına Elements > Select Input > RadioGroup elementini sürükleyip bırakın.
  

• Seçenekleri dinamik olarak listelemek için  RadioGroup > Properties > Options > PaymentTypes tanımlamasını yapın. Açılan alanları Field to display > PaymentTypeName ve Field to User as Key > Id olacak şekilde tanımlayın.

• Açılışta seçili değeri göstermek için RadioGroup > Properties > Value > Action Results > PaymentPreferencesValue > First > PaymentMethod olarak tanımlayın.
  
• Seçenekler arasındaki boşlukları RadioGroup > Properties > Space > 10 olarak tanımlayın.
  

• Çoklu seçim yapabilmek için RadioGroup > Properties > MultiSelectable > Açık olarak ayarlayın.
  

• Ödeme yöntemi tercihi sonrası kayıt işlemini RadioGroup > 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 > RadioGroup > value tanımlamasını yapın.
  

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 typename1, typename2, typename3.

• Id alanına Default > User > Current Userid tanımlamasını yapın.
• Tercih sonrası seçimin ekranda güncellenmesi için oluşturulan RadioGroup > 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 birden fazla ödeme tercihini seçebilmesi için Radio Group yapısı kullanılır. Kullanıcı, ekranda listelenen Kapıda Ödeme, Havale / EFT ve Kredi Kartı seçeneklerinden bir veya birden fazla ödeme yöntemini işaretleyebilir.

Kullanıcı seçim yaptıktan sonra seçilen ödeme türleri sisteme kaydedilir. Yapıda Id alanı kullanıcıya ait kayıt kimliğini temsil eder, böylece ilgili kullanıcı için bir kayıt yoksa yeni bir kayıt oluşturulur, mevcut bir kayıt varsa seçilen ödeme türlerine göre güncellenir.

Seçilen ödeme yöntemleri virgül ile ayrılmış şekilde Payment method alanında saklanır ve alt bölümde yer alan tabloda görüntülenir. Kullanıcı farklı ödeme seçeneklerini işaretlediğinde veya kaldırdığında yapılan değişiklikler tablo üzerinde anlık olarak görülebilir. 

4. Ortak Özellikler (Properties)

Radio 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:

• Authorization (Yetkilendirme) Ayarları
• Visibility (Görünürlük)
• Editability (Düzenlenebilirlik)
• Style Panel (Stil Ayarları)

5. Kullanım Tavsiyeleri (Best Practices)

• Tekli seçim gereken senaryolarda kullanın. Kullanıcının yalnızca bir seçenek seçmesi gerekiyorsa Radio Group tercih edilmelidir.
• Seçenek metinlerini açık ve anlaşılır yazın. Radyo buton etiketleri kısa, net ve karar vermeyi kolaylaştıracak şekilde olmalıdır.
• onChange event’ini ana kontrol noktası olarak kullanın. Seçime bağlı alan gösterme/gizleme veya form akışlarını bu event üzerinden yönetin.

6. Kısıtlamalar

• Çoklu seçim gerektiren senaryolar için uygun değildir; bu durumlarda Checkbox veya Multi Select kullanılmalıdır.
• Aksiyonlar yalnızca onChange event’i üzerinden tetiklenebilir.