Data Transfer to Select Box
Learn how to pass data to the Select Box element.
During the application development process with Kuika, you can use the Select Box element and establish a data connection to the Select Box element.
This tutorial content consists of the following headings:
Working in Datasources View Mode for Data Transfer to the Select Box Element
Working in UI Design View Mode for Data Transfer to the Select Box Element
Within the scope of this tutorial content, an example scenario will be presented where the departments owned by a company will be selected through the SelectBox.
1. Working in Datasources View Mode for Data Transfer to the SelectBox Element:
In order to transfer data to the Select Box element in the application development process with Kuika, you must first perform some operations in the Datasources view mode.
First, open the Datasources view mode.
Then create the data table that will contain the data you want to transfer to the Select Box. As part of the example scenario, you can create a Department table.
To add the Department table, hover over the Tables heading on the left. Click the + icon next to Tables.
Click New Table via the drop-down menu. Write Department as the table name on the screen and click the NEXT button.
On the screen that appears, a column named Id of type Guid is created by default by Kuika.
To add a new column, enter the Column Name. Then, choose the data type through the dropdown menu under the Column Type title.
As part of the example scenario, add a column named DepartmentName of String type.
You should use English characters when adding a column name. You should also avoid using special characters.
To perform the addition, fill in the Column Name and Column Type information. Choose the requirements and uniqueness conditions for the column and click the Add button.
You can list the columns you added within the Department table and delete them if necessary.
After completing the column addition, click the CREATE button in the upper right corner.
After the table creation process, you must create a custom action that will list the data in the Select Box element.
To add a new custom action, hover over the Actions title on the left in the Datasources view mode. Click the + icon next to the Actions title.
From the dropdown menu, click Add New Custom Action.
In the opened Add a New Action screen, name your action and click the Next button.
As part of the example scenario, you can use the name SelectDepartment for the action that will list the departments in the SelectBox.
An SQL Editor will greet you on the opened screen. Write the necessary SQL query in the SQL Editor for listing.
For the SelectDepartment action to be used as part of the example scenario, you can use the following query:
In Kuika, you can quickly and easily create a Select query without writing any query statements.
To quickly and easily create a listing action, click on Tables in the left menu of the SQL editor screen.
Hover over the Department table.
Open the detail menu. In the opened menu, click on Add Select Query.
After clicking on Add Select Query, the Select query will be automatically added to the SQL editor.
2. Working in UI Design View Mode for Data Transfer to the SelectBox Element:
After completing the operations in the Datasource view mode, open the UI Design view mode.
Then, open the screen where you want to work with the Select Box element.
To transfer data to the Select Box element, you must first add the custom action you created as an Initial Action to the screen where the SelectBox element is located.
To add an Initial Action, click on the ADD ACTION button in Screen Properties.
In the opened menu, hover over Initial Actions > Custom> Datasource.
When you hover over the Datasource item, the custom actions you created will be listed.
From this list, click on the SelectDeparment custom action. Then drag and drop a Select Box element onto the workspace.
To facilitate data transfer, click on the dragged and dropped Select Box element.
Through the Properties panel that opens on the right, open the Options menu. Under the Action title in the dropdown menu, you should choose the action you created as a custom action and that will allow listing in the SelectBox. As part of the example scenario, choose the SelectDepartment action.
Under the Field to display title, you should choose the column where the data to be displayed in the Select Box element is located. In the context of the example scenario, make the departmentname selection.
Lastly, in the dropdown menu under the Field to Use as Key title, make your selection as Id.
Last updated
