Kuika'nın Table elementi, uygulamalarda verileri düzenli ve anlaşılır bir şekilde tablo düzeninde görüntülemeyi sağlar. Kullanıcılar, satır ve sütunlar aracılığıyla verileri inceleyebilir ve yönetebilir. Table elementi, veri listeleri, raporlar veya bilgi sunumları için kullanılır. Bu kılavuzda, Table elementini nasıl ekleyebileceğinizi, yapılandırabileceğinizi ve özelleştirebileceğinizi öğreneceksiniz.
Bu eğitim içeriği aşağıdaki başlıklardan oluşur:
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.
Tablonun geneline ait işlevsellik, görünüm ve etkileşim ayarlarını kapsar.
Kolon seçiliyken çıkan özelliklerdir. Her biri kolonun görünümünü, işlevini veya davranışını kontrol eder.
Kolon başlığı seçildiğinde aktif hale gelir. Bu özellikler, kolonun başlık alanında düzenleme yapmanızı sağlar.
Inline Grid özelliği, Table elementine eklenen EditableTableColumn 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 EditableTableColumn eklemeniz gerekmektedir.
Table Elementine EditableTableColumn Ekleme
EditableTableColumn Kullanımı
EditableTableColumn’da Dinamik Veri Kullanımı
Editable Table Column İçerisinde Label Elementine Veri Bağlama
Örnek Editable Table Column Kullanımı
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.
Örnek Senaryo: Müşteri Adresi ve Müşteri Adının Düzenlenebilir Olarak Listelenmesi
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.
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ı
Bu ayar sayesinde, fare ile satırların üzerine gelindiğinde arka plan rengi değişecektir.
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.
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.
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.
Dışa Aktarma
İçe Aktarma
SQL Action Oluşturma
Collapse Düzeni
Master-Detail özelliğini kullanmak için aşağıdaki adımları izleyin:
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; //Usingleri eklemeyi unutmayın.
using Kuika.Common.Classes;
using Kuika.Common.Accessors;
namespace Kuika.ThirdPartyApisCollection
{
public class myClass
{
public static List<myList> returnSQLList(string connectionString /*
Kuika string parametre olarak verilmiş olan connectionString parametresini
otomatik olarak algılar ve doldurur */) //Root classımızı data seti olarak
tanımlayabilmek için List olarak döndürüyoruz.
{
List<myList> myListObj = new List<myList>(); //Aşağıda bulunan Class
tanımlarına göre obje yapısını oluşturuyoruz.
string getMasterCommand = @"SELECT * FROM MasterTable"; //Master
datamızı çekeceğimiz SQL sorgumuzu oluşturuyoruz.
var masterResult = KPersister.Fetch(connectionString,
getMasterCommand, null); //Kuika'nın kendi SQL Sorgusu çalıştırma fonksiyonunu
kullanıyoruz. null olarak gönderilen değer sorgu içerisindeki parametrelerdir.
foreach (var masterObject in masterResult.ResultList) //Master
sorgumuzun sonucunu döngü içine alıyoruz.
{
myList newObj = new myList();
newObj.objectName =
masterObject.GetValueByFieldName("ObjectName").ToString();
//GetValueByFieldName fonksiyonuyla action resultın içerisinden kolonları
okuyoruz. Çift tırnak içerisinde kolon ismi belirtilmektedir.
//Detay tablosunu çekerken Master tablosundaki objenin ID'sini
parametre olarak kullanmamız gerekiyor.
//Parametreyi kullanabilmek için yine Kuika'nın oluşturmuş
olduğu kSqlParameter Class'ından yardım alıyoruz.
var prms = new List<kSqlParameter>() {new kSqlParameter() {
Name = "masterId",
Value =
masterObject.GetValueByFieldName("Id").ToString()
}
};
string getDetailCommand = @"SELECT * FROM DetailTable WHERE
masterId = @masterId"; //Detay datamızı çekeceğimiz SQL sorgumuzu
oluşturuyoruz.
var detailResult = KPersister.Fetch(connectionString,
getDetailCommand, prms.ToArray()); //Kuika'nın kendi SQL Sorgusu çalıştırma
fonksiyonunu kullanıyoruz. Yukarıda tanımlamış olduğumuz prms değişkenini
ToArray() fonksiyonuyla birlikte kullanıyoruz.
newObj.nestedList = new List<myNestedList>(); //Nested objemizi
tanımlayabilmek için master objemizin içerisinde boş bir nested obje listesi
oluşturuyoruz.
foreach (var detailObject in detailResult.ResultList) //Sorgu
sonucunda dönen datayı işleyebilmek için yeni bir döngü oluşturuyoruz.
{
myNestedList nestedListObj = new myNestedList(); //Döngü
içerisindeki datayı toplayabilmek için uygun Class'ı kullanarak bir obje
oluşturuyoruz.
nestedListObj.test1 =
detailObject.GetValueByFieldName("Data1").ToString(); //Objenin parametrelerini
sorgu sonucunda dönen kolonlar ve datalarla eşleştiriyoruz.
nestedListObj.test2 =
detailObject.GetValueByFieldName("Data2").ToString();
nestedListObj.test3 =
detailObject.GetValueByFieldName("Data3").ToString();
newObj.nestedList.Add(nestedListObj); //Oluşturduğumuz
nested objeyi master objenin parametre listesine ekliyoruz.
}
myListObj.Add(newObj); //Oluşturduğumuz master objeyi root
listemize ekliyoruz.
}
return myListObj; //Oluşturmuş oluğumuz Class Objesini döndürüyoruz.}
}
public class myList //Root Class
{
public string objectName { get; set; }
public List<myNestedList> nestedList { get; set; } //Nested objeleri
tutmak için Nested Class list olarak belirtildi.
}
public class myNestedList //Nested Objects Class
{
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:
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;
namespace Kuika.ThirdPartyApisCollection
{
public class myClass
{
public static List<myList> returnMyList() //Root classımızı data seti
olarak tanımlayabilmek için List olarak döndürüyoruz.
{
List<myList> myListObj = new List<myList>(); //Aşağıda bulunan Class
tanımlarına göre obje yapısını oluşturuyoruz.
myList myListItem = new myList();myListItem.objectName = "testObj1";
List<myNestedList> nestedListObj = new List<myNestedList>();
myNestedList nestedListItem = new myNestedList();
nestedListItem.test1 = "a";
nestedListItem.test2 = "b";
nestedListItem.test3 = "c";
myNestedList nestedListItem2 = new myNestedList();
nestedListItem2.test1 = "d";
nestedListItem2.test2 = "e";
nestedListItem2.test3 = "f";
myNestedList nestedListItem3 = new myNestedList();
nestedListItem3.test1 = "g";
nestedListItem3.test2 = "h";
nestedListItem3.test3 = "i";
nestedListObj.Add(nestedListItem);
nestedListObj.Add(nestedListItem2);
nestedListObj.Add(nestedListItem3);
myListItem.nestedList = nestedListObj;
myListObj.Add(myListItem);
myList myListItem2 = new myList();
myListItem2.objectName = "testObj2";
List<myNestedList> nestedListObj2 = new List<myNestedList>();
nestedListObj2.Add(nestedListItem);
nestedListObj2.Add(nestedListItem2);
nestedListObj2.Add(nestedListItem3);
myListItem2.nestedList = nestedListObj2;
myListObj.Add(myListItem2);Unset
myList myListItem3 = new myList();
myListItem3.objectName = "testObj3";
List<myNestedList> nestedListObj3 = new List<myNestedList>();
nestedListObj3.Add(nestedListItem);
nestedListObj3.Add(nestedListItem2);
nestedListObj3.Add(nestedListItem3);
myListItem3.nestedList = nestedListObj3;
myListObj.Add(myListItem3); // Buraya kadar olan kısımda Class
üzerinden oluşturduğumuz objeyi, parametrelerini tanımlamış olduk.
return myListObj; //Oluşturmuş oluğumuz Class Objesini döndürüyoruz.
}
}
public class myList //Root Class
{
public string objectName { get; set; }
public List<myNestedList> nestedList { get; set; } //Nested objeleri
tutmak için Nested Class list olarak belirtildi.
}
public class myNestedList //Nested Objects Class
{
public string test1 { get; set; }
public string test2 { get; set; }
public string test3 { get; set; }
}
}
Ayarı yapılandırmak için:
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:
Bu adımları takip ederek, Area Chart elementini ihtiyaçlarınıza uygun şekilde yapılandırabilirsiniz.
Kuika, aşağıdaki sistem aksiyonlarını destekler: