Aynı veri tipinin tekrarlı olarak gösterilmesini sağlayabilirsiniz. Tekrarlı veriyi liste halinde gösterilmesi için Table elementini kullanabilirsiniz.
Elements panelinden Table 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 Table elementi eklemiş olursunuz.
Table elementi, veri tekrarlayıcı bir elementtir. İlk satırdaki kolonlara eklediğiniz elementler, sonraki satırlarda veri kaynağına bağlı olarak tekrar eder. Veri kaynağını seçtikten sonra, satır/kolon içindeki diğer elementleri de ilgili veri tablosundaki alanlara bağlayabilirsiniz. Ayrıca, bu elemente role bağlı yetkilendirmeler verebilir ve görünürlüğünü göster/gizle/koşullu seçenekleriyle ayarlayabilirsiniz.
Table Header : Table elementininin başlıkların düzenlendiği ve tanımlandığı alandır.
Column titles : Table elementinde sütun başlıklarını temsil eder.
Hide On Mobile Resolution : Table elementini mobil cihazlarda gizlemek veya görünümünü değiştirmek için kullanılan bir özelliktir.
Text Direction : Metin yönünü belirler.
Datasource : Table içindeki elementlerin besleneceği veri kaynağını seçtiğiniz alandır.
Transformed On Mobile Resolution: Table elementinin bu özelliği, oluşturduğunuz tabloyu mobil cihazlarda görüntülediğinizde daha iyi uyum sağlaması için nasıl dönüştürüleceğini belirler.
Show Header : Table başlık bölümü ön tanımlı olarak görünür halde gelir. Dilerseniz gizleyebilirsiniz.
Fixed Header: Switch’i aktif hale getirdiğinizde tablonuzun başlık satırı, ekranı kaydırsanız bile sabit kalır.
No Data Found Message : Kuikada yer alan Table elementine dinamik bir veri bağlanmadığı durumlarda ön izleme ve çalışma alanında görüntülemek için yer tutucu mesaj ekleyebilirsiniz.
Table Width Mode: Tablonuzun genişliğinin farklı cihazlarda ve ekran boyutlarında görüntülenmesini sağlar.
Searchable: Searchable özelliğini aktif hale getirdiğinizde, Table elementinin sağ üstüne bir input elementi eklenir ve tablo içinde arama işlemi yapılması sağlanır.
Sorter: String, number veya date sütunlarını küçükten büyüğe veya büyükten küçüğe sıralanmasını sağlar.
Filtering: Son kullanıcının Table elementinde, kolonların tipine göre (String, Number ya da Date) gelen seçeneklerle filtrelemesini sağlar. Örneğin, String kolonları için contains, equals, begins with gibi seçeneklerden biri seçildiğinde, bu seçeneğe göre kolon bazında filtre uygulanabilir. Seçenekler kolon tipine özel olarak gelir. Filtering, veri bağlantısı sağlanmış tablolarda çalışmaktadır.
Pagination : Table elementine tanımlanan veri tablosunda veriler listelenirken sayfalama ekleyebilirsiniz.
Page Size: Bir sayfada görüntülenecek maksimum satır sayısını ayarlamanızı sağlar.
Show Size Changer: Anahtarı (Switch) aktif hale getirdiğinizde tablonuzun sayfa boyutunu manuel olarak değiştirebilmenize olanak tanır.
Size Changer Options: Seçebileceğiniz sayfa boyutlarını listeler.
Column Chooser: Tablonuzda hangi sütunları görüntülemek istediğinizi seçmenize olanak tanır.
Hide Table On Empty : Table elementine bağlanan veri tablosunun boş olduğu durumlarda tablosunun gizlenmesini sağlayabilirsiniz.
Striped: Tablo satırlarının farklı renklerde gösterilmesini sağlar.
Striped Color: Satırlar için renk belirlemenizi sağlar.
Row Hover Bg Color: Bir satırın üzerine geldiğinizde o satırın arka plan rengini gösterir. Böylece hangi satırda olduğunuzu net bir şekilde görmenizi sağlar.
Insert Row Active: Switch’i aktif hale getirdiğinizde, tabloda Inline Grid özelliği aktifken yeni bir satır ekler ve bu satır aracılığıyla veri girişi yapmanızı sağlar.
Insert Row Position: Inline Grid özelliği aktifken yeni eklenen ve veri girişi yapılan satırın, tabloda nereye ekleneceğini belirler.
No Data Found Image : Table elementine dinamik bir veri bağlanmadığı durumlarda ön izleme ve çalışma anında görüntülemek için yer tutucu görsel ekleyebilirsiniz.
Inline Grid özelliği, Table elementine eklenen EditableTableColumn ile kullanılır ve tablonuzda verilerinizi sadece görüntülemenizi değil, aynı zamanda düzenleyip kaydetmenizi sağlar. Inline Grid özelliğini kullanabilmek için Table elementine EditableTableColumn eklemeniz gerekmektedir.
Table elementine EditableTableColumn eklemek için;
EditableColumn ekleme
EditableTableColumn, normal TableColumn'dan farklı olarak tasarım sürecinde düzenlenebilir değildir ve standart özelliklere sahiptir. Bununla birlikte kolona dinamik veri bağlayabilir, kolonun stil düzenlemelerini yapabilirsiniz.
EditableTableColumn’da dinamik verilerle çalışmak için Table elementine veri kaynağı bağlamak için;
Editable Table Column içerisinde yer alan Label’a veri bağlama
EditableTableColumn içerisinde yer alan Label elementinde dinamik veri bağlamak için;
Örnek bir senaryo kapsamında EditableTableColumn’lardan oluşan ve içerisinde müşteri adresi ve müşteri adının bulunduğu bir tablo Görsel 3’teki gibi gözükmektedir.
Örnek Editable Table Column Kullanımı
Görsel 3’te de gösterildiği üzere Editable Table Column'lardan oluşan Table elementinin ilk satırı, düzenleme modundaymış gibi görünür. Bununla birlikte kolonlarda yer alan elementlerin Property ve Styling ayarlarını yönetebilirsiniz.
Uygulamanızı ön izleme veya yayına aldığınızda, ilgili satıra çift tıklayarak düzenleme moduna geçebilirsiniz.
Değerleri Enter tuşuna basarak veya tablonun dışına tıklayarak kaydedebilirsiniz.
Düzenlediğiniz değerleri kaydetmek için, Table elementinin on Row Edit Finished olayında (event) tanımladığınız aksiyonla yeni değerleri kaydetmeniz gerekmektedir.
On Row Edit Finished, sadece Table'ın Inline Grid özelliğinde anlamlı olan ve satırı editlemeyi bitirirken veritabanına kayıt eklemek/güncellemek için çağrılacak aksiyonların tanımlanacağı olaydır.
OnRowEditFinished olayında Kayıt işlemini dolduran aksiyondan sonra, tablonun veri kaynağı olan aksiyonu tekrardan tanımlamak gerekmektedir.
Müşteri adresi ve müşteri adını düzenlenebilir bir yapıda listelendiği örnek bir senaryoyu işletelim.
Save Record Aksiyonu Parametre Tanımlama
Geliştirdiğiniz uygulamalarda Inline Grid özelliği ile verilerin Table elementi üzerinde sadece görüntülenmesini değil, aynı zamanda düzenlenip kaydedilmesini sağlayabilir, uygulamanıza yeni fonksiyonlar kazandırabilirsiniz.
Liste ekranlarında kullandığın Table elementi satırlarında hover olarak renk değişimi etkisi verebilirsiniz.
Hover özelliği eklemek istediğiniz Table elementini seçin. Properties panelinden row Hover BgColor’a tıklayın.
Açılan panelde yer alan color (renk) aracılığıyla Hover rengini ayarlayın.
Table elementinin "Sorter" özelliği, tablodaki verileri belirli bir sıralama kriterine göre (A’dan Z’ye gibi) sıralamanızı sağlar. Bu özellik, tabloyu artan veya azalan sırayla görüntülemenize yardımcı olur. İşte Sorter özelliğinin genel işlevleri:
Table elementinin Sorter özelliğini kullanmak için:
Kuika’nın Table elementine özel Clear Table Filtering Configs aksiyonu, tablo verilerinize uyguladığınız filtreleme ayarlarını sıfırlamak için kullanılır. Tablo üzerinde daha önce yapılmış filtreleme işlemlerini kaldırarak, tüm verilerin tekrar görünür hale gelmesini sağlar. Bu eğitim içeriğinde, Table elementine Clear Table Filtering Configs aksiyonunu eklemeyi öğreneceksiniz.
Bu eğitim içeriği aşağıdaki başlıklardan oluşmaktadır:
Kuika’nın Table elementine özel Export Table Configs aksiyonu, tablo verilerinizi dışa aktarmanızı sağlar. Verilerinizi hangi formatta dışa aktarmak istediğinizi belirleyebilirsiniz. Bu eğitim içeriğinde, Table elementine Export Table Configs aksiyonunu eklemeyi öğreneceksiniz.
Bu eğitim içeriği aşağıdaki başlıklardan oluşmaktadır:
2. “UI Design” (1) modülünde, sol kenarda bulunan “Elements” (2) panelinden "Commonly Used" (3) kategorisi altındaki Table elementini (4) ekrana sürükleyip bırakın.
Kuika’nın Table elementine özel Import Table Configs aksiyonu, tablo verilerinizi Excel veya CSV gibi dosyalardan, uygulamanıza aktarmanızı sağlar. Veri setlerini uygulama içinde kullanılan tablo elementine hızlı ve verimli bir şekilde bağlayabilirsiniz. Bu eğitim içeriğinde, Table elementine Import Table Configs aksiyonunu eklemeyi öğreneceksiniz.
Bu eğitim içeriği aşağıdaki başlıklardan oluşmaktadır:
2. “UI Design” (1) modülünde, sol kenarda bulunan “Elements” (2) panelinden "Commonly Used" (3) kategorisi altındaki Table elementini (4) ekrana sürükleyip bırakın.
Kuika’nın Table elementine özel Reset Table Configs aksiyonu, tabloya uygulanmış tüm yapılandırma ayarlarını silmenize olanak tanır. Tablo üzerinde yapılan özel ayarları, filtrelemeleri, sıralama düzenlerini, sütun yapılandırmalarını ve diğer tüm kişiselleştirilmiş ayarları sıfırlar. Bu eğitim içeriğinde, Table elementine Reset Table Configs aksiyonunu eklemeyi öğreneceksiniz.
Bu eğitim içeriği aşağıdaki başlıklardan oluşmaktadır:
2. “UI Design” (1) modülünde, sol kenarda bulunan “Elements” (2) panelinden "Commonly Used" (3) kategorisi altındaki Table elementini (4) ekrana sürükleyip bırakın.
Daha önce filtrelediğiniz veya kolonlarını gizlediğiniz bir tabloyu tekrar açarsanız otomatik olarak önceki ayarlarla gelir. Bu özellik, kullanım deneyiminizi iyileştirir ve verimliliğinizi artırır. Ayrıca, departman bazlı özel tablo konfigürasyonları oluşturmanıza olanak tanır. Bu eğitim içeriğinde, daha önce yaptığınız filtreleme ve gizleme ayarlarının nasıl kaydedileceğini ve bu ayarları nasıl geri yükleyeceğinizi öğreneceksiniz. Bu sayede, tablonuzun önceki düzenlemeleriyle sorunsuz bir şekilde çalışabilir ve özel ihtiyaçlarınıza uygun düzenlemeleri kolayca yapabilirsiniz.
Tablonun ilk kolonuna aramak istediğiniz kelimeyi yazıp filtrelediğinizi varsayalım.
Bu durumda tablonun o anki durumu, yani uygulanan filtreler ve kolon ayarları, “Export Table Config” aksiyonu aracılığıyla JSON formatında bir string olarak dışa aktarılır ve bu veri, Managed DB panelindeki “Tables” alanına kaydedilir.
Örneğin, “TableConfig” adında bir veri tablosu oluşturdunuz ve bu tabloya “Id” ve “Json” kolonları eklediniz. “Export” işlemi sırasında, tablo JSON verisi bu tabloya kaydedilir.
Tabloyu tekrar açtığınızda veya “Import” butonuna tıkladığınızda, daha önce kaydedilen bu konfigürasyon tabloya yeniden uygulanır. Tabloya kaydedilen filtreler ve kolon ayarları ile birlikte yükler.
Bu adımlar tamamlandığında, tabloyu tekrar açtığınızda, otomatik olarak en son kaydedilen filtre ve kolon ayarlarıyla birlikte yüklenir. Böylece tablonun her seferinde yeniden ayarlanması gereksinimini ortadan kaldırı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.
