URL elementi, kullanıcıların uygulama içerisinde geçerli bir web adresi (URL) girmesini sağlayan özel bir giriş elementidir. Standart metin alanlarından farklı olarak, girilen değerin URL formatına uygunluğunu kontrol ederek hatalı bağlantı girişlerini önlemeye yardımcı olur.
URL elementi, kullanıcı tarafından girilen bağlantıların doğrulanmasını sağlar ve geçerli formatta olan URL’leri tıklanabilir şekilde sunabilir.
URL elementi hem web hem de mobil uygulamalarda desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Web sitesi veya profil bağlantısı girişi
Referans ve kaynak linkleri
Harici yönlendirme URL’leri
Dokümantasyon veya içerik bağlantıları
Form ve ayar ekranlarında URL alanları
2. Temel Özellikler
URL format doğrulaması: Girilen değerin geçerli bir web adresi formatında olup olmadığı sistem tarafından kontrol edilir.
Tıklanabilir bağlantı desteği: Geçerli URL’ler link olarak görüntülenebilir ve doğrudan ziyaret edilebilir.
Dinamik değer bağlama desteği: Değerler state, değişken veya aksiyon çıktılarıyla dinamik olarak yönetilebilir.
2.1. URL Elementi Özellikleri
Properties panelinden aşağıdaki ayarları yapılandırabilirsiniz:
Value: URL elementine statik bir değer ekleyebilir veya Symbol Picker kullanarak başka bir elementin içeriğini veya aksiyon sonucunu dinamik olarak alabilirsiniz. Girilen URL'nin geçerli bir formatta olup olmadığını kontrol eder.
Placeholder: Kullanıcı bir URL girmediğinde görünen yer tutucu metindir. Örnek bir URL formatı göstererek kullanıcıyı yönlendirir (örn. “https://www.ornek.com”).
Allow Clear: Kullanıcıların sağ kenardaki Sil (X) simgesini kullanarak girdikleri URL'yi tek tıklamayla silmelerini sağlar.
2.2. Elemente Eklenebilen Aksiyonlar
URL elementi, kullanıcı etkileşimlerine bağlı olarak aşağıdaki tetikleyicileri (event) destekler. Bu tetikleyiciler, URL girişine göre aksiyonların kontrollü şekilde çalıştırılmasını sağlar.
onChange: Kullanıcı URL alanındaki değeri her değiştirdiğinde tetiklenir.
Kullanım senaryoları:
URL formatına göre anlık doğrulama yapmak
Geçerli URL girildiğinde butonları aktif hale getirmek
Dinamik alan gösterimi veya yönlendirme hazırlığı yapmak
onPressEnter: Kullanıcı URL alanında Enter tuşuna bastığında tetiklenir.
Kullanım senaryoları:
Form submit işlemini başlatmak
Girilen URL’ye yönlendirme yapmak
Bağlantı doğrulama veya kayıt aksiyonunu tetiklemek
3. Url Elementi Nasıl Kullanılır?
Bu bölümde Url elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.
Senaryo: LinkedIn Profil Bağlantısı Ekleme
Bir uygulamada kullanıcıların profesyonel profillerine hızlıca erişilebilmesi için LinkedIn profil bağlantısının doğru ve geçerli şekilde girilmesi önemlidir. Bu senaryoda URL Input elementi, kullanıcının LinkedIn profil adresini eklemesini sağlamak amacıyla kullanılır.
Senaryoda:
Kullanıcı, LinkedIn Profil Bağlantısı alanına kendi profil URL’sini girer (örn. https://www.linkedin.com/in/...).
Girilen değer geçerli bir URL formatına uygun değilse, input alanı görsel olarak vurgulanır ve kullanıcıya geçerli bir LinkedIn bağlantısı girmesi gerektiğini belirten uyarı mesajı gösterilir.
Kullanıcı geçerli bir LinkedIn profil bağlantısı girdiğinde doğrulama uyarısı otomatik olarak kaldırılır.
Ekle butonuna tıklandığında, yalnızca geçerli URL girilmişse işlem tamamlanır ve profil bağlantısı kullanıcı hesabına eklenir.
Adım 1 - Veri Kaynağı Oluşturma
DataSources modülünde tablo oluşturma:
Datasources modülüne gidin.
Ardından Tables sekmesine gidin.
“UserProfileLinks” adında yeni tablo oluşturun.
Kurulması gereken tablo yapısı aşağıdaki gibidir:
Önemli Alan adları:
UserName: LinkedIn profili eklenen kullanıcının adını veya kullanıcı adını tutar.
LinkedinUrl: Kullanıcının LinkedIn profil bağlantısını içerir.
CreatedDate: LinkedIn profil bağlantısının sisteme eklendiği tarih bilgisini tutar.
Adım 2 - Gerekli Aksiyonu Tanımlama
Arayüzde verileri göstermek ve veri eklemek için:
İki aksiyon tanımlamanız gerekir.
Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.
Örnek Verileri Listeleyen Aksiyon (GetUserProfileLinks):
SELECT * FROM UserProfileLinks;
Uygularken UserProfileLinks kısmınısiliptekrar UserProfileLinks yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.
Adım 3 - Elementlerin Eklenmesi ve Ayarlanması
Sayfaya Elements > Display > Label elementini sürükleyip bırakın.
Yazıyı Label > Properties > Value > “Hesabınıza Linkedin Profil Bağlantısı Ekleyin” olarak düzenleyin.
Yazı tipini Label > Styling > Text > Style > Heading 5 olarak ayarlayın.
Sayfaya Elements > Text Input > Url elementini sürükleyip bırakın.
Ön yazı olarak Url > Properties > Placeholder > “https://www.linkedin.com/in/” yazısını ekleyin.
İçeriği temizlemek için Url > 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 UserProfileLinks tablosunu seçin. Açılan sütun adları alanında tüm sütun adlarını seçin.
CreatedDate alanını Default > Now olarak tanımlayın.
LinkedinUrl alanını Components > Url1 > value olarak tanımlayın.
UserName alanını Default > User > Current Username 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.
Url alanının boş bırakılmaması için Url > Add Validation ekleyin. Açılan metin alanına aşağıdaki tanımlamayı yapın.
Daha önce kaydedilen ve yeni kaydedilen kayıtları butona tıkladıktan sonra görebilmek için Button > Add Action > onClick > Custom > Managed DB > GetUserProfileLinks aksiyonunu ekleyin.
Kayıt sayfasında işlemler tamamlandıktan sonra yönlendirme yapıldığı için Set Value Of aksiyonuyla kayıt sonrası Url içeriği temizleme işlemi yapılmamıştır.
Sayfa açıldığında geçmiş yazıları da görebilmek için Sayfaya Add Action > Initial Action > Custom > Managed DB > GetUserProfileLinks aksiyonunu ekleyin.
Sol yan paneldeki Action Tree alanından GetUserProfileLinks aksiyonun yanındaki mavi ikonuna basılı tutup sayfaya sürükleyin.
Açılan pencerede ilgili alanları seçin ve oluşturun.
Sayfa son durumda aşağıdaki gibi olmalıdır.
Preview:
Uygulama test edildiğinde, kullanıcı hesabına LinkedIn profil bağlantısı eklemek için URL giriş alanı görüntülenir. Kullanıcı bu alana LinkedIn profil adresini girmeden Ekle butonuna tıkladığında, alan kırmızı çerçeve ile vurgulanır ve “Url Alanı Boş” uyarı mesajı gösterilir.
Geçerli bir LinkedIn bağlantısı girildiğinde uyarı otomatik olarak kaldırılır. Ekle butonuna tıklanmasıyla birlikte girilen bağlantı sisteme kaydedilir ve aşağıda yer alan liste alanında User name, LinkedIn url ve Created date bilgileriyle birlikte görüntülenir. Bu yapı sayesinde kullanıcı, eklediği LinkedIn profil bağlantılarını kolayca takip edebilir ve saklayabilir.
4. Ortak Özellikler (Properties)
URL 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:
