1. Kuika platformuna giriş yapın.
2. Apps ekranından çalışacağınız projeyi açın.
3. UI Design modülüne gidin.

4. Sol kenardaki Elements panelinden Select Input kategorisini seçin.
5. Auto Complete elementini çalışma alanına sürükleyip bırakın.

• Boş bir alana sürüklerseniz, Auto Complete elementi bir Row elementi ile birlikte eklenir.
• Column içerisine sürüklerseniz yalnızca Auto Complete elementi eklenir.

Properties panelinden aşağıdaki ayarları yapılandırabilirsiniz:

• Options: Liste içinde gösterilecek verinin bağlantısını yapabilirsiniz. Statik bir liste de oluşturabilirsiniz.
• Fixed Options List: Veri tabanına bağlı olmadan manuel olarak tanımlanan sabit verileri listeler.
• Fixed Data: Listeyi oluşturan her bir verinin görünen ismini (Text) ve uygulama içinde kullanılacak değerini (Key) belirler.
• Placeholder: Kullanıcının veri girmediğinde görüntülenen yer tutucu metindir.
• Allow Clear: Sağ kenarda bir Sil (X) simgesi ekleyerek girilen verinin tek tıklamayla silinmesini sağlar.
• Value: Statik bir değer ekleyebilir veya Symbol Picker aracılığıyla başka bir elementin içeriğini ya da aksiyon sonucunu dinamik olarak gösterebilirsiniz.

Elemente Eklenebilen Aksiyonlar

Auto Complete elementi, kullanıcı etkileşimlerine bağlı olarak olay (event) bazlı aksiyonlar tanımlanmasını destekler. Aksiyonlar, elementin kendisine değil; kullanıcı girişleri ve seçimleri sonucunda tetiklenen event’lere bağlanır.

Auto Complete elementi için aksiyonlar, Properties > Add Action alanı üzerinden aşağıdaki event’ler aracılığıyla eklenebilir.

Desteklenen Aksiyon Tetikleyicileri

onSearch: Kullanıcı arama yaptığında tetiklenir. Arama metni temizlendiğinde (clear) de çalışır.

Kullanım amaçları:

• Girilen metne göre öneri listesini dinamik olarak oluşturmak
• API çağrısı yaparak sonuçları filtrelemek
• Büyük veri setlerinde arama performansını artırmak

Örnek senaryo: Kullanıcı şehir ismi yazdıkça, API üzerinden eşleşen şehirler liste halinde getirilir.

onSelect: Kullanıcı her seçim yaptığında tetiklenir.

Kullanım amaçları:

• Seçilen değeri state veya değişkene atamak
• Bağlı alanları otomatik doldurmak
• Form verisini güncellemek

Örnek senaryo: Kullanıcı bir ürünü seçtiğinde, ürün detayları otomatik olarak ilgili alanlara yazılır.

onChange: Yalnızca seçilen item değiştiğinde tetiklenir.

Kullanım amaçları:

• Kullanıcı girişini izlemek
• Yardımcı metin veya uyarı göstermek
• Bağımlı alanların durumunu güncellemek

onBlur: Kullanıcı Auto Complete alanından odak çıktığında tetiklenir.

Kullanım amaçları:

• Alan boş bırakıldıysa validasyon çalıştırmak
• Girilen değerin geçerli olup olmadığını kontrol etmek

getTextFromValue: Seçilen değerden gösterilecek metni elde etmek için kullanılır.

Kullanım amaçları:

• Value–Label ayrımı olan veri yapılarında doğru metni göstermek
• API’den gelen karmaşık veri yapılarında kullanıcıya anlamlı etiket sunmak

Örnek senaryo: Value olarak user_id, metin olarak Ad Soyad bilgisinin gösterilmesi.

Aksiyonlara İlişkin Temel Kurallar

• Auto Complete elementi birden fazla event üzerinden aksiyon tetikleyebilir.
• Aynı event için birden fazla aksiyon tanımlanabilir.
• onSearch event’i yoğun kullanıldığında performans açısından API çağrıları dikkatli planlanmalıdır.
• Karmaşık veri eşleştirme senaryolarında onSelect ve getTextFromValue birlikte kullanılması önerilir.

Auto Complete elementi, özellikle arama, filtreleme ve büyük veri setleriyle seçim yapılan senaryolarda aksiyonlarla birlikte kullanıldığında güçlü ve esnek bir kullanıcı deneyimi sunar.

1. Sağ kenardaki Properties panelini açın.
2. Options açılır menüsünden Actions altında yer alan Please Select butonuna tıklayın.

3. Açılan menüden Fixed Options List seçeneğini belirleyin.
4. Fixed Options List altında bulunan Fixed Data butonuna tıklayın.
5. Açılan ekranda manuel olarak Key ve Text alanlarını doldurun.
6. UPDATE butonuna tıklayarak verileri bağlayın.

Bu kılavuzu takip ederek Auto Complete elementini uygulamanızda etkili bir şekilde kullanabilirsiniz.

Authorization (Yetkilendirme)

Element düzeyindeki erişim kontrolünü yönetmek için, Properties panelindeki Authorization bölümünü kullanabilirsiniz.

Erişim Tipleri

Anonymous

Elementin tüm kullanıcılar tarafından, giriş yapmadan görüntülenmesine izin verir.

Restricted

Erişimin yalnızca doğrulanmış kullanıcılara veya belirli rollere göre sınırlandırılmasını sağlar.

• Everyone: Aktif edildiğinde, giriş yapmış tüm kullanıcılar elemente erişebilir.
• Roles: Elemente erişmesine izin verilen roller buradan seçilir. Rol listesini düzenlemek için Roles alanının yanındaki dişli (⚙️) ikonuna tıklayarak Role Management penceresini açabilirsiniz. Bu pencereden yeni rol ekleyebilir, klasör oluşturabilir veya mevcut rolleri yönetebilirsiniz.

Unauthorized Behavior (Hide / Disable)

Kullanıcı gerekli role sahip değilse, elementin nasıl davranacağını Choose alanından belirleyebilirsiniz:

• Hide: Kullanıcı yetkili değilse element tamamen gizlenir ve ekranda görünmez.
• Disable: Element görünür kalır ancak tıklanamaz / kullanılamaz hâle gelir.

Bu ayar, yetkisiz kullanıcıların elementle nasıl karşılaşacağını yönetmeniz için kullanılır.

Visibility (Görünürlük)

Always Visible: Element her zaman görünür.
Hidden: Element gizlenir.
Sometimes Visible: Element, belirli koşullara bağlı olarak görünür.

Sometimes Visible seçeneği kullanıldığında AND / OR grupları doğrudan eklenebilir ve görünürlük kuralları birlikte gruplandırılarak daha karmaşık senaryolar rahatlıkla yönetilebilir.

Ayarı yapılandırmak için:

• Ekrandaki elementi seçin.
• Sağ kenardaki Properties panelini açın.
• Visibility alanında ihtiyacınıza göre bir seçenek belirleyin.

Editability (Düzenlenebilirlik)

• Enabled: Element düzenlenebilir.
• Disabled: Element düzenlenemez.
• Sometimes Enabled: Element, belirli koşullara göre düzenlenebilir veya düzenlenemez.

Style Panel ile Arayüz Tasarımı

Elementlerinizi Styling Panel ile özelleştirerek, web ve mobil uygulamalarınız için etkileyici arayüzler oluşturabilirsiniz. Bu bölümde, aşağıdaki ayarları yapılandırabilirsiniz:

• Layout (Düzen): Boyutlandırma, hizalama ve iç boşluk (padding) ayarları. Ayarlar arasında Size, Min Size ve Align bulunur.
• Text (Metin): Yazı tipi, stil, renk, boyut ve aralık ayarları.
• Fill (Dolgu): Arka planı renk veya görsellerle özelleştirme.
• Border (Kenarlık): Kenarlık ekleme ve köşe yarıçapı ayarları.
• Shadow (Gölge): Elementlere derinlik katmak için gölge efekti ekleme.