Form

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.

1. Add Header : Form bölümüne isim vereceğiniz alandır. 
2. Section Layout : Cihaz farklılıklarına göre formu nasıl görüntüleyebileceğinizi seçebilirsiniz. 
3. Label : Form alanındaki değişkenlerin adını belirleyebileceğiniz alandır. (Örneğin, “roleName” gibi.) 
4. Field Type : Form alanındaki değişkenin veri türünü belirleyebileceğiniz alandır. (Örneğin, “string” gibi.)
5. Element Type : Form alanındaki değişkenin türünü belirleyebileceğiniz alandır. (Örneğin, “textInput” gibi.)
6. Req : Formda mutlaka doldurulması gereken alanlar için kullanılır. 
7. 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.

Yeni bir form oluşturmak için: 

1. Kuika platformuna giriş yaptıktan sonra “Apps” ekranından çalışacağınız projeyi açın. 

2. “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.

3. 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: 

1. Form elementini ekrana sürükleyip bıraktıktan sonra karşınıza çıkan modaldan “Data Table” (1) veri kaynağını seçin. 

2. Açılan alt menüden bir veri kaynağı (2) ve tablo (3) seçin. Daha sonra “NEXT” (4) butonuna tıklayın. 
3. Ö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. 

4. Formunuzun alt kısmında bulunan “Add item” (6) butonundan yeni satır ve “Add Section (7)” butonundan yeni bölüm ekleyebilirsiniz.
5. Formun sağ üst köşesinde bulunan “Section layout” (8) alanından cihazınıza uygun kolon görünümünü seçebilirsiniz. 
6. 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: 

1. Form elementini ekrana sürükleyip bıraktıktan sonra karşınıza çıkan modaldan “Excel” (1) veri kaynağını seçin. 
2. 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.  

3. Ö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.

4. Formunuzun alt kısmında bulunan “Add item” (5) butonundan yeni satır ve “Add Section” (6) butonundan yeni bölüm ekleyebilirsiniz.
5. Formun sağ üst köşesinde bulunan “Section layout” (7)  alanından cihazınıza uygun kolon görünümünü seçebilirsiniz. 
6. 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: 

1. Form elementini ekrana sürükleyip bıraktıktan sonra karşınıza çıkan modaldan “Action” (1) kaynak yapısını seçin. 

2. 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.

3. Ö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.

4. Formunuzun alt kısmında bulunan “Add item” (5) butonundan yeni satır ve “Add Section” (6) butonundan yeni bölüm ekleyebilirsiniz.
5. Formun sağ üst köşesinde bulunan “Section layout” (7) alanından cihazınıza uygun kolon görünümünü seçebilirsiniz. 
6. 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: 

1. Form elementini ekrana sürükleyip bıraktıktan sonra karşınıza çıkan modaldan “Custom” (1) veri kaynağını seçin. 

2. 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. 

3. 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.

4. Formunuzun alt kısmında bulunan “Add item” (5) butonundan yeni satır ve “Add Section” (6) butonundan yeni bölüm ekleyebilirsiniz.
5. Formun sağ üst köşesinde bulunan “Section layout” (7) alanından cihazınıza uygun kolon görünümünü seçebilirsiniz. 
6. Son olarak sağ alt köşede bulunan “SAVE” (8) butonuna tıklayarak formunuzu kaydedebilirsiniz. 

Form yapısını düzenlemek için aşağıdaki adımları takip edebilirsiniz: 

1. Çalıştığınız proje ekranını açın.
2. Form elementinin bulunduğu ekranın sağ kenarında bulunan “Properties” panelini açın.

3. Ardından “Edit Form” butonuna tıklayın.
4. Açılan modaldan gerekli düzenlemeleri yapabilirsiniz. 

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: 

1. Çalıştığınız proje ekranı açın.

2. 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.

Uygulamanızın ekran ve elementlerinde, "Anonymous Access" ve "All Roles Access" yetkilendirme seçenekleri ile kullanıcı erişimini özelleştirebilirsiniz. "Anonymous Access" herhangi bir hesap bilgisi sorgulaması olmadan erişimi mümkün kılarken, "All Roles Access" ile kullanıcı hesap bilgileri doğrulanarak erişim sağlanır.

Element düzeyinde yetkilendirme için, ilgili elementi seçip Properties panelinden "Authorization" ayarlarını düzenleyerek, uygulamanızın güvenlik ve kullanıcı deneyimini yönetebilirsiniz.

Ekranların veya elementlerin görünürlüğünü ayarlamanıza olanak tanır. Elementler'de Visibility, belirli bir durum veya koşula göre görünürlüğü düzenlemenizi sağlar. Her bir element için her zaman görünür olmasını, gizli olmasını veya bir koşula bağlı olarak görünüp gizlenmesini sağlayabilirsiniz.

1. Ekrandaki elemente tıklayın.
2. Sağ kenardaki “Properties” panelini açın.
3. “Visibility” alanına tıklayarak uygulamanızın ihtiyacına göre aşağıdaki seçimlerden birini yapın. Kuika, uygulamanızdaki ekranların görünürlük kontrolünü yapabilmeniz için Always Visible, Hidden, Sometimes Visible seçeneklerini sunmaktadır.

• Always Visible: Uygulamanızdaki ekranların her zaman görünür olmasını sağlar. ‍
• Hidden: Uygulamanızdaki ekranların gizlenmesini sağlar. ‍
• Sometimes Visible: Uygulamanızdaki ekranların koşula bağlı görünür olmasını sağlar.

‍

Elementleri düzenlenebilir hale getirmenize olanak tanır. 

• Enabled: Bu seçenek seçildiğinde, ilgili element düzenlenebilir hale gelir.
• Disabled: Bu durumda, ilgili element düzenlenemez. 
• Sometimes Enabled: Bu seçenek, öğenin belirli koşullara göre bazen düzenlenebilir, bazen düzenlenemez olduğu anlamına gelir. 

Elementlerinizi Styling Paneli ile özelleştirerek, web ve mobil uygulamalarınızda benzersiz ve etkileyici kullanıcı arayüzleri oluşturabilirsiniz. 

Altta tanımlanan bölümler element özelinde değişkenlik gösterir. 

• Layout (Düzen)‍: Elementlerin boyutlandırılması, hizalanması ve çevresel iç boşlukların (padding) ayarlanması gibi görsel düzenlemeleri buradan yapabilirsiniz. Bu ayarlar, elementin içerisinde bulunan diğer elementlerin düzenini de etkiler. Özellikler arasında Size, Min Size ve Align bulunur; ancak, bazı elementler Display özelliğini desteklemeyebilir.
• Text (Metin)‍: Elementin metin özellikleri, yazı tipi ailesi, stil, renk, boyut, aralık ve diğer seçenekler aracılığıyla buradan düzenlenebilir. Bu bölüm, Text ile ilgili tüm ayarlamaları destekler.
• Fill (Dolgu)‍: Elementin arka planını renk veya görseller ile kişiselleştirmek için Fill ayarını kullanabilirsiniz. 
• Border (Kenarlık)‍: Elementlerinize kenarlık ekleyerek ve köşe yarıçaplarını ayarlayarak daha estetik bir görünüm kazandırabilirsiniz.
• Shadow (Gölge)‍: Web uygulamalarında kullanılan elementlere gölge efekti ekleyerek derinlik hissi verebilirsiniz. Ancak, bazı elementler mobil uygulamalar için uygun olmadığından gölge özelliği desteklenmeyebilir. 

Kuika, Arithmetic, Authorization, Condition, Device, Export, Geolocation, Invers, Local Storage, Multi Language, Navigation, Notification, Payment, UI Control, Process Administration, Process Automation, Trigger, Process Automation, Process Administration ve String Operations gibi sistem aksiyonlarını barındırmaktadır.

Sistem aksiyonlarının yanı sıra kendi oluşturduğunuz SQL aksiyonları da kullanabilirsiniz.

Elementlere aksiyon eklemek için sağ kenardaki Properties panelinden “+ADD ACTİON” butonunu kullanabilirsiniz.