Table

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.

Kuika's Clear Table Filtering Configs action, specific to the Table element, is used to reset the filtering settings you have applied to your table data. By removing the filtering operations previously performed on the table, it makes all data visible again. In this tutorial, you will learn how to add the Clear Table Filtering Configs action to the Table element.

This training content consists of the following topics:

1. Adding a Table element to your application.
2. Adding Clear Table Filtering 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 Clear Table Filtering Configs Action

The Clear Table Filtering Configs action does not delete the data in the table columns, it only clears the filters.

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 > Clear Table Filtering Configs” from the “+ ADD ACTION” drop-down menu.

       4. You can select the table from the “Select a Table” field to delete the filtering operations done before.

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. 

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.

You can customize user access with “Anonymous Access” and “All Roles Access” authorization options on the screens and elements of your application. While “Anonymous Access” enables access without any account information query, “All Roles Access” enables access by verifying user account information.

For element level authorization, you can manage the security and user experience of your application by selecting the relevant element and editing the “Authorization” settings from the Properties panel.

These methods allow you to create a personalized and secure environment in your app.

This is where the visibility of screens or elements is set. Visibility in Elements allows you to regulate visibility based on a specific state and/or condition. For each element, you can make it always visible, hidden, or visible and hidden depending on a condition.

This is the section where the visibility structure of your screen is set. Kuika offers Always Visible, Hidden, Sometimes Visible options to control the visibility of the screens in your application.

• Always Visible: Ensures that screens in your app are always visible.‍
• Visible: Makes the screens in your app visible.‍
• Hidden: Allows hiding screens in your app.‍
• Sometimes Visible: Makes screens in your app conditionally visible.

Visibility Operations on Elements or Screens

You can follow the steps below to adjust Visibility settings in elements or on your screen:

1. Click on the element or screen on the screen to make it selected.
2. Open the Properties panel.
3. Click on the Visibility field and make one of the following selections according to the needs of your application.
   • You can make it always visible with Always visible in the Selectbox.
   • With Hidden you can hide the element.
   • ‍Sometimes visible allows you to make it visible according to the conditions you add.

The visibility of the element will be adjusted according to the selection you have made.