Select Box

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

Select Box supports web and mobile applications.

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.

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.

Kuika contains system actions such as Arithmetic, Authorization, Condition, Device, Export, GeoLocation, Local Storage, Multi Language, Navigation, Notification, Payment Stripe, UI Control, Trigger, Process Automation, Process Administration and String Operations.

In addition to system actions, you can also use SQL actions that you create yourself.

You can use the +Add Action button in the Properties panel to add actions to the elements.

Open the Properties panel of the element that you want to add validation to and that allows data entry.

Click the ADD VALIDATION button at the bottom of the Properties panel.

In Added Validation, select the validation type for the element.

Verification types may vary according to the properties of the elements.

Define standards via Symbol Picker specific to the validation type (only valid for some validation types).

Then complete the validation creation by creating the Invalid Message that will be shown on incorrect input by the user.

In order to transfer data to the Select Box element in the application development process with Kuika, you must first perform some operations in Datasources view mode.

First, open Datasources view mode.

Datasources View Mode

Then create the data table that will contain the data you want to transfer to the Select Box. You can create a Department table within the scope of the example scenario.

Datasource View Mode Tables

To add the Department table, hover over the Tables heading on the left. Click on the + icon next to Tables.

Click New Table via the drop-down menu. On the screen that appears, type Department as the table name and click the NEXT button.

New Table Creation Screen

In the screen you see, a column named Id in Guid type is created by Kuika by default.

Enter Column Name to add a new column. Then select the data type via the drop-down menu under the Column Type heading.

In the example scenario, add the columns and column types to be included in the Department table. In this context, add a DepartmentName column with column type String.

You should use English characters when adding a column name. You should also not use special characters.

Add Table Columns Screen

Fill in the Column Name and Column Type information to perform the insertion process. Select the requirement and uniqueness status for the column 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.

After the table creation process, you must create the 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 Datasources view mode. Click on the + icon next to the Actions title.

Datasources View Mode Actions

Click New Custom Action from the drop-down menu.

New Custom Action Creation Screen

In the Add a New Action screen, name the action and click Next.

Within the scope of the example scenario, you can use the name SelectDepartment for the action that will list the departments in the Select Box.

SQL Editor for Creating New Actions

A SQL Editor will greet you on the screen that opens. Write the SQL query required for listing in the SQL Editor.

You can use the following query to create the SelectDepartment action to be used in the example scenario.

CopySELECT * FROM Department

In Kuika, you can create the Select query quickly and easily 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 the Department table with the cursor. Open the detail menu.

Click Add Select Query in the menu that opens.

After clicking Add Select Query, the Select query will be automatically added to the SQL editor.

With Kuika, you can use the Select Box element in the application development process and provide data connection to the Select Box element.

This training content consists of the following topics.

1. Working in Datasources View Mode for Data Transfer to Select Box Element
2. Working in UI Design View Mode for Data Transfer to Select Box Element

Within the scope of this training content, a sample scenario in which the departments of a company will be selected through SelectBox will be presented.

After completing the operations in Datasource view mode, open UI Design view mode.

Then, open 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 created as Initial Action to the screen where the SelectBox element will be located.

Adding Initial Action

To add an Initial Action, click the ADD ACTION button in Screen Properties.

In the menu that opens, hover over 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 SelectDeparment custom action.

Then drag and drop one Select Box element to the workspace.

Adding SelectBox Element

Click on the Select Box element you dragged and dropped to enable data transfer.

SelectBox Element Data Binding Options

Open the Options menu via the Properties panel on the right. In the drop-down menu under the Action heading, you should select the action that you created as a custom action and will provide the listing in the SelectBox. In the example scenario, select the Select Department action.

Under the Field to display heading, you should select the column with the data to be displayed in the Select Box element. Select departmentname in the example scenario.

Finally, in the drop-down menu under Field to Use as Key, select Id as key.

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.

1. Click on the element on the screen.
2. Open the “Properties” panel on the right side.
3. 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.

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.