Form

When you drag and drop the form element to the screen, the "Create Form" modal opens. Firstly, you must select the data source of the form to be created.

The data sources you can select are;

• Data Table (1): It allows you to easily and quickly create form designs that are connected to the data tables in your data sources, with data saving connections provided.
• Excel (2): It allows you to create form designs easily and quickly using the columns in an Excel document you have created.
• Action (3): It allows you to create form designs easily and quickly by using the actions in the application you have developed, in line with the parameters of the actions.
• Custom (4): It allows you to easily and quickly create various form designs in a customized structure in line with your needs.

Let’s examine the sections on the form detail screen that opens after selecting your data source.

A. Adding Field to Form:

From the Add Field section, you can specify the name of the form structure, customize the variables to be included in the form, change the appearance of the form structure according to device differences, delete variables with three dots and add new fields.

1. Add Header : This is the field to name the form section.
2. Section Layout : You can choose how to display the form according to device differences.
3. Label : This is the field where you can specify the name of the variables in the form field (For example, "roleName").
4. Field Type : It is the field where you can specify the data type of the variable in the form field (For example, "string").
5. Element Type: This is the field where you can specify the type of the variable in the form field (For example, "textInput").
6. Req : It is used for the fields that must be filled in the form.
7. Add item : You can use it to add a new line to the form.

B. Adding Section to Form

This is the area where you can add new sections to your form.

Add Section : You can use it to add a new section to the form.

C. Save Form

Save : Allows you to save the changes in the form.

To create a new form:

1. After logging into 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 Form element (4) under the "Container" (3) category from the "Elements" (2) panel on the left edge.

3. Start by selecting the data source you want to use in the form you will create in the "Create Form" modal. You can choose and proceed according to your usage scenario and your needs.

Create Form with Data Table Data Source

You can follow the steps below to create a form with Data Table data source structure:

1. After dragging and dropping the form element to the screen, select the "Data Table" (1) data source from the modal that appears.

2. Select a data source (2) and table (3) from the submenu that opens. Then click on the "NEXT" (4) button.
3. For example, if the data source is selected as "Managed DB" and the table is selected as "Department", you can see the relevant table on the page that opens. You can edit "Label" (1), "Field Name" (2), "Field Type" (3), "Element Type" (4) and "Required" (5) from the columns of the relevant table according to your needs.

When an input must be mandatory, activate the "Required" section.

4. You can add a new row from the "Add item" (6) button at the bottom of your form and a new section from the "Add Section (7)" button.
5. You can select the column view suitable for your device from the "Section layout" (8) field in the upper right corner of the form.
6. Finally, you can save your form by clicking the "SAVE" (9) button in the lower right corner.

Create Form with Excel Data Source

Form element supports ".xls/.xlsx" formats as Excel data file.

You can follow the steps below to create a form with Excel data source:

1. After dragging and dropping the form element on the screen, select the data source "Excel" (1) from the modal that appears.
2. Select the excel file you will use from your computer by clicking the "Choose from computer" (2) button from the submenu that opens. Then click on the "NEXT" (3) button.

3. For example; assuming that you have uploaded an Excel file related to name, surname, telephone number and department, you can edit the "Label" (1), "Field Type" (2), "Element Type" (3) and "Required" (4) sections of the columns of the relevant table according to your needs.

When an input must be mandatory, activate the "Required" section.

4. You can add a new row from the "Add item" (5) button at the bottom of your form and a new section from the "Add Section" (6) button.
5. You can select the column view suitable for your device from the "Section layout" (7) field in the upper right corner of the form.
6. Finally, you can save your form by clicking the "SAVE" (8) button in the lower right corner.

Create Form with Action Data Source

You can follow the steps below to create a form with Action data source:

1. After dragging and dropping the form element to the screen, select the "Action" (1) source structure from the modal that appears.

2. Select an action from the submenu that opens. Then click the "NEXT" (2) button.

The "Inputs" field in the submenu that opens is used for data entry and the "Outputs" field is used to display the data stored in the relevant form fields.

      3.For example, if "AddUserToRole" action is selected, you can see the related table on the page that opens. You can edit the "Label" (1), "Field Type" (2), "Element Type" (3) and "Required" (4) columns of the related table according to your needs.

When an input must be mandatory, activate the "Required" section.

4. You can add a new row with the "Add item" (5) button at the bottom of your form and a new section with the "Add Section" (6) button.
5. You can select the column view suitable for your device from the "Section layout" (7) field in the upper right corner of the form.
6. Finally, you can save your form by clicking the "SAVE" (8) button in the lower right corner.

Create Form with Custom Data Source

You can follow the steps below to create a form with Custom data source:

1. After dragging and dropping the form element on the screen, select the "Custom" (1) data source from the modal that appears.

2. Then click on the "NEXT" (2) button.

Optionally, you can click "Also create a table in Managed DB" to create a data table connected to the form structure.

3. On the page that opens, you can edit the columns "Label" (1), "Field Type" (2), "Element Type" (3) and "Required" (4) of the relevant table according to your needs.

When an input must be mandatory, activate the "Required" section.

4. You can add a new row from the "Add item" (5) button at the bottom of your form and a new section from the "Add Section" (6) button.
5. You can select the column view suitable for your device from the "Section layout" (7) field in the upper right corner of the form.
6. Finally, you can save your form by clicking the "SAVE" (8) button in the lower right corner.

‍

You can follow the steps below to edit the form structure:

1. Open the project screen you are working on.
2. Open the "Properties" panel on the right side of the screen with the form element.

3. Then click on the "Edit Form" button.
4. You can make the necessary arrangements from the modal that opens.
   

In the Kuika platform, the detach form elements feature (detach) allows you to separate a form element from the main form structure and make it an independent element.

If you detach a form you created with the Create Form modal, you cannot use the Create Form modal to edit the related form. Detach function is an irreversible operation.

You can follow the steps below to detach form elements:

1. Open the project screen you are working on.

2. When you hover over the form element, click on the "Detach" icon.

Thus, you have detached the form elements. You can move, resize and use the detached form elements in a different position.

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.

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.

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.

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.

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.