Percent elementi, kullanıcıların uygulama içerisinde yüzde (%) formatında sayısal değerler girmesini sağlayan özel bir input elementidir. Kullanıcı değer girdikçe, giriş otomatik olarak biçimlendirilir ve yüzde simgesi (%) eklenir. Böylece yüzdeye dayalı veri girişleri daha anlaşılır, tutarlı ve hatasız hale gelir.
Percent elementi; oran, indirim, artış–azalış, başarı yüzdesi, komisyon ve benzeri yüzdesel değerlerin girilmesi gereken tüm senaryolarda kullanılabilir. Yüzde formatına özel yapısı sayesinde kullanıcıların yanlış veya geçersiz giriş yapmasının önüne geçer.
Percent elementi yalnızca web uygulamalarında desteklenmektedir.
1.1. Sık Kullanım Senaryoları
İndirim ve kampanya oranları
Vergi, komisyon veya hizmet bedeli yüzdeleri
Başarı, tamamlama veya ilerleme oranları
Artış / azalış yüzdesi girişleri
Performans ve analiz ekranlarında oran bazlı değerler
Yönetim panellerinde filtreleme ve raporlama amaçlı yüzde alanları
2. Temel Özellikler
Otomatik yüzde formatlama: Kullanıcı değer girdikçe, giriş otomatik olarak biçimlendirilir ve yüzde (%) simgesi eklenir.
Form ve aksiyonlarla uyumlu yapı: Percent elementi; form submit, state güncelleme, hesaplama ve validasyon senaryolarında sorunsuz şekilde çalışır.
2.1. Percent Elementi Özellikleri (Properties)
Properties panelinden aşağıdaki ayarları yapılandırabilirsiniz:
Step: Yüzde değerinin hangi aralıklarla girileceğini belirler (örn. 0.01 ayarlandığında kullanıcı değerleri 0.01 artışlarla girebilir).
Value: Yüzde alanında başlangıçta gösterilecek varsayılan değerdir.
Placeholder: Kullanıcı bir değer girmediğinde görüntülenen yer tutucu metindir.
Symbol Position: Yüzde simgesinin (%) değerin başında veya sonunda görünmesini sağlar.
Decimal Scale: Yüzde değerinin ondalık basamak sayısını belirler (örn. 2 ayarlandığında, değer 12.34% olarak gösterilir).
2.2. Elemente Eklenebilen Aksiyonlar
Percent elementi, kullanıcıdan yüzde formatında değer almayı amaçlayan bir input elementi olduğundan olay (event) bazlı aksiyon tetikleme mantığıyla çalışır. Aksiyonlar, elementin kendisine değil; kullanıcı etkileşimi sonucunda tetiklenen event’e bağlanır.
Percent elementi için aksiyonlar, Properties > Add Action alanı üzerinden aşağıdaki event aracılığıyla tanımlanabilir.
Desteklenen Aksiyon Tetikleyicileri
onChange: Kullanıcı Percent alanındaki değeri her değiştirdiğinde tetiklenir.
Kullanım amaçları:
Girilen yüzdeye göre anlık hesaplamalar yapmak (ör. indirimli fiyat, oran bazlı tutar hesaplama)
State veya değişken güncellemek
Başka alanların değerlerini dinamik olarak değiştirmek
Canlı validasyon veya bilgilendirici mesajlar göstermek
Örnek senaryo: Kullanıcı indirim yüzdesini değiştirdiğinde, toplam tutar otomatik olarak yeniden hesaplanır ve ekranda güncellenir.
Aksiyonlara İlişkin Temel Kurallar
Percent elementi yalnızca onChange event’i üzerinden aksiyon tetikleyebilir.
Aksiyonlar, kullanıcı değeri her güncellediğinde çalışır.
Aynı onChange event’i için birden fazla aksiyon tanımlanabilir.
Yoğun işlem gerektiren senaryolarda, onChange üzerinden çalışan aksiyonların performans etkisi dikkate alınmalıdır.
Percent elementi, özellikle oran bazlı hesaplama ve dinamik güncelleme senaryolarında aksiyonlarla birlikte kullanıldığında etkili ve kullanıcı dostu bir deneyim sunar.
3. Percent Elementi Nasıl Kullanılır?
Bu bölümde Percent elementinin uçtan uca kullanımını, bir sipariş uygulamasında malzeme yüzdesi dağılımı senaryosu üzerinden ele alacağız.
Senaryo: Malzeme Yüzdesi Dağılımı
Bir yiyecek sipariş uygulamasında kullanıcı, seçtiği malzemelerin karışım oranını yüzde olarak belirler. Örneğin bir pizza için:
Onion → 25%
Mushroom → 50%
Pepper → 25%
Toplamın 100% olması beklenir. Kullanıcı yanlış bir dağılım girerse, “Remaining percentage” alanı ile kullanıcı yönlendirilir.
Senaryoda:
Kullanıcı her malzeme için yüzde değerini Percent alanına girer.
Girilen değer otomatik olarak % formatında gösterilir.
Step/Decimal Scale ile giriş hassasiyeti kontrol edilir.
Adım 1 – SQL Action Oluşturma
DataSources modülünü açın.
Actions bölümüne gidin.
+ New SQL Action seçeneğine tıklayın.
Aksiyon adını GetIngredientPercents olarak belirleyin.
SELECT *
FROM (
VALUES
(1, 'Onion', 25.00),
(2, 'Mushroom', 50.00),
(3, 'Pepper', 25.00)
) AS IngredientsMock(Id, Name, PercentValue);
Adım 2 – Sayfayı Oluşturma
UI Design modülünü açın.
Screens bölümünden IngredientMix adında bir ekran oluşturun.
Gallery View içerisine Percent ve Label’ın seçili olduğu Row grubunu Gallery View içerisine sürükleyip bırakın.
Gallery View içerisine doğru ekleme sonucu beklenen görüntü aşağıdaki gibi olmalıdır.
Label elementine tıklayın ve Label > Properties > Value > Field to display > Name tanımlamasını yapın.
Percent elementine tıklayın ve aşağı yukarı ok artışlarında ne kadarlık artış yapılacağını belirlemek için Percent > Properties > Step > 1 olarak tanımlayın.
Yüzdelik değerini Percent > Properties > Value > Field to display > PercentValue olarak tanımlayın.
Ön gösterim metnini Percent > Properties > Placeholder > 0% olarak tanımlayın.
Değer ölçeğini, karışımları doğru yakalayabilmek için Percent > Properties > DecimalScale > 0 olarak ayarlayın.
Son durumda beklenen sayfa yapısı aşağıdaki gibidir.
Preview
Uygulama test edildiğinde, Pizza başlığı altında tanımlı malzemelerin yüzdelik içerik dağılımı kullanıcıya görsel ve okunabilir bir yapı ile sunulur. Her bir malzeme (Onion, Mushroom ve Pepper) ayrı alanlarda listelenir ve karşılarında o malzemenin tarif içindeki yüzdelik oranı gösterilir. Bu yapı sayesinde kullanıcı, pizzanın içerik dağılımını hızlıca inceleyebilir ve her bir malzemenin toplam tarif içerisindeki payını net bir şekilde görebilir. Bu ekran, tarif içeriklerinin basit ve anlaşılır biçimde sunulmasını sağlayan bir ön izleme yapısı sunar.
4. Ortak Özellikler (Properties)
Percent 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:
Yüzde aralığını senaryoya göre netleştirin. Kullanıcıdan beklenen değer aralığı (ör. 0–100) açık olmalı ve gerekirse validasyon ile sınırlandırılmalıdır.
Placeholder ile kullanıcıyı yönlendirin. 0%, İndirim yüzdesi giriniz gibi ifadeler, beklenen formatın hızlıca anlaşılmasını sağlar.
onChange event’ini bilinçli kullanın. Percent elementi yalnızca onChange event’ini desteklediğinden, her değişimde tetiklenecek aksiyonların performans etkisi göz önünde bulundurulmalıdır.
6. Kısıtlamalar
Yalnızca yüzde (%) formatında sayısal girişler için tasarlanmıştır; parasal veya genel sayısal formatlama sunmaz.
Aksiyonlar yalnızca onChange event’i üzerinden tetiklenebilir.
Görsel özelleştirmeler Styling paneli ile sınırlıdır; davranışsal kontroller Properties ve Aksiyonlar üzerinden yönetilir.
