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 module, drag and drop the Form element under the Container category from the Elements panel on the left side.

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 on 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 appears. Then click the NEXT (4) button.
3. For example, if the data source is Managed DB and the table is 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 as you need.

When an input must be required, activate the “Required” section.

4. You can add a new row with the Add item (6) button at the bottom of your form and a new section with 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.

1. You can follow the steps below to create a form with Excel data source:
2. After dragging and dropping the form element on the screen, select Excel (1) data source from the modal that appears.

3. 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 the NEXT (3) button.
4. For example, assuming that you have uploaded an Excel file about name, surname, phone number and department, you can edit Label (1), Field Type (2), Element Type (3) and Required (4) from the columns of the related table according to your needs.

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

5. 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.
6. You can select the column view suitable for your device from the Section layout (7) field in the upper right corner of the form.
7. 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 on the screen, select the Action (1) resource 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 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 the 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 Custom (1) data source from the modal that appears.
2. Then click the NEXT (2) button.

Optionally, you can click “Also create a table in ManagedDB” to create a data table connected to the form structure.

3. On the page that opens, you can edit Label (1), Field Type (2), Element Type (3) and Required (4) 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 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.

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.

Authorization

• Anonymous Access: Allows users to access without entering account information.
• All Roles Access: Provides access by verifying users' account information.
• For element-level authorization, edit Authorization settings in the Properties panel.

Visibility

• Always Visible: Element is always visible.
• Hidden: Element is hidden.
• Sometimes Visible: The element is visible depending on a specific condition.

To configure the setting:

1. Select the element on the screen.
2. Open the Properties panel on the right edge.
3. In the Visibility field, select an option according to your needs.

Editability

• Enabled: Elements can be edited.
• Disabled: Element cannot be edited.
• Sometimes Enabled: The element can be edited or uneditable according to certain conditions.

Interface Design with Style Panel

By customizing your elements with the Styling Panel, you can create impressive interfaces for your web and mobile applications. In this section, you can configure the following settings:

• Layout: Sizing, alignment and padding settings. Settings include Size, Min Size and Align.
• Text: Font, style, color, size and spacing settings.
• Fill: Customize the background with color or images.
• Border: Add borders and corner radius settings.
• Shadow: Add a shadow effect to add depth to elements.

By following these steps, you can configure the Area Chart element to suit your needs.

Actions

Kuika supports the following system actions:

• Arithmetic, Authorization, Condition, Device, Export, Geolocation, Inversion, Local Storage, Multi Language, Navigation, Notification, Payment, UI Control, Process Administration, Process Automation, Trigger, Process Automation, Process Administration and String Operations.
  
• You can also use SQL actions that you create yourself.
  
• You can use the +ADD ACTION button from the Properties panel to add an action.
  

Actions support may not be available in some elements.