Table

1. After logging in to the Kuika platform, open the project you will work on from the “Apps” screen.

2. In the “UI Design” (1) module, drag and drop the Table element (4) under the “Data” (3) category from the “Elements” (2) panel on the left side.

You can add the Table element from the Elements panel to the screen by drag and drop. If you drag it to an empty space on the screen, it will be added with the Row element. If you drag it into a Column, you will add only the Table element.

You cannot use Header, Footer, Content Menu, Carousel, Horizontal Grid, Pagination elements as Child elements in Table element which is a Data element.

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 connect to other elements in the row/column by selecting the fields in the related data table. You can give role-based authorizations to the element and set its visibility with show/hide/conditional options.

• Table Header: This is the area where the headers are edited and defined to organize the Table element.
• Column titles: Represents the column titles in the Table element.
• Datasource: It is the area where you select the data source from which the elements in the Table will be fed.
• Show Header: Table header section is visible by default. You can hide it if you wish.
• Fixed Header: Keeps the header part of the table fixed so that the headers remain visible when the page is scrolled.
• Editable: Determines whether the cells in the table are editable or not, so that the table data can be edited directly.
• Table Width Mode: Sets the width mode of the table.
• Global Search: Allows you to perform a keyword search on all data within the table. In large and complex data sets, it makes it easier to find specific information.
• ‍Searchable: When you activate the Searchable feature, an input element is added to the top right of the Table element, allowing you to search within the table.
• Sorter: You can sort the string, number or date columns in descending order or ascending order.
• Filtering: In the Table element, it offers different filtering options according to the data type of the columns (String, Number or Date). For example, when one of the options such as contains, equals, begins with is selected for String columns, a column-based filter can be applied according to this option. The options are specific to the column type. Filtering is active after three letters and the search is automatically refreshed each time a letter is entered, thus providing a more dynamic and faster filtering.

The filtering options are specific to the column's data type and only work on tables with a data connection.

Global Search, Searchable, Sorter and Filtering features are only supported in web applications.

• Pagination: You can add pagination when listing data in the data table defined in the Table element.
• Page Size: Determines the number of rows to be displayed on each page.
• Show Size Changer: Allows you to change the page size.
• Size Changer Options: Determines the options to change the page size. (For example, the number of rows can be 10, 20, 50, etc.)
• Column Chooser: Determines which columns will be displayed on the table.
• Resizable Columns: Determines whether the columns in the table are resizable or not.
• Hide Table On Empty: You can hide the table when the data table connected to the Table element is empty.
• Striped: Allows the rows in the table to be shown striped with alternate background colors.
• Striped Color: Determines the background color of the striped rows.
• Insert Row Active: Determines whether the new row insertion process is active or not.
• Show No Data Found: Allows the “No Data Found” message to be shown when there is no data in the table.
• No Data Found Message: You can add a placeholder message to preview and display at runtime when no dynamic data is bound to the Table element in the query.
• No Data Found Image: You can add a placeholder image to preview and display at runtime in cases where no dynamic data is connected to the Table element in Kuika.
• Multi Select: Allows you to select multiple rows in the table. You can edit, delete or apply other operations to rows collectively.
• Selected Values: Stores the values of the selected rows in the table.
• Selected Row Color: Sets the background color of the selected rows.
• Multi Select Scope: Specifies the area in a table where multiple cells or rows can be selected at the same time.
• Transformed On Mobile Resolution: Allows the Table element to be automatically reorganized to provide a better view on mobile devices.
• Editable Always Active: Ensures that editable cells in the Table element are always active, so that clicking on the cells automatically opens the editing mode.
• Export: Makes it possible to export table data. For example, it allows you to download the table in Excel or CSV format.

The “Sorter” property of the Table element allows you to sort the data in the table according to a specific sorting criteria (such as A to Z). This property helps you to display the table in ascending or descending order. Here are the general functions of the Sorter feature:

• Sort Criteria: You can sort the data in the table in ascending (A to Z) or descending (Z to A) order based on the selected column. This way, you can make your data more organized and accessible.
• Customization: Sorting operations are usually performed dynamically in the user interface and you can customize the sort order according to your needs.
• Performance: You can perform sorting operations quickly and efficiently in tables with large data sets.

To use the Sorter feature of the Table element:

1. After logging into the Kuika platform, open the project you will work on from the “Apps” screen.

2. In the “UI Design” module, drag and drop the Table element under the “Commonly Used” or “Data” category from the “Elements” panel on the left side.

In order to use the Sorter feature on Table, it is first necessary to bind data to the table.

3. Open the “Datasource” field from the “Properties” panel on the right side.
4. Select the action you want to use as a data source from the actions you added as “Initial Action”. After connecting your data source, the table will be automatically populated with data. This data will be used for sorting operations.

5. Then open the key from the “Sorter” field.

6. You can sort the String, Number or Date columns from smallest to largest or from largest to smallest by clicking on the sort sign next to the table headers.

If you reopen a table that you have previously filtered or hidden its columns, it will automatically return with the previous settings. This feature improves your user experience and increases your productivity. It also allows you to create custom table configurations based on department. In this tutorial, you will learn how to save your previous filter and hide settings and how to restore them. This way, you can work seamlessly with previous edits of your table and easily make adjustments to suit your specific needs.

Step 1: Add Table Element to Your App

1. After logging in to the Kuika platform, open the project you will work on from the “Apps” screen.

2. In the “UI Design” (1) module, drag and drop the Table element (4) under the “Commonly Used” (3) category from the “Elements” (2) panel on the left side.

3. Configure the “Searchable, Filtering and Column Chooser” settings from the Properties panel.some text
   • Searchable: Allows you to search the table.
   • Filtering: Allows you to filter your table data.
   • Column Chooser: Allows you to hide or show columns.
4. Then click the“RUN” button in the upper left corner.

Step 2: Saving the 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.

Step 3: Loading the Configuration with Import Table Configs Action

When you open the table again or click on the “Import” button, this previously saved configuration is reapplied to the table. It loads the table with the saved filters and column settings.
Once these steps are complete, when you open the table again, it will automatically load with the last saved filter and column settings. This eliminates the need to readjust the table each time.

Kuika's Export Table Configs action, specific to the Table element, allows you to export your table data. You can specify in which format you want to export your data. In this training content, you will learn how to add the Export Table Configs action to the Table element.

This training content consists of the following topics:

1. Adding a Table element to your application.
2. Adding Export Table Configs action.

Add Table Element to Your Application

1. After logging in to the Kuika platform, open the project you will work on from the “Apps” screen.

2. In the “UI Design” (1) module, drag and drop the Table element (4) under the “Commonly Used” (3) category from the “Elements” (2) panel on the left edge.

Add Export Table Configs Action

1. Click on the Table element you added to your application.
2. Then, while in the “UI Design” module, open the “Properties” panel on the right side.
   

     3. Select “on Config Change>Export>Export Table Configs” from the “+ADD ACTION” drop-down menu.

4. You can select the table you want to export from the “Select a Table” field.
   

Kuika's Import Table Configs action, specific to the Table element, allows you to import your table data from files such as Excel or CSV into your application. You can quickly and efficiently connect data sets to the table element used in the application. In this tutorial, you will learn how to add the Import Table Configs action to the Table element.

This training content consists of the following topics:

1. Adding a Table element to your application.
2. Adding an Import Table Configs action.

Add Table Element to Your Application

1. After logging in to the Kuika platform, open the project you will work on from the “Apps” screen.

2. In the “UI Design” (1) module, drag and drop the Table element (4) under the “Commonly Used” (3) category from the “Elements” (2) panel on the left edge.

Add Import Table Configs Action

1. Click on the Table element you added to your application.
2. Then, while in the “UI Design” module, open the “Properties” panel on the right side.
   

     3. Select “on Config Change>Export>Import Table Configs” from the “+ADD ACTION” drop-down menu.

4. Select the table you want to import from the “Select a Table” field.
5. Then, in the “configJSON” field, enter the JSON configuration settings that determine how your table data will be structured during the import process.

Kuika's Reset Table Configs action, specific to the Table element, allows you to delete all configuration settings applied to the table. It resets custom settings, filtering, sort orders, column configurations and all other personalized settings made on the table. In this tutorial, you will learn how to add the Reset Table Configs action to the Table element.

This training content consists of the following topics:

1. Adding a Table element to your application.
2. Adding a Reset Table Configs action.
   

Add Table Element to Your Application

1. After logging in to the Kuika platform, open the project you will work on from the “Apps” screen.

2. In the “UI Design” (1) module, drag and drop the Table element (4) under the “Commonly Used” (3) category from the “Elements” (2) panel on the left edge.

Add Reset Table Configs Action

1. Click on the Table element you added to your application.
2. Then, while in the “UI Design” module, open the “Properties” panel on the right side.
   

      3. Select “on Config Change > Export > Reset Table Configs” from the “+ ADD ACTION” drop-down menu.

     4. You can select the table from the “Select a Table” field to delete all previously made configuration settings. 

You can give a color change effect as hover on the rows of the Table element you use on list screens.  

Select the Table element you want to add hover property to. Click row Hover Bg Color in the Properties panel.

Set the Hover color via color in the panel that opens.

You can follow the steps below to use the Master-Detail feature:

1. First, drag and drop an element from the Data category of the Elements panel on the left side of your app.

• Drag a second Data Repeater category element into one of the allowed areas of the element.

2. In our example, we will proceed through the Table element.some text
   • Place the appropriate elements in the Table in line with the data returned from the Datasource.
3. Create an Action that returns data and add it to the Page Init event.
4. Select the Table element you will use as the master.

‍

‍

       5. Datasource olarak, oluşturduğunuz Action Result'ı seçin.

       6. Detail için kullanacağınız Table elementini seçin.

‍

7. As datasource, specify the second list in the data contained in the Master table.

8. Populate the data of other elements in your application according to your needs.

When you complete all the steps, your Master-Detail table will be ready for use.

Kuika Platform and SQL Support

Unfortunately, Kuika Platform does not support Master-Detail directly with SQL. However, you can review the example below to manage this process with SQL queries.

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 through Classes on Custom C# side. An example visual about this is presented below.

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; }
}
}

Authorization

• Anonymous Access: Allows users to access without entering account information.
• All Roles Access: Provides access by verifying users' account information.
• For element-level authorization, edit Authorization settings in the Properties panel.

Visibility

• Always Visible: Element is always visible.
• Hidden: Element is hidden.
• Sometimes Visible: The element is visible depending on a specific condition.

To configure the setting:

1. Select the element on the screen.
2. Open the Properties panel on the right edge.
3. In the Visibility field, select an option according to your needs.

Editability

• Enabled: Elements can be edited.
• Disabled: Element cannot be edited.
• Sometimes Enabled: The element can be edited or uneditable according to certain conditions.

Interface Design with Style Panel

By customizing your elements with the Styling Panel, you can create impressive interfaces for your web and mobile applications. In this section, you can configure the following settings:

• Layout: Sizing, alignment and padding settings. Settings include Size, Min Size and Align.
• Text: Font, style, color, size and spacing settings.
• Fill: Customize the background with color or images.
• Border: Add borders and corner radius settings.
• Shadow: Add a shadow effect to add depth to elements.

By following these steps, you can configure the Area Chart element to suit your needs.

Actions

Kuika supports the following system actions:

• Arithmetic, Authorization, Condition, Device, Export, Geolocation, Inversion, Local Storage, Multi Language, Navigation, Notification, Payment, UI Control, Process Administration, Process Automation, Trigger, Process Automation, Process Administration and String Operations.
  
• You can also use SQL actions that you create yourself.
  
• You can use the +ADD ACTION button from the Properties panel to add an action.
  

Actions support may not be available in some elements.