Dinamik bir açılır liste elementidir. Bir adres formundaki önceden tanımlanmış şehir seçim listesini örnek olarak gösterebiliriz.
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 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.
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.
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.
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 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ü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'i oluşturarak doğrulama oluşturmayı tamamlayın.
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.
Daha sonra Select Box’ a aktarmak istediğiniz verilerin yer alacağı veri tablosunu oluşturun. Örnek senaryo kapsamında bir Department tablosu oluşturabilirsiniz.
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.
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.
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.
Açılır menüden Yeni Özel Aksiyon'a tıklayın.
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.
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 DepartmentKuika’ 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.
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.
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.
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 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.
Veri aktarımını sağlamak için sürükleyip bıraktığınız Select Box elementine tıklayın.
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.
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.
Elementlerde veya ekranınızda Visibility ayarlarını yapmak için aşağıdaki adımları izleyebilirsiniz:
Yapmış olduğunuz seçim doğrultusunda elementin görünürlüğü ayarlanmış olacaktır.
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.
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.
Elementin arka planını renk veya görseller ile kişiselleştirmek için Fill ayarını kullanabilirsiniz. Bu, elementin görsel çekiciliğini artırır.
Elementlerinize kenarlık ekleyerek ve köşe yarıçaplarını ayarlayarak daha estetik bir görünüm kazandırabilirsiniz.
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.
