Kuika'nın Form elementi, mobil ve web uygulamalarınızda hızlı bir şekilde formlar oluşturmanızı sağlar. Data Sources modülünden eklediğiniz veri kaynaklarını kullanabileceğiniz gibi form elementlerini ekleyerek sıfırdan formlar da oluşturabilirsiniz. Bu eğitim içeriği ile Form elementini kullanarak hızlı ve etkili form yapıları oluşturmayı öğreneceksiniz.
Form elementi, mobil ve web uygulamaları desteklemektedir.
Bu eğitim içeriği aşağıdaki başlıklardan oluşmaktadır:
Create Form modalının anatomisi,
Form oluşturun,
Formu düzenleyin,
Form elementlerini ayırın.
Create Form Modalının Anatomisi
Form elementini ekrana sürükleyip bıraktığınızda “Create Form” modalı açılır. Öncelikle oluşturulacak formun veri kaynağını seçmelisiniz.
Seçebileceğiniz veri kaynakları ise;
Data Table (1):Veri kaynaklarınızda yer alan veri tablolarına bağlı bir şekilde, veri kaydetme bağlantıları sağlanmış form tasarımlarını kolay ve hızlı bir şekilde oluşturmanızı sağlar.
Excel (2): Oluşturduğunuz bir Excel belgesinde yer alan kolonları kullanarak form tasarımlarını kolay ve hızlı bir şekilde oluşturmanızı sağlar.
Action (3):Geliştirdiğiniz uygulamada yer alan aksiyonları kullanarak, aksiyonların sahip olduğu parametreler doğrultusunda form tasarımlarını kolay ve hızlı bir şekilde oluşturmanızı sağlar.
Custom (4):İhtiyaçlarınız doğrultusunda özelleştirilmiş yapıda çeşitli form tasarımlarını kolay ve hızlı bir şekilde oluşturmanızı sağlar.
Veri kaynağınızı seçtikten sonra açılan form detay ekranındaki bölümleri inceleyelim.
A. Form’a Alan Ekleme:
Alan ekleme bölümünden form yapısının adını belirleyebilir, formda bulunacak değişkenleri özelleştirebilir, cihaz farklılıklarına göre form yapısının görünümünü değiştirebilir, üç nokta ile değişkenleri silebilir ve yeni alanlar ekleyebilirsiniz.
Add Header :Form bölümüne isim vereceğiniz alandır.
Section Layout :Cihaz farklılıklarına göre formu nasıl görüntüleyebileceğinizi seçebilirsiniz.
Label : Form alanındaki değişkenlerin adını belirleyebileceğiniz alandır. (Örneğin, “roleName” gibi.)
Field Type :Form alanındaki değişkenin veri türünü belirleyebileceğiniz alandır. (Örneğin, “string” gibi.)
Element Type : Form alanındaki değişkenin türünü belirleyebileceğiniz alandır. (Örneğin, “textInput” gibi.)
Req :Formda mutlaka doldurulması gereken alanlar için kullanılır.
Add item : Forma yeni bir satır eklemek için kullanabilirsiniz.
B. Form’a Bölüm Ekleme
Formunuza yeni bölümler ekleyebileceğiniz alandır.
Add Section : Forma yeni bir bölüm eklemek için kullanabilirsiniz.
C. Formu Kaydetme
Save :Formdaki değişiklikleri kaydetmenizi sağlar.
Form Oluşturun
Yeni bir form oluşturmak için:
Kuika platformuna giriş yaptıktan sonra “Apps” ekranından çalışacağınız projeyi açın.
“UI Design” (1) modülünde, sol kenarda bulunan “Elements” (2) panelinden "Container" (3) kategorisi altındaki Form elementini (4) ekrana sürükleyip bırakın.
Açılan “Create Form” modalında oluşturacağınız form da kullanmak istediğiniz veri kaynağını seçerek başlayın. Kullanım senaryonuza ve ihtiyacınıza göre seçim yapıp ilerleyebilirsiniz.
Data Table Veri Kaynağı ile Form Oluşturun
Data Table veri kaynağı yapısı ile form oluşturmak için aşağıdaki adımları takip edebilirsiniz:
Form elementini ekrana sürükleyip bıraktıktan sonra karşınıza çıkan modaldan “Data Table” (1) veri kaynağını seçin.
Açılan alt menüden bir veri kaynağı (2) ve tablo (3) seçin. Daha sonra “NEXT” (4) butonuna tıklayın.
Örneğin, veri kaynağı “Managed DB” ve tablo “Department” olarak seçilirse, karşınıza açılan sayfada ilgili tabloyu görebilirsiniz. İlgili tablonun sütunlarından “Label” (1), “Field Name” (2), “Field Type” (3), “Element Type” (4) ve “Required” (5) kısımlarını ihtiyacınız doğrultusunda düzenleyebilirsiniz.
Bir inputun zorunlu olması gerektiğinde, "Required" kısmını aktif hale getirin.
Formunuzun alt kısmında bulunan “Add item” (6) butonundan yeni satır ve “Add Section (7)” butonundan yeni bölüm ekleyebilirsiniz.
Formun sağ üst köşesinde bulunan “Section layout” (8) alanından cihazınıza uygun kolon görünümünü seçebilirsiniz.
Son olarak sağ alt köşede bulunan “SAVE” (9) butonuna tıklayarak formunuzu kaydedebilirsiniz.
Excel Veri Kaynağı ile Form Oluşturun
Form elementi, Excel veri dosyası olarak “.xls/.xlsx” formatlarını desteklemektedir.
Excel veri kaynağı ile form oluşturmak için aşağıdaki adımları takip edebilirsiniz:
Form elementini ekrana sürükleyip bıraktıktan sonra karşınıza çıkan modaldan “Excel” (1) veri kaynağını seçin.
Açılan alt menüden “Choose from computer” (2) butonuna tıklayarak bilgisayarınızdan kullanacağınız excel dosyasını seçin. Daha sonra “NEXT” (3) butonuna tıklayın.
Örneğin; ad soyad, telefon numarası ve departman ile ilgili bir Excel dosyası yüklediğinizi varsayarsak ilgili tablonun sütunlarından “Label” (1), “Field Type” (2), “Element Type” (3) ve “Required” (4) kısımlarını ihtiyacınız doğrultusunda düzenleyebilirsiniz.
Bir inputun zorunlu olması gerektiğinde, “Required” kısmını aktif hale getirin.
Formunuzun alt kısmında bulunan “Add item” (5) butonundan yeni satır ve “Add Section” (6) butonundan yeni bölüm ekleyebilirsiniz.
Formun sağ üst köşesinde bulunan “Section layout” (7) alanından cihazınıza uygun kolon görünümünü seçebilirsiniz.
Son olarak sağ alt köşede bulunan “SAVE” (8) butonuna tıklayarak formunuzu kaydedebilirsiniz.
Action Veri Kaynağı ile Form Oluşturun
Action veri kaynağı ile form oluşturmak için aşağıdaki adımları takip edebilirsiniz:
Form elementini ekrana sürükleyip bıraktıktan sonra karşınıza çıkan modaldan “Action” (1) kaynak yapısını seçin.
Açılan alt menüden bir aksiyon seçin. Daha sonra “NEXT” (2) butonuna tıklayın.
Açılan alt menüde bulunan “Inputs” alanı veri girişi için, “Outputs” alanı ise ilgili form alanlarında kayıtlı verileri göstermek için kullanılır.
Örneğin, “AddUserToRole” aksiyonu seçilirse, karşınıza açılan sayfada ilgili tabloyu görebilirsiniz. İlgili tablonun sütunlarından “Label” (1), “Field Type”(2), “Element Type” (3) ve “Required”(4) kısımlarını ihtiyacınız doğrultusunda düzenleyebilirsiniz.
Bir inputun zorunlu olması gerektiğinde, “Required” kısmını aktif hale getirin.
Formunuzun alt kısmında bulunan “Add item” (5) butonundan yeni satır ve “Add Section” (6) butonundan yeni bölüm ekleyebilirsiniz.
Formun sağ üst köşesinde bulunan “Section layout” (7) alanından cihazınıza uygun kolon görünümünü seçebilirsiniz.
Son olarak sağ alt köşede bulunan “SAVE” (8) butonuna tıklayarak formunuzu kaydedebilirsiniz.
Custom Veri Kaynağı ile Form Oluşturun
Custom veri kaynağı ile form oluşturmak için aşağıdaki adımları takip edebilirsiniz:
Form elementini ekrana sürükleyip bıraktıktan sonra karşınıza çıkan modaldan “Custom” (1) veri kaynağını seçin.
Daha sonra “NEXT” (2) butonuna tıklayın.
Opsiyonel olarak form yapısına bağlı bir veri tablosu oluşturmak için “Also create a table in Managed DB” tıklayabilirsiniz.
Açılan sayfada ilgili tablonun sütunlarından “Label” (1), “Field Type” (2), “Element Type” (3) ve “Required” (4) kısımlarını ihtiyacınız doğrultusunda düzenleyebilirsiniz.
Bir inputun zorunlu olması gerektiğinde, “Required” kısmını aktif hale getirin.
Formunuzun alt kısmında bulunan “Add item” (5) butonundan yeni satır ve “Add Section” (6) butonundan yeni bölüm ekleyebilirsiniz.
Formun sağ üst köşesinde bulunan “Section layout” (7) alanından cihazınıza uygun kolon görünümünü seçebilirsiniz.
Son olarak sağ alt köşede bulunan “SAVE” (8) butonuna tıklayarak formunuzu kaydedebilirsiniz.
Formu Düzenleyin
Form yapısını düzenlemek için aşağıdaki adımları takip edebilirsiniz:
Çalıştığınız proje ekranını açın.
Form elementinin bulunduğu ekranın sağ kenarında bulunan “Properties” panelini açın.
Ardından “Edit Form” butonuna tıklayın.
Açılan modaldan gerekli düzenlemeleri yapabilirsiniz.
Form Elementlerini Ayırın (Detach)
Kuika platformunda form elementlerini ayırma özelliği (detach), bir form elemanını ana form yapısından ayırarak bağımsız bir eleman haline getirmenizi sağlar.
Create Form modalıyla oluşturduğunuz bir formu Detach ederseniz ilgili formu düzenlemek için Create Form modalını kullanamazsınız. Detach fonksiyonu geri alınamayan bir işlemdir.
Form elementlerini ayırmak için aşağıdaki adımları takip edebilirsiniz:
Çalıştığınız proje ekranı açın.
Form elementinin üzerine geldiğinizde “Detach” ikonuna tıklayın.
Böylece form elemanlarını ayırmış oldunuz. Ayırdığınız form elemanlarını taşıyabilir, yeniden boyutlandırılabilir ve farklı bir konumda kullanabilirsiniz.
