1. Form Elementine Genel Bakış

Form elementi, uygulamalarınızda veri toplama, düzenleme ve görüntüleme işlemlerini hızlı ve esnek bir şekilde gerçekleştirmenizi sağlayan temel UI elementlerinden biridir. Kullanıcı etkileşimine açık yapısıyla metin girişleri, seçim alanları, tarih alanları, sayaçlar, switchler ve daha birçok form ögesini tek bir yapı altında birleştirir. Form elementi sayesinde:

• Data Sources modülünden bağladığınız bir veri tabanı kaydını düzenleyebilir,
• Sıfırdan tamamen yeni formlar oluşturabilir,
• Kullanıcıdan alınan verileri SQL, REST API veya Managed DB aksiyonlarına gönderebilir,
• Mobil ve web için optimize edilmiş düzenli ve okunabilir form arayüzleri tasarlayabilirsiniz.

Form elementi, uygulama içinde veri giriş süreçlerinin temel taşıdır ve karmaşık işlemleri sade bir kullanıcı deneyimiyle sunar.

Form elementi, hem mobil hem de web uygulamalarında desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Kullanıcılardan veri toplamak (ör. kayıt formu, profil bilgileri, başvuru formu, iletişim formu)
• Veritabanı kayıtlarını düzenlemek. Data Sources modülünden bağlanan bir kaydın form üzerinden güncellenmesi.
• Operasyonel süreç girdilerini toplamak örn. iş emri oluşturma, bakım raporu, müşteri geri bildirimi)
• Mobil uygulamalar için optimize edilmiş hızlı giriş ekranları oluşturmak
• REST API veya SQL aksiyonlarına veri göndermek. Form submit işlemiyle backend’e veri aktarma.
• Şartlı alan gösterimi kullanarak dinamik form yapıları oluşturmak (ör. “Evet” seçilirse yeni alanların açılması)
• Satış, CRM, insan kaynakları ve operasyon modüllerinde kullanıcılardan düzenli veri toplama

2. Temel Özellikler

• Gelişmiş form elementi yapısı. Text Input, Select Box, Switch, Checkbox,, Number Input gibi tüm form alanlarını tek bir element altında kullanabilirsiniz.
• Data Sources ile tam uyumluluk. Bir veritabanı kaydını form yüklenirken otomatik doldurabilir ve form submit işlemiyle güncelleyebilirsiniz.
• Sıfırdan form oluşturabilme. Data Source bağlamadan yalnızca kullanıcıdan alınan ham verilerle tamamen yeni bir form yapısı kurabilirsiniz.
• Dinamik alan yönetimi. Visibility Rules ile form alanlarını kullanıcı seçimlerine göre otomatik olarak gösterebilir veya gizleyebilirsiniz.
• Validasyon (Doğrulama) desteği. Zorunlu alan kontrolü, format doğrulama, sayı ve tarih aralığı kontrolü gibi validasyonlar her form elementi üzerinden ayarlanabilir.
• Mobil ve web için optimize edilmiş düzen. Responsive yapısı sayesinde farklı ekran boyutlarında sorunsuz bir form deneyimi sunar.
• Grid yapısı ile düzenli form tasarımı. Form içindeki alanları 1, 2 veya çok kolonlu yapıda düzenleyebilirsiniz.
• Hata mesajı ve bilgi mesajı desteği. Kullanıcı hatalarını anlamlı şekilde gösterebilir, form işlemleriyle ilgili geri bildirim verebilirsiniz.

2.1. Element Ayarları (Properties)

Form elementini ekrana sürükleyip bıraktığınızda veya var olan bir formu seçtiğinizde, sağ tarafta yer alan Properties paneli üzerinden form yapısını oluşturabilir ve düzenleyebilirsiniz. Form elementinin en temel ayarı, Create / Edit Form modali üzerinden yapılan yapılandırmalardır.

2.1.1. Create Form Modalının Anatomisi

Form elementini ilk kez ekrana bıraktığınızda Create Form modali açılır. Bu modal, formun veri kaynağını ve form alanlarının temel yapısını tanımlamanızı sağlar.

Veri Kaynağı Seçimi

Öncelikle oluşturacağınız formun hangi veri kaynağına bağlı çalışacağını seçmeniz gerekir:

• Data Table (1): Data Sources modülünüzde yer alan bir veri tablosuna bağlı form oluşturmanızı sağlar.
  
  • Var olan tablo alanları üzerinden hızlıca form alanları oluşturulur.
  • Kayıt ekleme/güncelleme senaryoları için idealdir.
    
    
• Excel (2): Hazır bir Excel dosyasındaki kolonları kullanarak form tasarımı yapmanızı sağlar.
  
  • Excel kolonları, form alanlarına dönüştürülür.
  • Özellikle dış kaynaktan gelen statik/yarı statik verilerle form hazırlamak için uygundur.
  • (i) Form elementi, Excel veri dosyası olarak “.xls/.xlsx” formatlarını desteklemektedir.)
    
    
• Action (3): Uygulamanızda tanımlı bir aksiyonun parametrelerini kullanarak form alanlarını oluşturmanızı sağlar.
  
  • Aksiyonun Inputs alanları veri girişi için,
  • Outputs alanları formda kayıtlı verileri göstermek için kullanılır.
  • Örneğin AddUserToRole aksiyonunun parametreleri, form alanlarına dönüştürülebilir.
    
    
• Custom (4): Herhangi bir veri kaynağına bağlı kalmadan, tamamen ihtiyaçlarınıza göre özelleştirilmiş form yapıları oluşturmanızı sağlar.
  
  

Opsiyonel olarak “Also create a table in ManagedDB” seçeneği ile form yapısına bağlı bir tablo da oluşturabilirsiniz.

• Veri kaynağını seçtikten sonra NEXT ile form detay ekranına geçilir.

2.1.2. Form’a Alan ve Bölüm Ekleme

Create Form modali, formun sütun/alan yapısını yönetebileceğiniz ayrıntılı bir yapı sunar.

1. Alan Ekleme Bölümü

Bu bölümde formda yer alacak alanları satır satır düzenleyebilirsiniz:

• Add Header (1): Form bölümüne başlık eklemenizi sağlar. Örneğin: “Kullanıcı Bilgileri”, “Adres Bilgileri”.
• Section Layout (2): Formun cihazlara göre nasıl görüneceğini belirler.
  
  • Tek sütun
  • İki sütun
  • Farklı kolon düzenleri seçilebilir.
• Label (3): Form alanının kullanıcıya gösterilecek adıdır. Örn: “Ad Soyad”, “Telefon Numarası”, “roleName”.
• Field Name (bazı kaynak türlerinde): Form alanının veri kaynağındaki isim karşılığıdır. Örneğin, tablo sütun adı veya aksiyon parametre ismi.
• Field Type (4): Değişkenin veri tipini tanımlar. Örn: string, int, date vb.
• Element Type (5): Alanın hangi form elementiyle gösterileceğini belirler. Örn: textInput, selectBox, switch. 
• Req / Required (6): Alanın zorunlu olup olmadığını belirler.
  
  • Aktif → Bu alan boş bırakılamaz. 

Zorunlu olması gereken her input için “Required” alanını aktif hale getirin.)

• Add item (7): Forma yeni bir satır/alan eklemek için kullanılır.

B. Add Section: Formu bölümlere ayırmak için yeni bir bölüm eklemenizi sağlar. Örneğin: “Kişisel Bilgiler”, “İletişim Bilgileri” gibi ayrı bloklar.

C. SAVE: Formda yaptığınız tüm değişiklikleri kaydeder ve form yapısını ekran üzerinde oluşturur.

2.1.3. Veri Kaynağına Göre Form Oluşturma Özet Akışları

Her veri kaynağı için Create Form modali benzer çalışır, ancak giriş adımları farklıdır:

• Data Table ile Form Oluşturma:

• Form elementini ekrana bırakın, Data Table (1) seçin.
• Veri kaynağını (2) ve tabloyu (3) seçin → NEXT (4).

• Açılan tabloda Label, Field Name, Field Type, Element Type, Required alanlarını düzenleyin.
• Gerekirse Add item ile yeni satır, Add Section ile yeni bölüm ekleyin.
• Section layout alanından kolon sayısını ayarlayın.
• SAVE ile formu oluşturun.
  

• Excel ile Form Oluşturma:

• Form elementini ekrana bırakın, Excel (1) seçin.
• Choose from computer (2) ile Excel dosyanızı seçin → NEXT (3).

• Excel sütunlarına göre gelen tabloda Label, Field Type, Element Type, Required alanlarını düzenleyin.
• Gerekirse Add item / Add Section kullanın.
• Section layout ile düzeni belirleyip SAVE ile kaydedin.

• Action ile Form Oluşturma:

• Form elementini ekrana bırakın, Action (1) seçin.
• Açılan listeden aksiyon seçin → NEXT (2).

• Aksiyonun Inputs/Outputs alanlarına göre form alanları oluşur.
• Label, Field Type, Element Type, Required değerlerini ihtiyaca göre güncelleyin.
• Add item / Add Section ve Section layout ile düzeni tamamlayın.
• SAVE ile formu kaydedin.
  

• Custom ile Form Oluşturma:

• Form elementini ekrana bırakın, Custom (1) seçin → NEXT (2).
• (Opsiyonel) “Also create a table in ManagedDB” işaretlenerek form yapısına bağlı bir tablo da oluşturulabilir.

• Açılan tabloda Label, Field Type, Element Type, Required alanlarını kendiniz tanımlayın.
• Add item / Add Section ile formu genişletin, Section layout ile düzeni ayarlayın.
• SAVE ile form yapısını kaydedin.
  
  

2.1.4. Formu Düzenleme (Edit Form)

Var olan bir formun yapısını güncellemek için:

• Çalıştığınız projeyi açın.
• Form elementinin bulunduğu ekrana gidin.
• Sağ taraftaki Properties panelinde Edit Form butonuna tıklayın.
• Açılan modaldan form alanlarını, bölümleri, Required alanlarını ve Section layout ayarlarını yeniden düzenleyin.
• Değişiklikleri kaydetmek için SAVE butonunu kullanın.

2.1.5. Form Elementlerini Ayırma (Detach)

Form elementleri, gerektiğinde ana form yapısından bağımsız hale getirilebilir:

• Detach, form içindeki alanları form mantığından ayırarak tek tek bağımsız UI elementlerine dönüştürür.
• Form elementlerini ayırmak için:
  
  • Çalıştığınız projeyi açın.
  • Form elementinin üzerine geldiğinizde görünen Detach ikonuna tıklayın.
  • Form içindeki tüm alanlar bağımsız elementlere dönüşür; artık taşıyabilir, yeniden boyutlandırabilir veya farklı konumlarda kullanabilirsiniz.

Önemli:

• Create Form modali ile oluşturduğunuz bir formu Detach ederseniz, bu formu tekrar Create/Edit Form modali üzerinden düzenleyemezsiniz.
• Detach işlemi geri alınamaz. Bu nedenle form yapısını son haline getirdiğinizden emin olduktan sonra Detach işlemini uygulamanız önerilir.

Anladım — o zaman diğer UI elementlerinde olduğu gibi Form elementine aksiyon eklenemediğini açıkça belirten doğru formatlı bir bölüm hazırlayalım.

2.2. Elemente Eklenebilen Aksiyonlar

Form elementi, Create Form modalı ile oluşturulan bir yapıya sahip olduğu için kendi üzerinden aksiyon (ADD ACTION) eklemeyi desteklemez. Form seçildiğinde sağ panelde ADD ACTION butonu görünmez ve Form elementine doğrudan bir trigger atanamaz.

Form elementinin davranışına ilişkin temel noktalar:

• Form’un kendisine aksiyon eklenemez.
• Veri gönderme, doğrulama veya kayıt işlemleri Form içinde yer alan butonlara eklenen aksiyonlarla yönetilir. Örneğin:
  
  • “Kaydet” butonuna SQL → Insert/Update işlemi ekleme
  • “Gönder” butonuna REST API çağırma
• Dinamik alan yönetimi (göster/gizle), Change tetiklemeleri ve diğer işlemler Form elementinin kendisine değil, içerisindeki form alanlarına veya butonlara eklenen aksiyonlarla yapılır.
• Form yalnızca bir taslak ve kapsayıcı (container) görevi görür; asıl işlevsellik butonlar ve alanlar üzerindedir.

Form elementine doğrudan aksiyon atanamaz. Tüm işlevsel işlemler, form içinde yer alan Button, Icon elementleri veya dış UI elementlerine  eklenen aksiyonlarla gerçekleştirilir.

3. Form Elementi Nasıl Kullanılır? 

Bu bölümde Form elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.

Senaryo: Kayıt Formu Oluşturma

Bir etkinlik uygulamasında kullanıcılar, yeni etkinliklere kayıt olabilmek için bilgi giriş ekranlarını kullanır. Form elementi, uygulamanın temel kayıt alanlarını doğrudan oluşturmayı sağlayan hızlı erişim sunar.

Senaryoda:

• Kayıt edilecek veriler alınır.
• Veriler tabloya buttona tıklamayla kaydedilir.

Adım 1 - Veri Kaynağı Oluşturma

DataSources modülünde tablo oluşturma: 

• Datasources modülüne gidin. 
• Ardından Tables sekmesine gidin.
• “FormTableData” adında yeni tablo oluşturun.
• Kurulması gereken tablo yapısı aşağıdaki gibidir:

• Önemli Alan adları:
  
  • AdSoyad: Değerlendirilen kişinin ad ve soyad bilgisini ifade eder.
  • Boy: Formda girilen kişinin boy ölçüsünü temsil eder. 
  • Kilo: Kişinin kilo değerini belirtir.
  • Yas: Kişinin yaş bilgisini ifade eder.
    

Adım 2 - Element Ekleme ve Stil Düzenleme

Başlangıçta anasayfada: 

1. UI Design modülünü açın.
2. Sol yan panelden Elements > Container > Form elementini sayfaya sürükleyip bırakın. 

‍

3. Açılan ekranda Data Table alanını seçip Choose datasource > Managed DB ve Choose table > FormTableData tanımlamalarını yapın.

‍

4. Yeni açılan ekranda tüm alanlar otomatik olarak seçilmiş gelir. Herhangi bir değişiklik yapmadan Kaydet butonuna tıklayın.

5. Kaydettikten sonra form yapısı aşağıdaki gibi gelecektir.

6. Form altına Elements > Navigation > Button elementini form altına sürükleyip bırakın. 
7. Butonun bulundupğu Col alanına tıklayıp Col > Styling > Align  bölümüne girerek dikey hizalamayı “orta”, yatay hizalamayı ise “sağ” olarak seçin.
8. Her Col içerisine sol yan panelden Elements > Display > Icon elementini sürükleyip bırakın.
   

Adım 3 - Hazır Kaydetme Aksiyonunun Eklenmesi

Eklenen buton içerisinde: 

1. Button elementine Button > Properties > Add Action > onClick > ManagedDb > Save Record hazır bulunan aksiyonu ekleyin.

2. Save Record aksiyonunda FormTableData tablosunu seçin. Açılan Select Columns alanına tüm alanları seçerek aşağıdaki tanımlamayı yapın.
3. Id alanına yeni veri eklendiği için Default > New Guid olarak tanımayın.

4. Form üzerindeki AdSoyad alanı bilgisini alan kısmın üzerine gelin ve element ismine bakın. İlgili element ismini aşağıdaki gibi Save Record içerisindeki AdSoyad alanına bağlayın.

5. Benzer şekilde Boy, Kilo ve Yas alanlarına Components > NumberInput > Value olacak şekilde element adlarına göre ekleyin.

6. Beklenen ekran aşağıdaki gibi olacaktır:

Adım 4 - Eklenen Verilerin Gösterilmesi (İsteğe Bağlı)

1. UI Design ekranında yan panelden Custom Actions alanına gidin ve Sql Action’a tıklayıp yeni aksiyon oluşturun.

2. Açılan SQL EDITOR alanına aşağıdaki sql sorgusunu GetFormData adıyla ekleyin.

SELECT * FROM FormTableData;

Uygularken FormTableData kısımlarını silip tekrar FormTableData yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

3. Aksiyonu Buton içerisine Button > Properties > Add Action > onClick > Custom > Managed DB > GetFormData aksiyonunu ekleyin.

4. Benzer şekilde sayfa içerisinde Page Init alanına Add Action > Initial Action > Custom > Managed DB > GetFormData aksiyonunu ekleyin.

5. Sol yan panelden Action Tree alanındaki GetFormData aksiyonunu sürükleyip ekrana bırakın.

6. Son olarak “Table”, “Outputs” alanlarını seçip tablo elementini hazır tanımlı şekilde oluşturun.

7. Tablonunda eklendiği ekran aşağıdaki gibi olacaktır:

Preview:

Uygulama test edildiğinde, Form elementleri doldurulup kaydedildiğinde veri tablosuna kayıt işlemi başarıyla gerçekleştirilir. İsteğe bağlı alanların da kullanılmasıyla, kaydedilen veriler aşağıdaki örnek tabloda gösterilmektedir.

4. Ortak Özellikler (Properties)

Form 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)

• Form alanlarını düzenli gruplara ayırın. Add Section kullanarak formu anlamlı bölümlere ayırmak, kullanıcı deneyimini büyük ölçüde iyileştirir.
• Required alanlarını bilinçli kullanın.  Zorunlu alanlar yalnızca gerçekten gerekli bilgilerle sınırlı olmalıdır. Gereksiz Required kullanımı kullanıcı akışını olumsuz etkiler.
• Element Type seçiminde kullanıcı deneyimini gözetin.
  
  • Tarihler için Date Time
  • Seçenekler için Select Box
  • Uzun metinler için Text Area
  • Onay durumları için Checkbox / Switch
    tercih edilmelidir.
• Form alanlarına açıklama ve yardımcı metin eklemeyi değerlendirin. Kullanıcının hangi bilgiyi doldurması gerektiği daha net olur.
• Excel ve Data Table kaynaklı formlarda kolon adlarını düzenleyin. Otomatik gelen Label’lar her zaman kullanıcı dostu olmayabilir.
• Form düzenlemelerini Create/Edit Form modalı üzerinden tamamlayın. Detach işlemi geri alınamaz olduğu için form stabil hale gelmeden ayrılma yapmayın.
• Form içindeki butonlara açıklayıcı ikon ve renk ekleyin. Örneğin “Kaydet”, “İptal”, “Gönder” butonlarının renk ve ikonla vurgulanması kullanıcı deneyimini artırır.

6. Kısıtlamalar

• Form elementine aksiyon eklenemez. Tüm fonksiyonellik, form içindeki butonlar veya diğer elementler üzerinden sağlanır.
• Create Form modalıyla oluşturulan yapılar Detach edildikten sonra geri döndürülemez. Detach işlemi yapıldığında Create/Edit Form ekranı bir daha kullanılamaz.
• Form kaynakları sadece 4 türle sınırlıdır: Data Table, Excel, Action, Custom.
• Form içinde yer alan alanlar veri kaynağına bağlı olarak otomatik oluşturulur; bazı senaryolarda manuel düzenleme gerekebilir.
• Excel dosyası yalnızca .xls/.xlsx formatlarını destekler.