Email elementi, kullanıcıların geçerli bir e-posta adresi formatında veri girmesini sağlayan özel bir giriş bileşenidir. Standart Text Input elementlerinden farklı olarak, girilen değerin e-posta formatına uygunluğunu otomatik olarak kontrol eder.
Email elementi; kullanıcı kayıt formları, iletişim formları, bildirim ayarları ve kimlik doğrulama senaryolarında güvenilir veri girişi sağlamak için kullanılır. “@” ve “.” karakterlerini zorunlu kılarak hatalı veya eksik e-posta girişlerini engeller ve veri kalitesini artırır.
Email elementi hem web hem de mobil uygulamalarda desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Kullanıcı kayıt ve giriş formları
İletişim ve geri bildirim formları
E-posta bildirim ayarları
Şifre sıfırlama ve doğrulama süreçleri
CRM ve kullanıcı yönetimi ekranları
2. Temel Özellikler
Otomatik e-posta format kontrolü: Girilen değerin geçerli bir e-posta adresi formatında olup olmadığı sistem tarafından kontrol edilir.
Hatalı girişlerin engellenmesi: “@” ve “.” karakterlerini içermeyen girişler geçersiz kabul edilir.
Form doğrulama ile uyumlu yapı: Validation kurallarıyla birlikte kullanılarak form submit süreçlerinde güvenilir veri sağlar.
Dinamik değer bağlama desteği: Değerler statik olarak girilebilir veya Symbol Picker üzerinden state, değişken ya da aksiyon çıktılarıyla dinamik olarak bağlanabilir.
2.1. Email Elementi Özellikleri
Properties panelinden aşağıdaki ayarları yapılandırabilirsiniz:
Value: Email elementine girilen veya dış kaynaklardan alınan mevcut e-posta adresini temsil eder. Kullanıcı e-posta adresi girdiğinde veya bir veri tabanından bilgi çekildiğinde, bu değer Email elementinde görüntülenir.
Placeholder: Kullanıcının herhangi bir veri girmediğinde görüntülenen yer tutucu metindir (örn. “E-posta adresinizi girin”).
Allow Clear: Kullanıcının bir simge aracılığıyla Email elementine girilen veriyi hızlı bir şekilde silebilmesine olanak tanır.
2.2. Elemente Eklenebilen Aksiyonlar
Email elementi, kullanıcı etkileşimlerine bağlı olarak birden fazla tetikleyici (event) destekler. Bu tetikleyiciler, e-posta girişine göre aksiyonların kontrol edilmesini sağlar.
onChange: Kullanıcı e-posta alanındaki değeri her değiştirdiğinde tetiklenir.
Kullanım senaryoları:
Girilen e-posta adresini state veya değişkenlere aktarmak
E-posta formatına göre anlık doğrulama yapmak
Buton veya form alanlarını aktif/pasif hale getirmek
onPressEnter: Kullanıcı e-posta alanında Enter tuşuna bastığında tetiklenir.
Kullanım senaryoları:
Form submit işlemini başlatmak
Giriş veya kayıt aksiyonlarını tetiklemek
Kullanıcıyı bir sonraki adıma yönlendirmek
onBlur: Kullanıcı e-posta alanından odak kaybettiğinde (başka bir alana geçtiğinde) tetiklenir.
Kullanım senaryoları:
Alan dışına çıkıldığında doğrulama yapmak
Hatalı e-posta girişlerinde uyarı göstermek
Kullanıcı etkileşimi tamamlandığında kontrol mekanizması çalıştırmak
3. Email Elementi Nasıl Kullanılır?
Bu bölümde Email elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.
Senaryo: Doğrulama Maili Bir uygulamada kullanıcıların e-posta adreslerinin doğru ve geçerli olması, iletişim ve doğrulama süreçleri açısından büyük önem taşır. Bu senaryoda Email Input elementi, kullanıcının girdiği e-posta adresini otomatik olarak kontrol ederek doğrulama sağlar.
Senaryoda:
Kullanıcı, Doğrulama Emaili alanına e-posta adresini girer.
Girilen değer e-posta formatına uygun değilse, input alanı görsel olarak vurgulanır ve kullanıcıya geçerli bir e-posta adresi girmesi gerektiğini belirten uyarı mesajı gösterilir.
Kullanıcı geçerli bir e-posta adresi girdiğinde doğrulama hatası otomatik olarak kaldırılır.
Doğrula butonuna tıklandığında, yalnızca geçerli e-posta adresleri ile işlem yapılmasına izin verilir.
Adım 1 - Veri Kaynağı Oluşturma
DataSources modülünde tablo oluşturma:
Datasources modülüne gidin.
Ardından Tables sekmesine gidin.
“Verification” adında yeni tablo oluşturun.
Kurulması gereken tablo yapısı aşağıdaki gibidir:
Önemli Alan adları:
Email: Doğrulama işlemi yapılacak e-posta adresini tutar. Email input üzerinden kullanıcıdan alınan ve format doğrulamasına tabi olan alandır.
Adım 2 - Elementlerin Eklenmesi ve Ayarlanması
Sayfaya Elements > Display > Label elementini sürükleyip bırakın.
Yazıyı Label > Properties > Value > “Doğrulama Emaili” olarak düzenleyin.
Yazı tipini Label > Styling > Text > Style > Heading 5 olarak ayarlayın.
Sayfaya Elements > Text Input > Email elementini sürükleyip bırakın.
İçeriği temizlemek için Email > Properties > AllowClear > Açık olarak ayarlayın.
Sayfaya Elements > Navigation > Button elementini sürükleyip bırakın.
Button elementine kayıt aksiyonunu Button > Add Action > onClick > ManagedDb > Save Record ekleyin.
Save Record aksiyonunda Verification tablosunu seçin. Açılan sütun adları alanında tüm sütun adlarını seçin.
Email alanını Components > Email1 > value olarak tanımlayın.
Id alanını Default > New Guid olarak tanımlayın.
Tanımlamalar sonucunda Save Record aksiyonun tüm alanları aşağıdaki gibi olmalıdır.
Sayfa son durumda aşağıdaki gibi olmalıdır.
Preview:
Uygulama test edildiğinde, Doğrulama E-maili alanına geçerli olmayan bir e-posta adresi girilip doğrulama işlemi başlatıldığında input alanı uyarı durumuna geçer. Bu durumda kullanıcıya, geçerli bir e-posta adresi girmesi gerektiğini belirten hata mesajı gösterilir ve işlem gerçekleştirilmez.
Kullanıcı, e-posta adresini doğru formatta girdiğinde doğrulama hatası otomatik olarak kaldırılır ve Doğrula butonu ile işlem sorunsuz şekilde devam ettirilebilir. Bu yapı sayesinde e-posta bilgisi, kullanıcıyı yönlendiren ve hatalı girişleri engelleyen kontrollü bir doğrulama süreciyle alınır.
4. Ortak Özellikler (Properties)
Email 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:
