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.
Bu eğitim içeriği aşağıdaki başlıklardan oluşmaktadır:
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.
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.
Master-Detail özelliğini kullanmak için aşağıdaki adımları sırasıyla takip edebilirsiniz:
Tüm adımları eksiksiz tamamladığınızda Master-Detail tablonuz kullanıma hazır olacaktır.
Kuika Platform ve SQL Desteği
Kuika Platform, ne yazık ki SQL ile doğrudan Master-Detail özelliğini desteklememektedir. Ancak SQL sorguları ile bu süreci yönetmek için aşağıdaki örneği inceleyebilirsiniz.
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# tarafında Classlar aracılığıyla da yönetebilirsiniz. Bununla ilgili örnek bir görsel aşağıda sunulmuştur.
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; }
}
}
Uygulamanızın ekran ve elementlerinde, "Anonymous Access" ve "All Roles Access" yetkilendirme seçenekleri ile kullanıcı erişimini özelleştirebilirsiniz. "Anonymous Access" herhangi bir hesap bilgisi sorgulaması olmadan erişimi mümkün kılarken, "All Roles Access" ile kullanıcı hesap bilgileri doğrulanarak erişim sağlanır.
Element düzeyinde yetkilendirme için, ilgili elementi seçip Properties panelinden "Authorization" ayarlarını düzenleyerek, uygulamanızın güvenlik ve kullanıcı deneyimini yönetebilirsiniz.
Ekranların veya elementlerin görünürlüğünü ayarlamanıza olanak tanır. Elementler'de Visibility, belirli bir durum 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.
Elementleri düzenlenebilir hale getirmenize olanak tanır.
Elementlerinizi Styling Paneli ile özelleştirerek, web ve mobil uygulamalarınızda benzersiz ve etkileyici kullanıcı arayüzleri oluşturabilirsiniz.
Kuika, Arithmetic, Authorization, Condition, Device, Export, Geolocation, Invers, Local Storage, Multi Language, Navigation, Notification, Payment, UI Control, Process Administration, Process Automation, Trigger, Process Automation, Process Administration ve String Operations gibi sistem aksiyonlarını barındırmaktadır.
Sistem aksiyonlarının yanı sıra kendi oluşturduğunuz SQL aksiyonları da kullanabilirsiniz.
Elementlere aksiyon eklemek için sağ kenardaki Properties panelinden “+ADD ACTİON” butonunu kullanabilirsiniz.