Elements

Data

Table

‍

Kuika'nın Table elementi, uygulamanızda verileri tablo düzeninde düzenli ve anlaşılır bir şekilde görüntülemenize olanak tanır. Kullanıcılar, tablo üzerinde satır ve sütunlar aracılığıyla farklı veri kümelerini inceleyebilir ve yönetebilirler. Table elementi, özellikle veri listeleri, raporlar veya kullanıcıya bilgi sunulması gereken durumlarda kullanılır. Bu eğitim içeriğinde, Table elementini nasıl kullanacağınızı, verilerinizi nasıl yapılandıracağınızı ve tablo düzenlemelerini nasıl özelleştirebileceğinizi öğreneceksiniz.

Table elementi, web ve mobil uygulamaları desteklemektedir.

Bu eğitim içeriği aşağıdaki başlıklardan oluşmaktadır:

Table elementi ekleme,
Table elementi özellikleri,
Table elementinde Sorter kullanımı,
Tablo filtreleme ayarlarını sıfırlama,
Tablo verilerini dışa aktarma,
Verileri tabloya aktarma,
Tablo ayarlarını sıfırlama,
Tablonun filtre ayarlarının kaydedilmesi ve geri yüklenmesi,
Authorization (Yetkilendirme),
Visibility (Görünürlük),
Editability (Düzenlenebilirlik),
Style Panel ile arayüz tasarımını özelleştirme,
Actions (Aksiyonlar).

Table elementi veri tekrarlayıcı bir elementtir. Elementin ilk satırındaki kolonlarına ekleyeceğiniz elementler sonraki satırlarda veri kaynağına bağlı olarak tekrar edecektir. Veri kaynağını seçtikten sonra satır/kolon içindeki diğer elementlere de ilgili veri tablosu içindeki alanları seçerek bağlayabilirsiniz. Elemente role bağlı yetkilendirmeler verebileceğiniz gibi görünürlüğünü de göster/gizle/koşullu seçenekleriyle ayarlayabilirsiniz.

Table Header: Table elementini düzenlemek, başlıkların düzenlendiği ve tanımlandığı alandır.
Column titles: Table elementinde sütun başlıklarını temsil eder.
Datasource: Table içindeki elementlerin besleneceği veri kaynağını seçtiğiniz alandır.
Show Header: Table başlık bölümü ön tanımlı olarak görünür halde gelir. Dilerseniz gizleyebilirsiniz.
Hide On Mobile Resolution: Mobil cihazlarda gizlemek veya değiştirmek için kullanılan bir özelliktir.
Fixed Header: Tablonun başlık kısmını sabit tutarak, sayfa kaydırıldığında başlıkların görünür kalmasını sağlar.
Editable: Tablodaki hücrelerin düzenlenebilir olup olmadığını belirler, böylece tablo verileri doğrudan düzenlenebilir.
Table Width Mode: Tablonun genişlik modunu ayarlar.
Global Search: Tablo içindeki tüm verilerde anahtar kelime araması yapmanıza olanak tanır. Büyük ve karmaşık veri setlerinde, belirli bilgileri bulmayı kolaylaştırır.
‍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 yada date column larının küçükten büyüğe yada büyükten küçüğe sıralanmasını sağlayablirsiniz.
Filtering: Table elementinde, kolonların veri tipine (String, Number ya da Date) göre farklı filtreleme seçenekleri sunar. Ö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. Filtreleme üç harften sonra aktif olur ve her harf girildiğinde arama otomatik olarak yenilenir, bu sayede daha dinamik ve hızlı bir filtreleme sağlar.
(i) Filtreleme seçenekleri, kolonun veri tipine özel olarak gelir ve yalnızca veri bağlantısı sağlanmış tablolarda çalışmaktadır.
Pagination: Table elementine tanımlanan veri tablosunda veriler listelenirken sayfalama ekleyebilirsiniz.
Page Size: Her sayfada gösterilecek satır sayısını belirler.
Show Size Changer: Sayfa boyutunu değiştirme imkanı tanır.
Size Changer Options: Sayfa boyutunu değiştirme seçeneklerini belirler. (Örneğin, 10, 20, 50 gibi satır sayıları olabilir.)
Column Chooser: Tablo üzerinde hangi kolonların gösterileceğini belirler.
Resizable Columns: Tablodaki kolonların yeniden boyutlandırılabilir olup olmadığını belirler.
Hide Table On Empty: Table elementine bağlanan veri tablosunun boş olduğu durumlarda tablosunun gizlenmesini sağlayabilirsiniz.
Striped: Tablodaki satırların alternatif arka plan renkleriyle şeritli şekilde gösterilmesini sağlar.
Striped Color: Şeritli satırların arka plan rengini belirler.
Row Hover Background Color: Satır üzerine geldiğinde satır arka plan renginin değişmesini sağlayabilirsiniz.
Insert Row Active: Yeni satır ekleme işleminin aktif olup olmadığını belirler.
Insert Row Position: Yeni eklenen satırın hangi pozisyonda (en üstte ya da en altta) yer alacağını belirler.
Show No Data Found: Tabloda veri olmadığında “Veri Bulunamadı” mesajının gösterilmesini sağlar.
No Data Found Message: Kuikada yer alan Table elementine dinamik bir veri bağlanmadığı durumlarda ön izleme ve çalışma anında görüntülemek için yer tutucu mesaj ekleyebilirsiniz.
No Data Found Image: Kuikada yer alan 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.
Multi Select: Tablo içindeki birden fazla satırı seçmenizi sağlar. Topluca satırları düzenleyebilir, silebilir veya diğer işlemleri uygulayabilirsiniz.
Selected Values: Tabloda seçilen satırların değerlerini depolar.‍
Selected Row Color: Seçilen satırların arka plan rengini belirler.

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;

Ekranda yer alan Table elementini seçin.
Properties panelini açın.
TableRow altında yer alan Add EditableTableColumn’a tıkladığınızda kolon otomatik olarak bir Label elementi ile birlikte gelecektir.

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;

Table elementini seçin.
Properties paneli Datasources alanında ekrana Initial Action olarak eklediğiniz aksiyonlar içerisinden veri kaynağı olarak kullanmak istediğiniz aksiyonu seç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;

Editable Table Column içerisinde yer alan Label elementini seçin.
Properties panelinde Value alanında bulunan Field to Display parametresini ile gösterilmek istenen veriyi seçin.
EditMode Component parametresi aracılığıyla tabloda düzenleme yaparken kullanmak istediğiniz elementi seçin. Örneğin, bir isim girmek için TextInput elementini kullanabilirken, bir departman seçimi için Selectbox elementini kullanabilirsiniz.

Ö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.

Öncelikle listeleme işlevini sağlayacak aksiyonu Initial Action olarak ekrana ekleyin.
Ardından ekrana bir Table elementi ekleyin.
Table elementi seçiliyken Properties paneli aracılığıyla Add Action> On Row Edit Finished > Managed DB > Save Record seçimini yapın.
Save Record aksiyonu altında ilgili parametre tanımlama işlemini yapın. Örnek bir tanımlama işlemi Görsel 4’te yapılmıştır.

Save Record Aksiyonu Parametre Tanımlama

Save Record aksiyonunu ekledikten sonra Table Elementi seçiliyken Add Action>On Row Edit Finished adımlarını takip ederek listeleme işlevini sağlayacak aksiyonu ekleyin.
Ardından kolonlarda yer alan Label elementlerini seçerek Properties paneli, Value alanı aracılığıyla değer tanımlama işlemini gerçekleştirin.

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.

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.

Adım 1: Uygulamanıza Table Elementi Ekleyin

Kuika platformuna giriş yaptıktan sonra “Apps” ekranından çalışacağınız projeyi açın.

“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.

Properties panelinden “Searchable, Filtering ve Column Chooser” ayarlarını yapılandırın.

Searchable: Tabloda arama yapmanıza izin verir.
Filtering: Tablo verilerinizi filtrelemenizi sağlar.
Column Chooser: Kolonları gizlemenize veya göstermenize izin verir.

Ardından sol üst köşede bulunan “RUN” butonuna tıklayın.

Adım 2: Export Table Configs Aksiyonu ile Managed DB’ye Tablonun Kaydedilmesi

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.

Adım 3: Import Table Configs Aksiyonu ile Konfigürasyonunun Yüklenmesi

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.