Dinamik bir açılır liste elementidir. Bir adres formundaki önceden tanımlanmış şehir seçim listesini örnek olarak gösterebiliriz.
Select Box Elementi Ekleme
Elements panelinden Select Box elementini ekrana sürükle bırak ile ekleyebilirsiniz. Eğer ekranda boş bir alana sürüklerseniz Row elementi ile eklenir. Bir Column içine sürüklerseniz sadece Select Box elementi eklemiş olursunuz.
Select Box, web ve mobil uygulamaları desteklemektedir.
Select Box Elementi Özellikleri
Select Box elementi içine metin ekleyebilirsiniz. Elemente role bağlı yetkilendirmeler verebileceğiniz gibi görünürlüğünü de göster/gizle/koşullu seçenekleriyle ayarlayabilirsiniz.
Value (Değer) : Value alanına statik bir değer ekleyebileceğiniz gibi Symbol Picker aracılığıyla bir durumu, Input element içeriğini veya bir aksiyon sonucuna ait bir değerin dinamik olarak gelmesini sağlayabilirsiniz.
Options : Açılır liste içinde gösterilecek listeye ait veri tablosunun bağlayacağınız bölümdür.
Fixed Options List (Sabit Seçenek Listesi): Veri tabanına bağlı olmadan platformda manuel olarak tanımlanan sabit verilerin listelenmesi için kullanılır.
Fixed Data: Listeyi oluşturan her bir verinin listede görünen ismi ve uygulama içerisinde kullanılacak değerinin tanımlandığı bölümdür.
Placeholder : Son kullanıcı için yardımcı/geçici bir yer tutucu metin ekleyebilirsiniz.
Allow Clear : Seçilen değerin tek tıklama ile temizlenmesini sağlayan elementtir.
Searchable : Açılır liste içinde arama yapılabilmesini sağlayabilirsiniz.
Contains Null Item : Listenin ilk değerinin boş gelmesi sağlanabilir.
Sort By: Liste öğelerinin alfabetik olarak A-Z veya Z-A olarak sıralanmasını sağlayabilirsiniz.
Yetkilendirme (Authorization)
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.
Bu yöntemler, uygulamanızda kişiselleştirilmiş ve güvenli bir ortam yaratmanıza olanak tanır.
Actions (Aksiyonlar)
Kuika, Arithmetic, Authorization, Condition, Device, Export, Geolocation, Local Storage, Multi Language, Navigation , Notification, Payment Stripe, UI Control, 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 Properties panelde yer alan +Add Action butonunu kullanabilirsiniz.
Doğrulama (Validation) Ekleme
Doğrulama eklemek istediğiniz ve veri girişine olanak sağlayan elementin Properties (Özellikler) panelini açın.
Properties (Özellikler) panelinin en altında yer alan ADD VALIDATION butonuna tıklayın.
Eklenen Doğrulama içerisinde ilgili elemente yönelik doğrulama türünü seçin.
Doğrulama türleri elementlerin sahip olduğu özelliklere göre değişiklik gösterebilmektedir.
Doğrulama türü özelinde Symbol Picker aracılığıyla standartları tanımlayın. (Sadece bazı doğrulama türleri için geçerlidir).
Daha sonra kullanıcı tarafından girilen hatalı girişte gösterilecek Invalid Message'ioluşturarak doğrulama oluşturmayı tamamlayın.
Select Box Elementine Veri Aktarımı için Datasources Modülünde Çalışma
Kuika ile uygulama geliştirme sürecinde Select Box elementine veri aktarımı sağlamak için öncelikle Datasources modülünde bazı işlemleri gerçekleştirmelisiniz.
İlk olarak Datasources modülünü açın.
Datasources Modülü
Daha sonra Select Box’ a aktarmak istediğiniz verilerin yer alacağı veri tablosunu oluşturun. Örnek senaryo kapsamında bir Department tablosu oluşturabilirsiniz.
Datasource Modülü Tables
Department tablosunu eklemek için solda yer alan Tables başlığı üzerine imleç ile gelin. Tables yanında çıkan + ikonuna tıklayın.
Açılır menü aracılığıyla New Table'a tıklayın. Gelen ekranda tablo ismi olarak Department yazın ve NEXT butonuna tıklayın.
Yeni Tablo Oluşturma Ekranı
Karşınıza gelen ekranda Guid tipinde Id isimli bir kolon varsayılan olarak Kuika tarafından oluşturulmaktadır.
Yeni kolon eklemek için Column Name bilgisini girin. Daha sonra Column Type başlığı altında yer alan açılır menü aracılığıyla veri türünü seçin.
Örnek senaryo kapsamında Department tablosunda yer alacak sütunları ve sütun tiplerini ekleyin. Bu bağlamda sütun tipi String olan bir DepartmentName sütunu ekleyin.
Sütun ismi eklerken ingilizce karakter kullanmalısınız. Ayrıca özel karakterler kullanmamalısınız.
Tablo Kolonları Ekleme Ekranı
Ekleme işlemini gerçekleştirmek için Column Name ve Column Type bilgilerini doldurun. Sütun için gereklilik ve benzersizlik durumlarını seçin ve Add butonuna tıklayın.
Eklediğin sütunları Department tablosu içerisinde listeleyebilir, gerektiğinde silebilirsiniz.
Sütun ekleme işlemini tamamladıktan sonra sağ üst köşede bulunan CREATE butonuna tıklayarak tabloyu oluşturun.
Tablo oluşturma işlemi sonrasında Select Box elementinde verilerin listelenmesini sağlayacak özel aksiyonu oluşturmalısınız.
Yeni bir özel aksiyon eklemek için Datasources modülünde solda yer alan Actions başlığı üzerine imleç ile gelin. Actions başlığı yanında çıkan + ikonuna tıklayın.
Datasources modülü Actions
Açılır menüden Yeni Özel Aksiyon'a tıklayın.
Yeni Özel Aksiyon Oluşturma Ekranı
Açılan Yeni bir Aksiyon Ekleme ekranında aksiyonunu isimlendirerek Next butonuna tıklayın.
Örnek senaryo kapsamında Select Box içerisinde departmanların listelenmesini sağlayacak aksiyon için Select Department ismini kullanabilirsiniz.
Yeni Aksiyon Oluşturmak için SQL Editör
Açılan ekranda sizi bir SQL Editör karşılayacak. SQL Editör’de listeleme için gereken SQL sorgusunu yazın.
Örnek senaryo kapsamında kullanılacak Select Department aksiyonunu oluşturmak için aşağıdaki sorguyu kullanabilirsiniz.
CopySELECT *FROM Department
Kuika’ da Select sorgusunu herhangi bir sorgu ifadesi yazmadan da hızlı ve kolay bir şekilde oluşturabilirsiniz.
Hızlı ve kolay bir şekilde listeleme aksiyonunu oluşturmak için SQL editör ekranının sol menüsünde bulunan Tables' a tıkla. Department tablosunun üzerine imleç ile gelin. Detay menüsü açın.
Açılan menüde yer alan Add Select Query'e tıklayın.
Add Select Query' e tıkladıktan sonra, Select sorgusu otomatik olarak SQL editöre eklenecektir.
Select Box'a Veri Aktarımı
Kuika ile uygulama geliştirme sürecinde Select Box elementini kullanabilir, Select Box elementine veri bağlantısı sağlayabilirsiniz.
Bu eğitim içeriği aşağıdaki başlıklardan oluşmaktadır.
Select Box Elementine Veri Aktarımı için Datasources Modülünde Çalışma
Select Box Elementine Veri Aktarımı için UI Design Modülünde Çalışma
Bu eğitim içeriği kapsamında, bir şirketin sahip olduğu departmanların SelectBox aracılığıyla seçiminin sağlanacağı örnek senaryo aktarılacaktır.
Select Box Elementine Veri Aktarımı için UI Design Modülünde Çalışma
Datasource modülündeki işlemleri tamamladıktan sonra UI Design modülünü açın.
Daha sonra, Select Box elementi ile çalışmak istediğiniz ekranı açın.
Select Box elementine veri aktarımını sağlamak için öncelikle Select Box elementinin yer alacağı ekrana, oluşturmuş olduğunuz özel aksiyonu Initial Action olarak eklemelisiniz.
Initial Action Ekleme
Initial Action eklemek için Screen Properties’de, ADD ACTION butonuna tıklayın.
Açılan menüde Initial Actions > Custom> Datasource üzerine imleç ile gelin. Datasource öğesinin üzerine imleç ile geldiğinde oluşturmuş olduğunuz özel aksiyonlar listelenecektir. Bu liste içerisinden Select Department özel aksiyonuna tıklayın.
Ardından bir adet Select Box elementini sürükleyip çalışma alanına bırakın.
Select Box Elementi Ekleme
Veri aktarımını sağlamak için sürükleyip bıraktığınız Select Box elementine tıklayın.
Select Box Elementi Veri Bağlama Seçenekleri
Sağda açılan Properties paneli aracılığıyla Options menüsünü açın. Action başlığı altında bulunan açılır menüde özel aksiyon olarak oluşturduğunuz ve Select Box’da listelemeyi sağlayacak aksiyonu seçmelisiniz. Örnek senaryo kapsamında Select Department aksiyonunu seçin.
Field to display başlığı altında Select Box elementinde gösterilecek verilerin bulunduğu kolonu seçmelisiniz. Örnek senaryo kapsamında departmentname seçimini yapın.
Son olarak Field to Use as Key başlığı altında bulunan açılır menüde key olarak Id olarak seçimini yapın.
Visibility (Görünürlük)
Ekranların veya elementlerin görünürlüğünün ayarlandığı kısımdır. Elementler'de Visibility yani Görünürlük, belirli bir durum ve/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.
Ekranınızın görünürlük yapısının ayarlandığı kısımdır. 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.
Visible: Uygulamanızdaki ekranların 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.
Elementlerde veya Ekranlarda Visibility İşlemleri
Elementlerde veya ekranınızda Visibility ayarlarını yapmak için aşağıdaki adımları izleyebilirsiniz:
Ekrandaki elemente veya ekrana tıklayarak seçili hale getirin.
Properties panelini açın.
Visibility alanına tıklayarak uygulamanızın ihtiyacına göre aşağıdaki seçimlerden birini yapın.
Selectbox içerisinden Always visible ile her zaman görünür olmasını sağlarsınız.
Hidden ile elementi gizleyebilirsiniz.
Sometimes visible ile ekleyeceğiniz koşullar doğrultusunda görüntülenmesini sağlayabilirsiniz.
Yapmış olduğunuz seçim doğrultusunda elementin görünürlüğü ayarlanmış olacaktır.
Style panel ile arayüz tasarımını özelleştirin
Elementlerinizi Styling Paneli ile özelleştirerek, web ve mobil uygulamalarınızda benzersiz ve etkileyici kullanıcı arayüzleri oluşturabilirsiniz. Bu genel kılavuz, çeşitli elementlerin (örneğin, Collapse) nasıl özelleştirileceğini açıklar ve ortak özelliklerle ilgili detaylı bilgiler sunar.
Altta tanımlanan bölümler element özelinde değişkenlik gösterir. Her bir özelleştirme seçeneği hakkında daha fazla bilgi edinmek için, lütfen ilgili bağlantılara tıklayınız.
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.
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.
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.
