Kuika's Table element allows applications to display data in an organized and understandable tabular layout. Users can examine and manage data through rows and columns. The Table element is used for data lists, reports or information presentations. In this guide, you will learn how to add, configure and customize the Table element.
This training content consists of the following topics:
Table element is a data repeater element. The elements you add to the columns in the first row of the element will repeat in the following rows depending on the data source. After selecting the data source, you can also link to other elements in the row/column by selecting the fields in the related data table.
It covers the functionality, appearance and interaction settings for the table in general.
Properties that appear when the column is selected. Each one controls the appearance, function or behavior of the column.
It becomes active when the column heading is selected. These properties allow you to edit the column's title field.
The Inline Grid property is used with EditableTableColumn added to the Table element and allows you to not only view the data in your table, but also edit and save it. To use this feature, you need to add EditableTableColumn to the Table element.
Add EditableTableColumn to Table Element
EditableTableColumn Usage
Using Dynamic Data in EditableTableColumn
Binding Data to Label Element in Editable Table Column
Example Editable Table Column Usage
On Row Edit Finished Usage
On Row Edit Finished is only meaningful with the Inline Grid property of Table. It is used to define the actions to be executed to add/update records to the database after completing row editing.
Example Scenario: Listing Customer Address and Customer Name as Editable
Thanks to the Inline Grid feature, you can not only view the data in the Table element, but also edit and save it. This feature adds dynamic editing and data saving functionality to your applications.
You can improve the user experience by adding a hover effect to the rows of the Table element. The hover effect allows the background color to change when the user hovers over a row.
Steps to Add Hover Effect
With this setting, the background color will change when the user hovers over the rows with the mouse.
Saving Table to Managed DB with Export Table Configs Action
Suppose you type the word you want to search for in the first column of the table and filter it.
In this case, the current state of the table, that is, the applied filters and column settings, is exported as a string in JSON format via the “Export Table Config” action and this data is saved in the “Tables” field in the Managed DB panel.
For example, you created a data table named “TableConfig” and added “Id” and “Json” columns to it. During the “Export” operation, the table JSON data is saved in this table.
Kuika's Clear Table Filtering Configs action, specific to the Table element, is used to reset the filtering settings applied to table data. This action removes any filtering operations that were previously performed, making all data visible again.
After completing these steps, all filtering operations performed on the Table element will be cleared and all data will be visible again.
Exporting
Importing
Creating SQL Action
Collapse Layout
To use the Master-Detail feature, follow these steps:
SQL Support with Master Detail Feature
Kuika platform does not support Master-Detail directly with SQL. However, you can manage the Master-Detail relationship using SQL queries. Below is an example C# code:
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 to add to the list.
using Kuika.Common.Classes;
using Kuika.Common.Accessors;
namespace Kuika.ThirdPartyApisCollection
{
public class myClass
{
public static List<myList> returnSQLList(string connectionString /*
The connectionString parameter given as a quika string parameter
automatically detects and fills */) //Root class as data set
we return it as List to be able to identify it.
{
List<myList> myListObj = new List<myList>(); //Class below
We create the object structure according to the definitions.
string getMasterCommand = @“SELECT * FROM MasterTable”; //Master
We are creating our SQL query where we will pull our data.
var masterResult = KPersister.Fetch(connectionString,
getMasterCommand, null); //Kuika's own SQL Query execution function
The value sent as null is the parameters in the query.
foreach (var masterObject in masterResult.ResultList) //Master
we loop the result of our query.
{
myList newObj = new myList();
newObj.objectName =
masterObject.GetValueByFieldName(“ObjectName”).ToString();
//GetValueByFieldName function to get the columns from the action result
reads. Column name is specified in double quotes.
When pulling the //Detail table, the ID of the object in the Master table
we need to use it as a parameter.
In order to use the //Parameter, again Kuika has created
we get help from the kSqlParameter Class.
var prms = new List<kSqlParameter>() {new kSqlParameter() {
Name = “masterId”,
Value =
masterObject.GetValueByFieldName(“Id”).ToString()
}
};
string getDetailCommand = @"SELECT * FROM DetailTable WHERE
masterId = @masterId”; //We are going to pull our detail data from our SQL query
we create
var detailResult = KPersister.Fetch(connectionString,
getDetailCommand, prms.ToArray()); //Run Kuika's own SQL Query
function. Set the prms variable we defined above to
We use it together with the ToArray() function.
newObj.nestedList = new List<myNestedList>(); //Nested object
an empty nested object list in our master object in order to define an empty nested object list.
we create it.
foreach (var detailObject in detailResult.ResultList) //Query
We create a new loop to process the data returned as a result.
{
myNestedList nestedListObj = new myNestedList(); //Loop
an object by using the appropriate Class to collect the data in it.
we create
nestedListObj.test1 =
detailObject.GetValueByFieldName(“Data1”).ToString(); //Parameters of the object
We match the columns and data returned as a result of the query.
nestedListObj.test2 =
detailObject.GetValueByFieldName(“Data2”).ToString();
nestedListObj.test3 =
detailObject.GetValueByFieldName(“Data3”).ToString();
newObj.nestedList.Add(nestedListObj); //We created
add the nested object to the parameter list of the master object.
}
myListObj.Add(newObj); //Root the master object we created
add it to our list.
}
return myListObj; //Return the Class Object we created.}
}
public class myList //Root Class
{
public string objectName { get; set; }
public List<myNestedList> nestedList { get; set; } //Nested objects
specified as Nested Class list to keep.
}
public class myNestedList //Nested Objects Class
{
public string test1 { get; set; }
public string test2 { get; set; }
public string test3 { get; set; }
}
}
Master-Detail Example Using Custom C#
You can also manage Master-Detail tables with Custom C# scripts. The following example shows how you can group detail data by creating a list of objects:
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 data set
to be able to identify it as List.
{
List<myList> myListObj = new List<myList>(); //Class below
We create the object structure according to the definitions.
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); // Up to this point Class
We have defined the object we created over the object, its parameters.
return myListObj; //Return the Class Object we created.
}
}
public class myList //Root Class
{
public string objectName { get; set; }
public List<myNestedList> nestedList { get; set; } //Nested objects
specified as Nested Class list to keep.
}
public class myNestedList //Nested Objects Class
{
public string test1 { get; set; }
public string test2 { get; set; }
public string test3 { get; set; }
}
}
