Kuika’nın URL elementi, kullanıcıların geçerli web adreslerini (örneğin bir web sitesi, dosya yolu veya API bağlantısı) doğru biçimde girmesini sağlar. Girilen URL, otomatik olarak doğrulanır ve hatalı formatta giriş yapıldığında kullanıcı uyarılır. Element, kullanıcıya bağlantıyı tıklayarak doğrudan ziyaret etme olanağı da sunabilir.

URL elementi hem web hem de mobil uygulamalarda kullanılabilir.

Kullanım Alanları

• Dosya yükleme veya harici bağlantı ekleme formları
• Web site veya portföy bağlantısı girişi
• Görsel, belge veya medya bağlantılarının dinamik olarak alınması
• Ürün sayfası veya dış kaynak bağlantısı gösterimleri
• API veya webhook adresi giriş alanları

Kullanım Senaryosu – Dosya Yükleme (Import from URL)

Bir e-posta abonelik yönetim ekranında kullanıcılar, yeni abone listesini yüklemek için iki yöntem kullanabilir: Dosyayı sürükleyip bırakmak y a da URL elementi aracılığıyla dış bir bağlantıdan içeri aktarmak. 

Senaryoda:

• Kullanıcı “Add new subscribers” penceresini açar.
• “Choose file” alanı yerine, “Import from URL” kutusuna dosya bağlantısını girer.
  (örnek: https://kuika.com/files/subscribers.csv)
• Sistem URL’nin geçerli olup olmadığını kontrol eder.
• “Import” butonuna basıldığında dosya bağlantısı sistem tarafından okunur ve veriler içeri aktarılır.

Veri Kaynağı Bağlama

1. Datasources modülüne gidin.
2. Tables sekmesinde yeni bir tablo oluşturun: ImportedFiles
3. Aşağıdaki alanları ekleyin:

4. Ardından SQL Actions sekmesine gidin.
5. Yeni bir aksiyon oluşturun: SaveImportedFile
6. Aşağıdaki SQL sorgusunu girin:

INSERT INTO ImportedFiles (FileName, FileUrl, CreatedAt)VALUES (@FileName, @FileUrl, SYSDATETIMEOFFSET());

Bu sorgu, kullanıcının girdiği dosya bağlantısını (URL) kaydeder.

UI Design Modülü İşlemleri

1. UI Design modülüne gidin.
2. Sol kenardaki Elements → Text Input → URL kategorisinden URL elementini seçin.
3. Ekrana sürükleyip bırakın.
4. Properties Panel üzerinden aşağıdaki ayarları yapılandırın:

• Placeholder: “Add file URL”
• Value: fileUrl
• Allow Clear: Aktif

5. Altına bir Button (Import) elementi ekleyin.
6. Buton için şu aksiyonu tanımlayın:
   
   • onClick → Managed DB → Custom SQL Action (SaveImportedFile)
   • Parametreler:
     
     • FileName → Extract(FileUrl, "filename")
     • FileUrl → URLElement1.value
7. Aksiyon tamamlandığında kullanıcıya “File imported successfully.” bildirimi gösterin.

Özelliklerin Senaryo Bağlamında Kullanılması

• Value: Girilen bağlantının tam değerini temsil eder.
• Placeholder: Kullanıcıya beklenen formatı gösterir. Örnek: Add file URL
• Allow Clear: Girilen bağlantıyı tek tıklamayla temizlemeye yarar.

Senaryo Adımı Tamamlandığında

• Kullanıcı URL alanına geçerli bir bağlantı girer.
• “Import” butonuna bastığında sistem bağlantıyı kontrol eder.
• Geçerliyse dosya bağlantısı veri tabanına kaydedilir.
• “Cancel” butonu seçilirse işlem iptal edilir.

Kısıtlamalar

• Geçersiz bağlantılar (örneğin “ftp://”, “file://” gibi) doğrulama hatası verir.
• Çok uzun bağlantılarda Max Length değeri belirlenmelidir (örneğin 500 karakter).
• HTTPS dışındaki bağlantılar güvenlik politikaları nedeniyle engellenebilir.

İpuçları ve Best Practices

• Kullanıcıya örnek format gösteren placeholder metinleri ekleyin.
• “Allow Clear” aktif edilerek kolay düzenleme olanağı sağlayın.
• Dış bağlantıların erişilebilirliğini test etmek için doğrulama (validation) kullanın.
• Gerektiğinde bağlantıyı tıklanabilir hale getirin (örn. Open URL aksiyonu).