Form
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:
You must have created a Low Code project.
Procedure
Access the functionality through the navigation menu Low Code > Management > Form;
Click on "Create";
The available form tabs have the following structure:
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.
✏️ 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.
⚠️ 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.
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.
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.
