1. Table Elementine Genel Bakış 

‍

Kuika'nın Table elementi, uygulamalarda verileri düzenli ve anlaşılır bir tablo yapısında görüntülemeyi sağlar. Kullanıcılar satır ve sütunlar üzerinden verileri inceleyebilir, karşılaştırabilir ve yönetebilir. Table elementi; veri listeleri, rapor ekranları, yönetim panelleri ve bilgi sunumları gibi birçok senaryoda etkili bir çözüm sunar.

Table elementi web ve mobil uygulamalarda desteklenmektedir. Mobil tarafta (Android & iOS) artık gelişmiş responsive tablo görünümü sayesinde kolonlar otomatik olarak ekrana uyum sağlar ve kullanıcı deneyimi optimize edilir. 

1.1. Sık Kullanım Senaryoları

• Kullanıcı, ürün, sipariş, görev, kayıt listeleri gibi veri tabanından gelen tabloları görüntüleme. 
• Filtreleme ve arama ile birlikte veri listeleme.
• Detay sayfasına yönlendirme: Bir satıra tıklayınca detay ekranına gitme. 
• Düzenleme & silme butonları ekleyerek CRUD işlemleri gerçekleştirme.
• Raporlama ekranları: Toplamlar, gruplandırmalar, kolon bazlı özetleme.
• Sayfalama (pagination) ile büyük veri setlerini bölerek gösterme.
• Mobil cihazlarda responsive tablo kullanımı.
• Satır bazlı renklendirme: Durumlara göre (ör. Onaylandı, Beklemede, Reddedildi) farklı renklerde satırlar.
• Tablo içinde buton, icon, badge, image gösterme.
• Kullanıcı yetkilendirmesine göre kolonları gizleme/gösterme.

2. Temel Özellikler

• Dinamik veri bağlama (Datasource): Table’a aksiyon veya datasource bağlanarak veri çekilebilir.
• Kolon yapılandırması: Label, field, format, width, alignment, formatter, visibility gibi ayarlar yapılabilir.
• Pagination desteği: Büyük veriler sayfalara bölünerek gösterilir.
• Kolon bazlı sıralama (sorting) özelliği desteklenir.
• Mobil responsive tablo: Mobilde kolonlar kart görünümünde listelenebilir.
• Farklı amaçlara uygun kolon tipleri: Metin, sayısal, tarih, ikon, buton, durum etiketleri vb.
• Koşullu görünürlük: Kolonlar Visibility ayarlarıyla gizlenebilir/gösterilebilir.

2.1. Table Elementi Özellikleri

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.

2.1.1. Table Özellikleri

Tablonun geneline ait işlevsellik, görünüm ve etkileşim ayarlarını kapsar.

• Data Source: Tablonun bağlı olduğu veri kümesini belirtir. 
• Show header:Tablonun başlıklarının gösterilip gösterilmeyeceğini belirler.
• Fixed header: Sayfa kaydırılsa bile başlıkların sabit kalmasını sağlar.
• Editable: Tablonun düzenlenebilir olup olmadığını belirler.
• Editable Always Active: Hücre düzenleme modunun sürekli açık olmasını sağlar.
• Table Width Mode: Tablo genişliğinin sabit mi yoksa içerik kadar mı olacağını belirler.

Global Search, Searchable, Sorter ve Filtering özellikleri yalnızca web uygulamalarda desteklenmektedir. 

• Global search: Tüm tablo verilerinde genel arama yapılabilmesini sağlar.
• Searchable: Sağ üstte arama kutusunun gösterilmesini sağlar.
• Should Search Onchange: Arama kutusuna yazdıkça anlık filtreleme yapılmasını sağlar.
• Search delay: Arama yapılmadan önce bekleme süresini belirler (milisaniye).
• Sorter: Kolonların sıralanmasını aktif eder.

Filtreleme seçenekleri, kolonun veri tipine özel olarak gelir ve yalnızca veri bağlantısı sağlanmış tablolarda çalışmaktadır.

• Filtering: Kolonlarda veri tipine göre filtreleme yapılmasına olanak tanır. 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. Çoklu filtreleme (multi filter) desteği ile, ilk koşul girildiğinde ikinci filtre alanı otomatik olarak görüntülenir ve tüm koşullarda (equals, not equals, greater than, vs.) kullanılabilir. 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. Filtering özelliği, Türkçe ve İngilizce karakter setleriyle uyumlu çalışır ve dil farklılıklarından kaynaklanan filtreleme sorunları yaşanmaz.
• Pagination: Verilerin sayfalara bölünmesini sağlar.
• Page size: Her sayfada gösterilecek satır sayısını belirler.
• Show Size Changer: Kullanıcının sayfa boyutunu değiştirmesini sağlar.
• Size Changer Options: Sayfa boyutu seçim seçeneklerini belirler (örneğin 10, 20, 50).
• Column chooser: Kullanıcının hangi kolonların görünüp görünmeyeceğini seçmesini sağlar.
• Resizable columns: Kolonların genişliğinin ayarlanabilmesini sağlar.
• Hide table on empty: Veri yoksa tablonun gizlenmesini sağlar.
• Striped: Satırların şeritli (çizgili) görünmesini sağlar.
• Striped color: Şeritli görünümdeki satırların arka plan rengini belirler.
• Row hover bg color: Satır üzerine gelindiğinde arka plan rengini değiştirir.
• Insert row active: Yeni satır ekleme özelliğini aktif eder.
• Insert row position: Yeni satırın en üstte mi, en altta mı ekleneceğini belirler.
• Show no data found: Veri yoksa "veri bulunamadı" mesajı gösterilir.
• No data found message: Bu mesajın içeriğini özelleştirmenizi sağlar.
• No data found image: Veri yokken gösterilecek görseli ayarlar.
• Multi select: Aynı anda birden fazla satır seçmeyi sağlar.
• Multi select Scope: Çoklu seçimin hücre mi, satır mı, kolon mu olacağını belirler.
• Selected values: Seçilen satırların değerlerini tutar.
• Selected Row Color: Seçilen satırın arka plan rengini belirler.
• Export: Tabloyu dışa aktarma (Excel, CSV) özelliğini aktif eder.

Web uygulamalarda, Table içindeki hücrelere Progress Bar veya Progress Circle sürükleyerek, satır bazlı ilerleme durumlarını görsel olarak gösterebilirsiniz.

2.1.2. Columns Özellikleri 

Kolon seçiliyken çıkan özelliklerdir. Her biri kolonun görünümünü, işlevini veya davranışını kontrol eder.

• Title: Kolon başlığı, kullanıcıya gösterilecek isimdir.
• Second Title: Kolon başlığının altında gösterilecek ikincil başlıktır.
• Default Data Field: Bu kolonda gösterilecek varsayılan veri alanıdır.
• Group: Kolonları başlıkta gruplamak için kullanılır.
• Group Bg Color: Grup başlığı arka plan rengini belirler.
• Group Font Color: Grup başlığı yazı rengini belirler.
• Title Bg color: Kolon başlığı arka plan rengini belirler.
• Special sorting format: Sıralama sırasında özel bir kurala göre işlem yapılmasını sağlar.
• Always Visible On Mobile Resolution: Mobilde bu kolonun her zaman görünür olmasını sağlar.
• Hide Filtering: Bu kolonda filtreleme yapılmasını engeller.
• Hide sorting: Bu kolonda sıralama yapılmasını engeller.
• Hide search: Bu kolonda arama kutusunu gizler.
• Footer Options: Bu kolona alt bilgi (toplam, ortalama vb.) eklenmesini sağlar.
• Footer formatter: Alt bilgiye özel biçimlendirme kurallarını tanımlar.
• Footer Option label: Alt bilgiye yazılacak başlığı/metni belirler.
• Footer Font Size: Alt bilgi yazı tipi boyutunu ayarlar.
• Footer Font Color: Alt bilgi yazı rengi.
• Footer Text Align: Alt bilgi yazı hizalaması (sol, sağ, orta).
• Footer Font Weight: Alt bilgi (footer) metninin kalınlık derecesini belirleyerek yazının daha vurgulu veya sade görünmesini sağlar.
• Exclude From Export: Bu kolonun dışa aktarıma dahil edilmesini engeller.
• Fixed: Kolonun sabitlenmesini sağlar (kaydırınca yerinde kalır). Fixed Column kullanılan tablolarda kolon genişlikleri doğru şekilde hesaplanır ve “Sometimes Visible / Hidden” senaryolarında kolon görünürlüğü stabil şekilde çalışır.
• Placeholder: Hücre düzenlenebilir ise, boşken gösterilecek yazıdır.

2.1.3. Title Özellikleri 

Kolon başlığı seçildiğinde aktif hale gelir. Bu özellikler, kolonun başlık alanında düzenleme yapmanızı sağlar.

• Column Titles: Tabloda sütun başlıklarını temsil eder. Genellikle ilk satırdaki başlıklardır.
• Hideo Mobile Resolution: Mobilde tablo başlıklarının gizlenmesini sağlar.
• Text direction: Kolon yazı yönünü belirler (soldan sağa / sağdan sola).

2.1.4. Table Elementinde Sorter Kullanımı

1. Table elementini ekleyin ve veri kaynağını bağlayın.

Table üzerinde Sorter özelliğini kullanmak için öncelikle tabloya veri bağlamak gereklidir. 

‍

2. Sağ kenardaki Properties panelinden Sorter özelliğini açın.
3. Kullanıcılar, sütun başlıklarındaki sıralama simgesine tıklayarak verileri artan veya azalan şekilde sıralayabilir.

2.1.5. Table Elementinde Inline Grid Kullanımı

Inline Grid özelliği, Table elementine eklenen Editable Table Column ile kullanılır ve tablonuzda verileri sadece görüntülemekle kalmaz, aynı zamanda düzenleyip kaydetmenizi sağlar. Bu özelliği kullanabilmek için Table elementine Editable Table Column eklemeniz gerekmektedir.

Table Elementine Editable Table Column Ekleme

1. Ekranda bulunan Table elementini seçin.
2. Properties panelini açın.
3. TableRow altında bulunan Add EditableTableColumn butonuna tıklayın.
   
   • Kolon otomatik olarak bir Label elementi ile birlikte eklenecektir.

Editable Table Column Kullanımı

• EditableTableColumn, standart Table Column'dan farklıdır. Tasarım sürecinde doğrudan düzenlenemez ve temel özelliklere sahiptir.
• Kolona dinamik veri bağlayabilir ve stil düzenlemelerini yapabilirsiniz.

Editable Table Column’da Dinamik Veri Kullanımı

1. Table elementini seçin.
2. Properties panelinde Datasources alanına gidin.
3. Ekrana Initial Action olarak eklediğiniz aksiyonlar arasından, veri kaynağı olarak kullanmak istediğiniz aksiyonu seçin.

Editable Table Column İçerisinde Label Elementine Veri Bağlama

1. Editable Table Column içerisinde bulunan Label elementini seçin.
2. Properties panelinde Value alanında bulunan Field to Display parametresinden gösterilmek istenen veriyi seçin.
3. Edit Mode Component parametresi aracılığıyla, düzenleme sırasında kullanılacak elementi belirleyin.
   
   • Örneğin, bir isim girişi için TextInput elementi, bir departman seçimi için Select Box elementi kullanılabilir.

Örnek Editable Table Column Kullanımı

• Editable Table Column'lardan oluşan bir Table elementinde, ilk satır düzenleme modunda görünebilir.
• Kolonlardaki elementlerin Property ve Styling ayarlarını yönetebilirsiniz.
• Uygulamayı önizleme veya yayına alma aşamasında, 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 aksiyon ile yeni değerleri kaydetmeniz gerekmektedir.

On Row Edit Finished Kullanımı

On Row Edit Finished, yalnızca Table'ın Inline Grid özelliği ile anlamlıdır. Satırı düzenlemeyi tamamladıktan sonra veritabanına kayıt eklemek/güncellemek için çalıştırılacak aksiyonları tanımlamak için kullanılır.

• On Row Edit Finished olayında, kayıt işlemi tamamlandıktan sonra tablonun veri kaynağı aksiyonunun tekrar çağrılması gerekmektedir.

Örnek Senaryo: Müşteri Adresi ve Müşteri Adının Düzenlenebilir Olarak Listelenmesi

1. Listeleme işlevini sağlayacak aksiyonu Initial Action olarak ekleyin.
2. Ekrana bir Table elementi ekleyin.
3. Table elementi seçiliyken, Properties panelinde aşağıdaki adımları takip edin:
   
   • Add Action → On Row Edit Finished → Managed DB → Save Record
   • Save Record aksiyonu altında, ilgili parametreleri tanımlayın.
4. Save Record aksiyonunu ekledikten sonra, On Row Edit Finished aksiyonunu tekrar ekleyerek, listeleme işlevini sağlayacak aksiyonu tanımlayın.
5. Kolonlarda bulunan Label elementlerini seçerek Properties panelindeki Value alanı aracılığıyla veri tanımlamalarını yapın.

Inline Grid özelliği sayesinde Table elementinde verileri sadece görüntülemekle kalmaz, aynı zamanda düzenleyip kaydedebilirsiniz. Bu özellik, uygulamalarınıza dinamik düzenleme ve veri kaydetme fonksiyonları kazandırır.

2.1.6. Mobilde Inline Edit (Satır İçi Düzenleme) Kullanımı

Table elementinde kullanılan Inline Grid yapısı artık mobil uygulamalarda (Android & iOS) da desteklenmektedir. Bu özellik, kullanıcıların tablo satırlarını doğrudan mobil cihaz üzerinden düzenlemesine olanak tanır.

1. Table Elementini Hazırlama

• Editable özelliğini aktif edin.
• Satır içi düzenleme için Add Editable Table Column ile düzenlenebilir kolon ekleyin.
• Sürekli düzenleme modu isteniyorsa Editable Always Active kullanılabilir.

2. EditableTableColumn Yapılandırması

EditableTableColumn içinde:

• Kolondaki veriyi göstermek için Value / Field to Display alanından veri bağlayın.
• Düzenleme sırasında kullanılacak bileşeni (TextInput, Selectbox vb.) Edit Mode Component alanından seçin.

Bu yapı, mobilde kullanıcı hücreye dokunduğunda uygun input’un açılmasını sağlar.

3. Kaydetme (Save Record) İşlemi

• Save Record mevcut ve inline edit ile uyumlu şekilde çalışır.
• Kullanıcı düzenlemeyi bitirdiğinde Save Record tetiklenir.
• “On Row Edit Finished” event’i şu an UI’da bulunmadığı için kullanılmaz.

Düzenlenen veriyi kaydetmek için:

1. Düzenlenen EditableTableColumn içindeki Edit Mode Component üzerinde
   Save Record aksiyonunu tanımlayın.
   
   
2. Kayıt işlemi başarılı olduğunda:
   On Success → listeleme aksiyonunu yeniden çağırın
   (ör. Initial Action).

Bu yöntem hem mobil hem web için doğru akıştır.

4. Mobilde Kullanıcı Akışı

Mobil cihazda inline edit şu şekilde çalışır:

• Kullanıcı düzenlemek istediği hücreye dokunur.
• EditMode Component aktif olur ve mobil klavye açılır.
• Kullanıcı değeri düzenler.
• Düzenleme tamamlandığında:
  
  • Done/Enter tuşuna basar veya
  • Hücrenin dışına dokunur.
• Bu işlem Save Record aksiyonunu tetikler.
• Tablonun veri kaynağı yenilenir ve güncel değer görünür.

5. Mobil Tasarım için Öneriler

• Kolon sayısını sınırlayın; mobil ekranlarda gereksiz kolonları gizleyin.
• Kritik kolonlarda Always Visible On Mobile Resolution özelliğini kullanın.
• Düzenlenebilir hücreleri görsel olarak ayırt etmek için hafif bir arka plan veya ikon ekleyebilirsiniz.

Table elementinde Inline Edit artık hem web hem de mobil uygulamalarda stabil şekilde çalışır. Kullanıcılar mobil cihazda satırları kolayca düzenleyebilir, Save Record ile kaydedebilir ve tabloyu anında güncelleyebilir.

2.1.7.Table Elementinde Hover Kullanımı 

Table elementinin satırlarına hover efekti ekleyerek kullanıcı deneyimini geliştirebilirsiniz. Hover efekti, kullanıcının bir satırın üzerine geldiğinde arka plan renginin değişmesini sağlar.

Hover Efekti Ekleme Adımları

1. Hover özelliği eklemek istediğiniz Table elementini seçin.
2. Properties panelini açın.
3. Row Hover BgColor seçeneğine tıklayın.
4. Açılan panelde, Color (Renk) seçeneğini kullanarak hover rengini belirleyin.

Bu ayar sayesinde, kullanıcı fare ile satırların üzerine geldiğinde arka plan rengi değişecektir.

2.1.8. Tablo Filtre Ayarlarını Kaydetme ve Geri Yükleme

1. Table elementini uygulamanıza ekledikten sonra sağ kenardaki 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.

2. Ardından sol üst köşede bulunan Preview butonuna tıklayın.

• Daha önce filtrelenmiş veya gizlenmiş kolonları kaydedebilirsiniz.
• Kaydedilen ayarlar, tablo tekrar açıldığında otomatik olarak geri yüklenir.
• Export Table Config aksiyonu ile JSON formatında dışa aktarabilirsiniz.
• Import Table Config aksiyonu ile daha önce kaydedilmiş ayarları tekrar yükleyebilirsiniz.

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. 

2.1.9. Table Elementinde Filtreleme Ayarlarını Sıfırlama 

Kuika’nın Table elementine özel Clear Table Filtering Configs aksiyonu, tablo verilerine uygulanan filtreleme ayarlarını sıfırlamak için kullanılır. Bu aksiyon, daha önce yapılmış filtreleme işlemlerini kaldırarak tüm verilerin tekrar görünür hale gelmesini sağlar.

Clear Table Filtering Configs aksiyonu, tablo sütunlarındaki verileri silmez, yalnızca filtreleri temizler.

1. Uygulamanıza eklediğiniz Table elementine tıklayın.
2. UI Design modülündeyken sağ kenardaki Properties panelini açın.
3. + ADD ACTION açılır menüsünden on Config Change → Export → Clear Table Filtering Configs seçimini yapın.
4. Daha önce yapılmış filtreleme işlemlerini kaldırmak için Select a Table alanından ilgili tabloyu seçin.

Bu adımları tamamladıktan sonra, Table elementinde yapılan tüm filtreleme işlemleri temizlenecek ve tüm veriler tekrar görünür hale gelecektir.

2.1.10. Tablo Verilerini Dışa ve İçe Aktarma

Dışa Aktarma

1. Table elementini seçin.

‍

2. +ADD ACTION menüsünden on Config Change → Export → Export Table Configs seçimini yapın.

3. Dışa aktarmak istediğiniz tabloyu seçin.
4. 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. 

İçe Aktarma

1. Table elementini seçin.

‍

2. +ADD ACTION menüsünden on Config Change → Export → Import Table Configs seçimini yapın.

3. İçeri aktarmak istediğiniz tabloyu belirleyin ve JSON ayarlarını yapılandırın.
4. 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. 

2.1.11. Tablo Ayarlarını Sıfırlama

1. Table elementini seçin.

2. +ADD ACTION menüsünden on Config Change → Export → Reset Table Configs seçimini yapın.

‍

3. Tüm ayarlar sıfırlanarak varsayılan hale getirilir.

2.1.12. Tablo Altındaki Verileri Gruplayarak Gösterme

1. Table elementini seçin. 
2. Table içerisine veri satırlarının altına, UI Design modülünde Elements panelinden Interactive kategorisindeki Collapse elementini ekleyin.
3. İlgili tablo için bir SQL Action oluşturun.

SQL Action Oluşturma

1. Sol panelde bulunan Actions başlığı yanındaki + ikonuna tıklayın.
2. Açılan menüden New SQL Action seçimini yapın.

3. SQL Editor aracılığıyla SQL sorgunuzu yazın ve CREATE butonuna tıklayın.
4. Kuika AI asistanından Generate with AI seçeneğini aktif hale getirerek öneriler alabilirsiniz.
5. Oluşturduğunuz aksiyonu sol panelde görüntüleyebilir, ismini değiştirebilir ve silebilirsiniz.

6. Düzenleme yapmak için aksiyon üzerine tıklayın ve Edit seçeneğini seçin.
7. Mevcut SQL sorgularını düzenleyerek Update butonu ile güncelleyebilirsiniz.
8. Aksiyonu silmek için Delete seçeneğini kullanın.

Collapse Düzeni

1. Collapse elementinde, gruplama yapılacak alanı belirleyin.
2. Örneğin, müşteri bilgilerini gruplamak istiyorsanız başlık olarak müşteri adını seçin.
3. Collapse içerisine, detay veriler için gerekli alanları ekleyin.
4. Tablonun her satırı bir müşteriyi temsil eder.
5. Satır genişletildiğinde, müşteri siparişlerinin detaylı listesi görünür hale gelir.

2.1.13. Table Elementinde Master-Detail Özelliği Kullanımı

Master-Detail özelliğini kullanmak için aşağıdaki adımları izleyin:

1. Sol kenardaki Elements panelinden Data kategorisinde bir Table elementi ekleyin.
2. İlgili alana ikinci bir Data Repeater kategorisi elementi sürükleyin.
3. Table içerisine, Datasource üzerinden dönen verilere uygun elementleri ekleyin.
4. Veri döndüren bir Action oluşturun ve bunu Page Init olayına bağlayın.
5. Master olarak kullanacağınız Table elementini seçin.
6. Datasource olarak oluşturduğunuz Action Result  seçin.

7. Detail için kullanacağınız Table elementini belirleyin.

8. Datasource olarak, Master tabloda bulunan verilerin içerisindeki ikinci listeyi belirleyin.

9. Diğer elementleri ihtiyacınıza göre düzenleyin.
10. Tüm adımları tamamladıktan sonra Master-Detail tablonuz kullanıma hazır olacaktır.

Kuika platformu doğrudan SQL ile Master-Detail özelliğini desteklememektedir. Ancak SQL sorguları ile bu süreci yönetmek mümkündür.

Master Detail Özelliği ile SQL Desteği

Kuika platformu doğrudan SQL ile Master-Detail özelliğini desteklememektedir. Ancak SQL sorgularını kullanarak Master-Detail ilişkisini yönetebilirsiniz. Aşağıda örnek bir C# kodu bulunmaktadır:

using Newtonsoft.Json;
using RestSharp;
using System;
using System.Collections.Generic;
using System.Data;
using Microsoft.Data.SqlClient;
using System.Linq;
using Kuika.Common.Helpers;
using Kuika.Common.Settings;
using Kuika.Common.Classes;
using Kuika.Common.Accessors;

namespace Kuika.ThirdPartyApisCollection
{
    public class myClass
    {
        public static List<myList> returnSQLList(string connectionString)
        {
            List<myList> myListObj = new List<myList>();
            string getMasterCommand = "SELECT * FROM MasterTable";
            var masterResult = KPersister.Fetch(connectionString, getMasterCommand, null);

            foreach (var masterObject in masterResult.ResultList)
            {
                myList newObj = new myList();
                newObj.objectName = masterObject.GetValueByFieldName("ObjectName").ToString();
                var prms = new List<kSqlParameter>() 
                {
                    new kSqlParameter() { Name = "masterId", Value = masterObject.GetValueByFieldName("Id").ToString() }
                };
                string getDetailCommand = "SELECT * FROM DetailTable WHERE masterId = @masterId";
                var detailResult = KPersister.Fetch(connectionString, getDetailCommand, prms.ToArray());

                newObj.nestedList = new List<myNestedList>();
                foreach (var detailObject in detailResult.ResultList)
                {
                    myNestedList nestedListObj = new myNestedList();
                    nestedListObj.test1 = detailObject.GetValueByFieldName("Data1").ToString();
                    nestedListObj.test2 = detailObject.GetValueByFieldName("Data2").ToString();
                    nestedListObj.test3 = detailObject.GetValueByFieldName("Data3").ToString();
                    newObj.nestedList.Add(nestedListObj);
                }
                myListObj.Add(newObj);
            }
            return myListObj;
        }
    }
    
    public class myList
    {
        public string objectName { get; set; }
        public List<myNestedList> nestedList { get; set; }
    }
    
    public class myNestedList
    {
        public string test1 { get; set; }
        public string test2 { get; set; }
        public string test3 { get; set; }
    }
}

Custom C# Kullanımıyla Master-Detail Örneği

Master-Detail tablolarını Custom C# kodlarıyla da yönetebilirsiniz. Aşağıdaki örnek, bir nesne listesi oluşturarak detay verileri nasıl gruplayabileceğinizi gösterir:

‍

public static List<myList> returnMyList()
{
    List<myList> myListObj = new List<myList>();
    myList myListItem = new myList { objectName = "testObj1" };
    myListItem.nestedList = new List<myNestedList>
    {
        new myNestedList { test1 = "a", test2 = "b", test3 = "c" },
        new myNestedList { test1 = "d", test2 = "e", test3 = "f" },
        new myNestedList { test1 = "g", test2 = "h", test3 = "i" }
    };
    myListObj.Add(myListItem);
    return myListObj;
}

Bu yöntemle Custom C# kodlarıyla Master-Detail tablolarınızı yönetebilir ve verilerinizi optimize edebilirsiniz.

Bu kılavuz, Kuika'nın Table elementini nasıl kullanabileceğinizi detaylı bir şekilde açıklamaktadır. Table elementini etkili bir şekilde yapılandırarak kullanıcı deneyimini geliştirebilir ve verilerinizi daha düzenli bir şekilde yönetebilirsiniz.

2.1.14. Table Elementine Eklenebilen Aksiyonlar

Table elementi, kullanıcı etkileşimlerine göre aksiyon tetikleyebilen gelişmiş bir listedir. Tablo üzerinde yapılan işlemler sonucunda belirli olaylar (events) otomatik olarak çalıştırılabilir. Bu aksiyonlar, satır seçimi, düzenleme, ekleme, çift tıklama, yapılandırma değişikliği gibi etkileşimleri yönetmek için kullanılır.

Table elementini seçtiğinizde sağ panelde yer alan ADD ACTION butonu üzerinden aşağıdaki tetikleyiciler eklenebilir:

onClick

Kullanıcı bir tablo satırına tek tıkladığında tetiklenir.

Kullanım Senaryoları:

• Satır detaylarını açmak
• Seçilen satırın ID’sine göre başka bir sayfaya yönlendirmek
• Bir modal açarak ilgili kaydı göstermek
• Tabloyu başka bir component ile senkronize etmek

Bu tetikleyici her tıklamada seçilen satırın verilerini Current olarak sağlar.

onRowEditFinished

Kullanıcı bir satırdaki düzenlemeyi tamamladığında tetiklenir. (Inline Edit / EditableTableColumn kullanıldığında anlamlıdır.)

Kullanım Senaryoları:

• Düzenlenen veriyi Save Record aksiyonuyla veritabanına kaydetmek
• Güncelleme sonrasında tabloyu yenilemek
• Düzenleme sonrası doğrulama işlemleri yapmak

onConfigChange

Kullanıcı tablo yapılandırmasını değiştirdiğinde tetiklenir.

Bu değişiklikler şunları kapsar:

• Kolon sıralaması
• Kolon gizleme / gösterme (ColumnChooser)
• Filtre değişiklikleri
• Arama alanı değişiklikleri

Kullanım Senaryoları:

• Kullanıcının tablo ayarlarını (örn. filtre & kolon düzeni) Local Storage’a kaydetmek
• Kişiye özel tablo şablonu oluşturmak
• Oturum bazlı tablo görünümü yönetmek

onRowDoubleClick

Kullanıcı bir tablo satırına çift tıkladığında tetiklenir.

Kullanım Senaryoları:

• Satır detaylarını hızlıca açmak
• Düzenleme ekranına yönlendirmek
• Modal içinde kaydın tüm bilgilerini göstermek
• Yönetim ekranlarında hızlı düzenleme akışı oluşturmak

Bu tetikleyici özellikle masaüstü uygulamalarda yaygın kullanılır.

onSelectedValuesChange

Kullanıcı satırları seçtiğinde veya seçimleri değiştirdiğinde tetiklenir. (Multiselect aktifse birden fazla satırı kapsar.)

Kullanım Senaryoları:

• Seçili satırlara toplu işlem uygulamak (silme, güncelleme, export vb.)
• Seçilen değerleri başka bir elemente aktarmak
• Dashboard benzeri ekranlarda bağlı grafikleri güncellemek

SelectedValues parametresi ile birlikte çalışır.

onInsertRowFinished

Kullanıcı tabloya yeni bir satır eklemeyi tamamladığında tetiklenir. (InsertRowActive aktif olmalıdır.)

Kullanım Senaryoları:

• Yeni kaydı Save Record ile veritabanına eklemek
• Kaydın eklenmesinden sonra tabloyu yenilemek
• Satır ekleme sonrası doğrulama veya loglama işlemleri yapmak

Özellikle CRUD yapılarında kullanılabilir.

Aksiyon Kullanımı ile İlgili Öneriler

• Inline edit kullanıldığında onRowEditFinished mutlaka bir Save Record aksiyonu ile desteklenmelidir.
• Kullanıcı özel tablo görünümü oluşturulmak isteniyorsa onConfigChange tetikleyicisi kullanılabilir.
• Çoklu seçim gerektiren ekranlarda onSelectedValuesChange ile toplu işlem akışı kurulabilir.
• Web uygulamalarında kullanıcı alışkanlığı gereği çift tıklama davranışı için onRowDoubleClick önerilir.
  

3. Table Elementi Nasıl Kullanılır? 

Bu bölümde Table elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.

‍

Senaryo: Fatura Listesi

Bir iş yönetimi veya muhasebe uygulamasında, kullanıcıların oluşturulan faturaları kolayca takip edebilmesi için tablo tabanlı bir fatura listesi kullanılır. Bu liste, her faturaya ait temel bilgileri tek bir ekranda düzenli ve okunabilir bir biçimde sunarak kullanıcının fatura durumunu hızlıca analiz etmesini sağlar.

Fatura listesinde; fatura numarası, fatura tarihi, alıcı firma bilgisi, fatura durumu, tutar ve para birimi gibi kritik alanlar sütunlar halinde gösterilir. Her satır, tek bir faturayı temsil edecek şekilde yapılandırılmış olup, faturaya ait logo veya ikon bilgisi görsel destek olarak satırın başında konumlandırılır.

Kullanıcı, liste üzerinden faturaları aşağı doğru kaydırarak inceleyebilir, sütun başlıklarını kullanarak sıralama ve filtreleme işlemleri gerçekleştirebilir. Bu yapı sayesinde ödenmiş ve gecikmiş faturalar kolayca ayırt edilebilir ve finansal durum hızlıca değerlendirilebilir.

Senaryoda:

• Fatura listesi, tablo yapısı içerisinde satır bazlı olarak sunulur.
• Her satırda sırasıyla fatura numarası, fatura tarihi, alıcı firma adı, fatura durumu, tutar ve para birimi bilgileri gösterilir.
• Satırın sol bölümünde yer alan logo veya ikon, ilgili firmayı görsel olarak temsil eder.
• Fatura durumu alanı, “Paid” ve “Overdue” gibi durumları net bir şekilde ayırt edilebilir biçimde gösterir.
• Kullanıcı, liste üzerinden faturalar arasında karşılaştırma yapabilir ve özet bilgilere tek bakışta erişebilir.

Adım 1 - Veri Kaynağı Oluşturma

DataSources modülünde tablo oluşturma: 

• Datasources modülüne gidin. 
• Ardından Tables sekmesine gidin.‍
• "Invoices" adında yeni tablo oluşturun.

• Önemli Alan adları:
  
  • InvoiceNo: Faturanın benzersiz numarasını ifade eder. Liste ve tablo görünümlerinde kullanıcıya gösterilen ana referans bilgisidir ve faturanın hızlıca ayırt edilmesini sağlar.
  • InvoiceDate: Faturanın oluşturulduğu veya kesildiği tarih bilgisini tutar. Kullanıcı, faturaları tarih bazlı sıralamak ve dönemsel karşılaştırma yapmak için bu alanı kullanır.
  • RecipientName: Faturanın düzenlendiği alıcı firma veya müşteri adını belirtir. Fatura listesinde kimin adına kesildiğini net bir şekilde gösterir.
  • RecipientLogoUrl: Alıcı firmaya ait logo veya temsil görselinin URL bilgisini içerir. Liste satırlarında görsel destek sağlayarak faturaların daha kolay ayırt edilmesini sağlar.
  • Status: Faturanın güncel durumunu ifade eder (ör. Paid, Overdue, Draft). Kullanıcının ödeme durumunu hızlıca analiz etmesine yardımcı olan bilgilendirici bir alandır.
  • Amount: Faturaya ait toplam tutarı belirtir. Kullanıcıya sayısal ve karşılaştırılabilir bir değer sunarak finansal durumu değerlendirmesini sağlar.
  • Currency: Fatura tutarının hangi para birimiyle oluşturulduğunu ifade eder (ör. TRY, USD, EUR). Çoklu para birimi kullanılan senaryolarda tutarların doğru yorumlanmasını sağlar.

Adım 2 - Gerekli Aksiyonları Tanımlama

Arayüzde verileri göstermek ve veri eklemek için: 

• İki aksiyon tanımlamanız gerekir.
• Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.

• Örnek Verileri Ekleyen Aksiyon (InsertInvoices): Uygulamayı örnek verilerle test etmek için aşağıdaki SQL aksiyonunu ekleyin ve TEST butonuna basın.

INSERT INTO Invoices
(
    Id,
    InvoiceNo,
    InvoiceDate,
    RecipientName,
    RecipientLogoUrl,
    Status,
    Amount,
    Currency
)
VALUES
(
    NEWID(),
    'AXZ-177',
    CAST('2022-06-07' AS DATETIMEOFFSET),
    'Figma Inc.',
    'https://simpleicons.org/icons/figma.svg',
    'Paid',
    351.02,
    'USD'
),
(
    NEWID(),
    'AXZ-922',
    CAST('2022-06-05' AS DATETIMEOFFSET),
    'Dribbble',
    'https://simpleicons.org/icons/dribbble.svg',
    'Overdue',
    710.68,
    'USD'
),
(
    NEWID(),
    'AXZ-703',
    CAST('2022-06-04' AS DATETIMEOFFSET),
    'Youtube',
    'https://simpleicons.org/icons/youtube.svg',
    'Paid',
    778.35,
    'USD'
),
(
    NEWID(),
    'AXZ-883',
    CAST('2022-06-02' AS DATETIMEOFFSET),
    'Spotify',
    'https://simpleicons.org/icons/spotify.svg',
    'Overdue',
    490.51,
    'USD'
),
(
    NEWID(),
    'AXZ-798',
    CAST('2022-06-02' AS DATETIMEOFFSET),
    'Discord',
    'https://simpleicons.org/icons/discord.svg',
    'Paid',
    275.43,
    'USD'
),
(
    NEWID(),
    'AXZ-154',
    CAST('2022-06-01' AS DATETIMEOFFSET),
    'Github',
    'https://simpleicons.org/icons/github.svg',
    'Paid',
    105.55,
    'USD'
);

Uygularken Invoices kısmını silip tekrar Invoices yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

• Verileri Sağlayan Aksiyon (GetInvoices):

SELECT * FROM Invoices;

Uygularken Invoices kısmını silip tekrar Invoices yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

Adım 3 - Initial Action Ekleme

Başlangıçta anasayfada: 

• UI Design modülünü açın.
• Sayfada Add Action > Initial Action > Custom > Managed Db > GetInvoices aksiyonunu ekleyin.

Adım 4 - Element Ekleme ve Stil Düzenleme

• Sol yan panelden Elements > Data > Table elementini sayfaya sürükleyip bırakın.

• Arka plan rengini Table > Styling > Fill > White Background olarak ayarlayın.

• Table elementi seçiliyken Table > Properties > Table > En son Title alanında en aşağıda yer alan Title alanını yukarı tuşuna basıp ilk sıraya alın.

• Sütun adınını Table > Properties > Title alanından boş bırakın.

• Tablo içerisindeki Table Column alanına tıklayın. TableTemplateColumn > Styling > Layout > Align adımlarını izleyerek dikey ve yatay hizalamayı “Ortala” olarak ayarlayın.

• İçerisine Elements > Display > Image elementini sürükleyip bırakın.
• Image elementinde Image > Styling > Style > Width ve Height değerlerini 32 px olarak ayarlayın.

• Kenarları için Image > Styling > Border > Style > Fully Rounded olarak seçin.

• Table elementine tıklayın. İkinci title sütununu seçin Table > Properties > TableRow > Title başlık adını "No" olarak adlandırın.

‍

Table elementine ulaşmak için aşağıda bulunan breadcrumb’ı kullanabilirsiniz. Table elementine tıklamanız yeterlidir.

• Yeni sütun ekleyebilmek için Table > Properties > Table > TableRow > TableDefaultColumn alanından yeni sütun oluşturun.

• Yeni title sütununu seçin Table > Properties > TableRow > Title başlık adını “Date” olarak adlandırın.

• Benzer şekilde Table > Properties > Table > TableRow > TableDefaultColumn alanından dört yeni sütun daha ekleyin. Sütun adları sırasıyla “Recipient”, “Status”, “Amount” ve “Currency” olacaktır.

• Table elementinde veri kaynağını Table > Properties > DataSource > GetInvoices olarak ayarlayın.

• Tabloda arama yapabilmek için Table > Properties > GlobalSearch alanını açık hale getirin.

• Değişiklikler olduğunda Table > Properties > ShouldSearchOnChange alanını açık hale getirin.

• Sıralama için Table > Properties > Sorter alanını açık hale getirin.

• Filtreleme için Table > Properties > Filtering alanını açık hale getirin.

• Sütun tercihi yapabilmek için Table > Properties > ColumnChooser alanını açık hale getirin.

• Son olarak Excel dosyası olarak çıktı alabilmek için Table > Properties > Export alanını açık hale getirin.

Adım 5 - Element Ayarlarının Yapılandırılması 

Sayfaya eklenen initial aksiyonun elementlere bağlantısı:

• Tablo içerisinde ilk sütunda bulunan herhangi bir Image elementine tıklayın. Image > Properties > Value > Field to display > RecipientLogoUrl olarak ayarlayın.

• No adındaki ikinci sütunda herhangi bir Label elementine tıklayın. Label > Properties > Value > Field to display > InvoiceNo olarak ayarlayın.

• Date adındaki üçüncü sütunda herhangi bir Label elementine tıklayın. Label > Properties > Value > Field to display > InvoiceDate olarak ayarlayın.

• Recipient adında dördüncü sütunda herhangi bir Label elementine tıklayın. Label > Properties > Value > Field to display > RecipientName olarak ayarlayın.

• Status adında dördüncü sütunda herhangi bir Label elementine tıklayın. Label > Properties > Value > Field to display > Status olarak ayarlayın.

• Amount adında dördüncü sütunda herhangi bir Label elementine tıklayın. Label > Properties > Value > Field to display > Amount olarak ayarlayın.

• Currency adında dördüncü sütunda herhangi bir Label elementine tıklayın. Label > Properties > Value > Field to display > Currency olarak ayarlayın.

• Son durumda beklenen yapı aşağıdaki gibidir.

Benzer yapıyı daha hızlı uygulayabilmek için sol yan panelde yer alan Action Tree alanına tıklayarak GetInvoices initial action’ını sayfaya sürükleyip bırakabilirsiniz.

‍

Örnek senaryoda RecipientLogoUrl sütunu kaldırılarak yerine bir TableTemplateColumn eklenmiştir. Bu alanın içerisine Image elementi ekleyip gerekli görsel düzenlemeleri yapmanız ve benzer Table Properties ayarlarını uygulamanız yeterlidir.

Preview:

Uygulama test edildiğinde, faturaların tablo yapısı içerisinde satır bazlı olarak listelendiği bir Fatura Listesi ekranı görüntülenir. Her satırın sol bölümünde ilgili firmayı temsil eden logo yer alırken; devamında sırasıyla fatura numarası, fatura tarihi, alıcı firma adı, fatura durumu, tutar ve para birimi bilgileri düzenli ve okunabilir bir şekilde sunulur.

Kullanıcı, listeyi aşağı doğru kaydırarak faturaları inceleyebilir ve Paid ile Overdue durumlarına sahip faturaları tek bakışta kolayca ayırt edebilir. Tablo yapısı, sütun başlıkları üzerinden sıralama ve filtreleme işlemlerini destekleyerek faturalar arasında hızlı karşılaştırma yapılmasını sağlar.

Arama alanına örneğin “ov” ifadesi girildiğinde, Overdue durumuna sahip faturalar anında filtrelenerek listelenir. Bu sayede kullanıcı, gecikmiş faturaları hızlıca görüntüleyebilir ve ilgili kayıtlara kolaylıkla ulaşabilir.

Filtreleme işlemi sonrasında Export butonu kullanılarak dışa aktarma alındığında, ekranda listelenen veriler aynı yapı ve içerik korunarak Excel dosyası olarak indirilir. İsteğe bağlı olarak dosyada yer alması istenmeyen sütunlar çıkarılabilir. Bu özellik sayesinde kullanıcı, filtrelenmiş fatura verilerini raporlama veya paylaşım amacıyla pratik bir şekilde dışa aktarabilir.

4. Ortak Özellikler (Properties)

Table elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:

• Authorization (Yetkilendirme) Ayarları
• Visibility (Görünürlük)
• Editability (Düzenlenebilirlik)
• Style Panel (Stil Ayarları)

5. Kullanım Tavsiyeleri (Best Practices)

Veri tablolarının doğru yapılandırılması hem performans hem de kullanıcı deneyimi açısından önemlidir. Table elementini kullanırken aşağıdaki önerilere dikkat edilmelidir:

• Veri tiplerini doğru kullanın. Kolonlara bağlanan alanların veri tipleri doğru değilse (ör. sayısal kolonun string bağlanması), sıralama, filtreleme ve arama özellikleri hatalı çalışabilir.
• Filtreleme (Filtering) özelliğini verimli kullanın. Filtre seçenekleri veri tipine göre otomatik gelir. Büyük veri setlerinde gereksiz filtre tiplerini kapatmak performansı artırır.
• Arama (Searchable) kullanımında Search Delay değerini optimize edin. Çok düşük değerlerde gereksiz aksiyon tetiklenebilir; çok yüksek değerlerde kullanıcı deneyimi yavaşlar.
• Kolon genişliklerini gerektiğinde kullanıcıya bırakın. Resizable Columns özelliği aktif edilerek kullanıcıların tabloyu kendi ihtiyaçlarına göre düzenlemesi sağlanabilir.
• Çok fazla kolonu olan tablolarda kolon gruplama (Group) kullanın. Hem masaüstü hem mobilde daha düzenli ve anlaşılır bir görünüm sağlar.
• Satır içi düzenleme (Inline Edit) kullanıyorsanız kayıt akışını doğru yönetin. Düzenleme sonrası mutlaka Save Record aksiyonunu tetikleyin ve veri kaynağını yenileyin.
  
• Satırlara hover efekti ekleyin. Row Hover BgColor kullanarak satır üzerine gelindiğinde vurgulama yapılması tablo okunabilirliğini artırır.
• MultiSelect kullanıyorsanız seçili satırlar için anlamlı arka plan rengi belirleyin. Seçili satırların net şekilde ayırt edilebilmesi kullanıcı deneyimini geliştirir.

6. Kısıtlamalar

Table elementini kullanırken aşağıdaki sınırlamalar dikkate alınmalıdır:

• Veri kaynağı tanımlanmadan tablo çalışmaz. Datasource bağlı değilse kolonlar görünür ancak satırlar listelenmez.
• Filtering yalnızca veri kaynağı bağlı olduğunda çalışır. Statik içerik içeren tablolarda filtre seçenekleri aktif olmaz.
• Sıralama (Sorter) veri tipi hatalarında çalışmayabilir. Tarih, sayı veya metin formatı yanlış olduğunda sıralama işlemleri hatalı sonuç verebilir.
• Inline Edit yalnızca EditableTableColumn ile kullanılabilir. Normal kolonlarda düzenleme yapılamaz; düzenlenebilir hücre için mutlaka EditableTableColumn seçilmelidir.
• onRowEditFinished yalnızca inline edit aktifse tetiklenir. Düzenlenebilir kolon yoksa bu event çalışmaz.
• Filtering üç karakter sonrası aktif olur. Daha az karakterle arama tetiklenmez; bu durum kullanıcı alışkanlıklarına göre farklılık yaratabilir.
• Column Chooser, sadece web tarafında tam desteklidir. Mobil arayüzde kolon seçimi sınırlı olabilir.