Kuika's Select Box element is the element in your application that allows users to choose from a specific set of options. With Select Box, they can easily switch between the available options via a drop-down menu and quickly select the option they want. In this tutorial, you will learn how to use the Select Box element and how to configure your options.
Select Box element supports web and mobile applications.
This training content consists of the following topics:
Adding a Select Box element,
Select Box element properties,
Working in Datasources module for data transfer to Select Box Element,
Working in UI Design module for data transfer to Select Box Element,
Authorization,
Visibility,
Editability,
Customize the interface design with Style Panel,
Actions.
Add Select Box Element
After logging in to the Kuika platform, open the project you will work on from the “Apps” screen.
In the “UI Design” (1) module, drag and drop the Select Box element (4) under the “Select Input” (3) category from the “Elements” (2) panel on the left side.
You can add the Select Box 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, only the Select Box element will be added.
Select Box Element Properties
You can add text inside the Select Box element. You can give role based authorizations to the element and set its visibility with show/hide/conditional options.
Value : You can add a static value to the Value field, or you can dynamically display a value of a status, Input element content or an action result via Symbol Picker.
Options : This is the section where you will bind the data table of the list to be displayed in the drop-down list.
Fixed Options List: It is used to list the fixed data defined manually on the platform without being connected to the database.
Fixed Data: It is the section where the name of each data that makes up the list appears in the list and the value to be used in the application is defined.
Placeholder : You can add an auxiliary/temporary placeholder text for the end user.
Allow Clear : It is the element that allows the selected value to be cleared with a single click.
Searchable : You can make the drop-down list searchable.
Contains Null Item : The first value of the list can be empty.
Sort By: You can sort the list items alphabetically as A-Z or Z-A.
Working in Datasources View Mode for Data Transfer to Select Box 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 module. You can transfer your data to Select Box by following the steps below.
Open the “Datasources” module.
Create a data table that will contain the data you want to transfer to Select Box. You can create a “Department” table within the scope of the example scenario.
2.1. Adding a New Table
In the Datasources Module, hover over the “Tables” heading on the left.
Click on the "+ ” icon next to Tables.
Click on “New Table” through the menu that opens.
On the screen that appears, type Department as the table name and click on the “NEXT” button.
2.2. Adding Columns
In the screen that appears, you will see a column named Id of Guid type created by Kuika by default.
Enter Column Name to add a new column.
Then, select the data type from the drop-down menu under Column Type. In the example scenario, add DepartmentName (String type) as a column to be included in the Department table.
You must use English characters when adding the column name; avoid using special characters.
2.3 Completing Columns
After filling in the Column Name and Column Type information, select the necessity and uniqueness status and click the “Add” button.
You can list the columns you added in the Department table and delete them when necessary.
After completing the column addition process, create the table by clicking the “CREATE” button in the upper right corner.
3. Creating a Custom Action
After the table creation process, you should create a custom action that will list the data in the Select Box element.
3.1 Adding New SQL Action
In the Datasources module, hover over the Actions heading on the left.
Click on the “+” icon next to the “Actions” title.
Click on “New SQL Actions” from the drop-down menu.
3.2 Naming The Actions
On the screen that opens, name your action and click “Next”. For the example scenario, you can use the name SelectDepartment for the action that will list the departments in the Select Box.
3.3 Using SQL Action
A SQL Editor will greet you on the screen that opens. In the SQL Editor, write the SQL query required for the listing. You can use the following query to create the SelectDepartment action to be used in the example scenario:
SELECT * FROM Department
In Kuika, you can quickly and easily create a Select query without writing any query expression. To create the listing action quickly and easily, click Tables on the left menu of the SQL editor screen. Hover over theDepartment table with the cursor and open the detail menu.
Click on “Add Select Query” in the menu that opens.
After clicking “Add Select Query”, the Select query will be automatically added to the SQL editor.
By following these steps, you can successfully transfer data to the Select Box element.
Working in UI Design View Mode for Data Transfer to Select Box Element
After completing the operations in Datasource view mode, open the UI Design module. Then, select the screen you want to work with the Select Box element. In order to transfer data to the Select Box element, you must first add the custom action you have created as “Initial Action” to the screen where the Select Box element will be located.
1. Adding Initial Action
Follow the steps below to add an “Initial Action”:
Click the “ADD ACTION” button in the “Properties” panel on the right side.
In the menu that opens, select “Initial Actions → Custom →Datasource”. When you hover over the Datasource item, the custom actions you have created will be listed.
From this list, click on the “SelectDepartment” custom action.
2. Adding Select Box Element
Then drag and drop one Select Box element to the workspace.
2.1. Click on a Select Box Element
Click on the Select Box element you dragged and dropped to enable data transfer.
3. Select Box Element Data Binding Options
Open the “Options” menu via the “Properties” panel on the right sidebar.
In the drop-down menu under the “Action” heading, you should select the action that you have created as a custom action and that will provide the listing in the Select Box. In the example scenario, select the “SelectDepartment” action.
Under the “Field to display” heading, select the column with the data to be displayed in the Select Box element. In the example scenario, select “DepartmentName”.
Finally, in the drop-down menu under “Field to Use as Key”, select “Id” as key.
By following these steps, you will have successfully transferred data to the Select Box element.
Authorization.
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” provides 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.
Visibility.
It allows you to adjust the visibility of screens or elements. Visibility in Elements allows you to regulate visibility based on a specific state or condition. For each element, you can make it always visible, hidden, or visible and hidden depending on a condition.
Click on the element on the screen.
Open the “Properties” panel on the right side.
Click on the “Visibility” field and make one of the following selections according to the needs of your application. Kuika offers Always Visible, Hidden, Sometimes Visible options to control the visibility of the screens in your application.
Always Visible: Ensures that the screens in your app are always visible.
Hidden: Allows hiding screens in your application.
Sometimes Visible: Makes screens in your application conditionally visible.
Editability
Allows you to make elements editable.
Enabled: Selecting this option makes the element editable.
Disabled: In this case, the element cannot be edited.
Sometimes Enabled: This option means that the element is sometimes editable and sometimes not, depending on certain conditions.
Customize the İnterface Design with Style Panel
By customizing your elements with the Styling Panel, you can create unique and impressive user interfaces in your web and mobile applications.
The sections defined below vary depending on the element.
Layout: Here you can make visual adjustments such as sizing, alignment and padding of elements. These settings also affect the layout of other elements within the element. Properties include Size, Min Size and Align; however, some elements may not support the Display property.
Text: The element's text properties can be edited here through font family, style, color, size, spacing and other options. This section supports all Text related adjustments.
Fill: You can use the Fill setting to customize the element's background with color or images.
Border: You can give your elements a more aesthetic look by adding borders and adjusting the corner radii.
Shadow: You can add a shadow effect to elements used in web applications to give a sense of depth. However, the shadow feature may not be supported as some elements are not suitable for mobile applications.
Actions.
Kuika contains system actions such as 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 and String Operations.
In addition to system actions, you can also use SQL actions that you create yourself.
To add actions to elements, you can use the “+ADD ACTION” button from the Properties panel on the right side.
