---
title: Form
slug: lowcode-en/form
description: Learn how to create and customize forms in a Low Code application with this comprehensive document. Discover how to combine user interface components, CSS resources, and code to create dynamic forms. Explore the ability to add multiple pages with their ow
createdAt: 2021-10-01T18:55:10.000Z
---
Through the form, the user interacts with the application. It is created by combining "drag and drop" user interface components, CSS resources, and JavaScript and AngularJS code.
- Each form can contain one or more pages, and each page has HTML code, an AngularJS controller, and a collection of dependencies.
- The screen layout is common to all form pages and is built by dragging and dropping user interface components.
- The screen layout, designed in the Screen Design tab, contains a collection of rows, where each row can have one or more user interface components.
- Preconfigured pages in the system:
- **CRUD Page** - Automatically configured by the system during the creation of the Business Object, providing CRUD (Create, Read, Update, and Delete) functionality to the Business Object.
- **Default Page** - Used to provide user data during the creation of a service request in Workflow and ESM.
- **Process Page** - Used to initiate a Low Code Business Process.
- **Task Page** - Renders a Low Code form on the ticket screen of a Workflow in Workflow and ESM.
- **Report Page** - Integrates the form with reports generated by the system, including specific dependencies for the execution of a JASPER report.
# Before you start:
- [x] You must have created a Low Code project.
# Procedure
:::::WorkflowBlock
:::WorkflowBlockItem
Access the functionality through the navigation menu `Low Code > Management > Form`;
:::
:::WorkflowBlockItem
Click on "**Create**";
:::
:::WorkflowBlockItem
The available **form** tabs have the following structure:
:::
::::WorkflowBlockItem
Complete the fields available in the "**Identification**" tab:
- Low Code **Project Name** to which the form belongs.
- **Form Name**
- **Form Description**
- **Folder** where the form configurations will be stored.
- Validation **Business Rule**, if necessary.
- Select the **Show in Experience Center** checkbox if you want the form to be displayed in the Experience Center.
:::hint{type="info"}
✏️ **Note:** In the company's internal system there is the **Experience Center** page. It is the company's intranet, a central page where relevant news and information is published. By checking this option, this form will be displayed inside the **Experience Center**.
:::
::::
:::::
:::hint{type="warning"}
⚠️ **Atenttion!** The version is automatically incremented by the system whenever a new version of the form is created.
:::
## Add Page to the Form
The types of pages you can add depend on the type of project you are developing. If it's a registration, the CRUD page should be added. If it's a custom form, the Default and Task pages should be added. If it's a report or filter, the same logic applies.
::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/JhL6d4HlRTC6A8Igeotbx_image.png" size="72" width="353" height="216" position="center" showCaption="false"}
# Form Tabs
### Identification
General form data.
### Business Objects
Location where Business Objects are declared.
### Shared Code
Location to insert lines of code used by all form pages and where you can include dependencies that are custom code snippets (CSS and JavaScript).
### Screen Design
Location to insert components and objects related to the form's screen design, such as inputs, selects, grids, buttons, checkboxes, options, custom HTML, among others. For more information, see [Screen Design](docId:1EGMc9n_LWTlwh_GW2nFz).
### JS for Testing
Location to test a piece of JavaScript code.
### Form Pages
Displays the CRUD, Default, Task, and Report pages that are part of the project and have a specific usage type, depending on the project's objective as seen above.
In this example, we have the configuration tabs for the elements of a CRUD page.
The tabs available for the CRUD, Default, Task, Report, and Filter pages will always have the same structure: URL, Properties, Actions, HTML, Controller, and Dependencies.
**Menu URL**: Address for calling the form type.
**Properties**: General repository data.
**Actions**: Select the Business Object and actions you want in the form:
- Restore the object on page load;
- Save data before page submission;
- Save data after page submission.
**HTML**: HTML page structure.
**Controller**: Controller code related to the form. The codes inserted here will only be executed on this page.
**Dependencies**: If the form requires external code, this code must be registered as a dependency. The dependency name, location path, and whether it should be injected into the controller must also be provided.
**Designing a Screen**: To create the screen design, click on "**Edit**" or navigate to the Screen Design tab, which opens automatically.
Drag the components located in the palette on the left and drop them onto the center of the screen. The components are organized in rows and columns, with each row having a width of 12 columns following the bootstrap pattern.
You can create Tabs (tabs) for the forms. To do this, go to the tab menu and choose tabs in horizontal or vertical arrangement. Drag and drop components onto guides as explained above.
