It is a dynamic drop-down list element. An example is a predefined city selection list in an address form.
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.
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.
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” 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.
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.
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.
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.
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.
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.
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.
Click New Custom Action from the drop-down menu.
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.
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 DepartmentIn 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.
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.
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.
Click on the Select Box element you dragged and dropped to enable data transfer.
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.
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.
You can follow the steps below to adjust Visibility settings in elements or on your screen:
The visibility of the element will be adjusted according to the selection you have made.
By customizing your elements with the Styling Panel, you can create unique and compelling user interfaces in your web and mobile applications. This general guide explains how to customize various elements (for example, Collapse) and provides detailed information on common features.
The sections defined below vary on an element-specific basis. To learn more about each customization option, please click on the respective links.
This is where you can make visual adjustments to elements, such as sizing, alignment, and padding. 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.
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.
You can use the Fill setting to customize the element's background with color or images. This increases the visual appeal of the element.
You can give your elements a more aesthetic look by adding borders and adjusting corner radii.
You can add a shadow effect to elements used in web applications to give a sense of depth. However, some elements are not suitable for mobile apps, so the shadow feature may not be supported.
