Text Input Elementi, Alfanümerik değerlerin girişi veya düzenlenmesi için kullanılan elementtir. Email veya Number Input gibi farklı elementler olduğu için sadece metin ağırlıklı girişler için kullanılır.
Elements panelinden Text Input 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 Text Input elementi eklemiş olursunuz.
Text Input elementi için value, placeholder ve formatter gibi farklı ayarları ihtiyacınıza göre kullanabilirsiniz. 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.
Placeholder: İçeriğine bir değer girilene kadar gösterilecek yer tutucu metindir. Placeholder 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.
Max Lenght: İçeriğinde gösterilecek veya giriş yapılacak değer uzunluğunu ayarlayabilirsiniz.
Allow Clear: Veri giriş yapıldığında elementin sağ kenar içine, girilen değerleri tek tıklama ile silmenize yarayan bir Delete(X) ikonu eklenebilir.
Mask: Mask özelliği, Text Input elementi için girilen verilerin belirli bir formatta (örneğin, tarih bilgisini "DD/MM/YYYY" şeklinde) maskelenmesini sağlar.
Formatter: Uygulama geliştirme sürecinde Formatter (biçimleyici), verilerin belirli bir formata veya düzenlemeye getirilmesini sağlayan bir Property’dir. Formatter'lar, genellikle metin, sayılar, tarih ve saat gibi veri türlerini düzenler ve belirli bir görünüm veya format elde etmek için kullanılırlar.
TextInput elementi seçili iken Properties paneli içerisinde Formatter açılır pencere ile gelmektedir.
Açılır pencere içerisinde Lowercase, Uppercase property’leri ile birlikte gelmektedir.
Büyük, Küçük, cümle tipi gibi seçenekler ile girilen içeriğin yazım tipini ayarlayabilirsiniz.
Char Only: Sayısal değer girmeyi engelleyebilirsiniz. Böylece, giriş için sadece harfler mevcut olacaktır.
Allowed Chars: Giriş yapılabilecek ve izin verilen karakterleri burada belirtebilirsiniz. Böylece bu bölümde eklenen karakterler dışında herhangi bir karakter yazımı mümkün olmayacaktır.
Auto Complete: Text Input elementine bir metin girişi sağlarken otomatik olarak gösterilen öneri listesidir. Yazılan metne uygun öneriler oluşturur ve bir açılır liste olarak gösterir. Öneriler genellikle yazdığınız metinle eşleşen kelimeler veya ifadelerden oluşur. (Örneğin, bir şehir adı araması yapıyorsanız ve “İ” yazdığınızda “İzmir”, “İstanbul” gibi şehir adlarını görebilirsiniz.)
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.
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.
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.
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.
Kuika platformunda geliştirdiğiniz uygulama içerisinde Text Input elementinde maskelemeyi yönetebilirsiniz.
Maskeleme, belirlenen formatlarda veri girişini sağlamaktadır. Örnek maskeleme çeşitleri aşağıdaki tabloda verilmiştir.
99/99/9999
Uluslararası tarih biçiminde bir tarih (gün, sayısal ay, yıl). "/" karakteri mantıksal bir tarih ayırıcıdır ve kullanıcıya uygulamanın geçerli kültürüne uygun tarih ayırıcı olarak görünür. Örneğin, 01/01/2023
(999)-999-9999
Birleşik Devletler telefon numarası, alan kodu isteğe bağlı. Kullanıcılar isteğe bağlı karakterleri girmek istemezse, boşluk girebilir veya fare işaretçisini ilk 0 ile temsil edilen maskedeki konuma doğrudan yerleştirilirler. Örneğin, (555)555-1234
$999,999.00
0 ile 999999 arasında bir para birimi değeri. Para birimi, binlik ve ondalık karakterler çalışma zamanında kültüre özgü eşdeğerleriyle değiştirilir. Örneğin,$123,456.00
İlk olarak elementlerden Text Input elementini seçip bulunduğunuz workspace’inize bırakın. Ardından eklenen Text Input elementine tıklayın. Sağ tarafta açılan Properties (Özellikler) penceresinden mask’ı seçin.
Mask → Fixed value kısmına manual olarak veri girebileceğiniz gibi veri tabanından veri çekebilirsiniz. Kuika üzerinde Türkiye, Almanya, Fransa numaralarının maskelenmesini inceleyelim.
şeklinde ayrılmaktadır. Bu şekilde ayrımları Fixed value’ya eklerseniz preview alındığında maskeleme olmuş olacaktır.