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.