Form
10 min
Allows the construction of user interfaces through the combination of previously defined Drag and Drop components and the use of CSS, Angular JS, and JavaScript resources.
Characteristics
- Each form may contain one or more pages and each page has an HTML, an Angular Controller JS, and a collection of dependencies (Screen layout is common to all pages)
- The screen drawing contains a collection of lines and each line of the screen design may have one or more components (with one or more properties)
- Pages previously configured in the system:
- Default page
- A Page used, to start SM service, search the data inside the database, and register directly on it.
- CRUD page
- A Page automatically created by the business Object, with the basic functions
- Process page
- A Page for SM system processes associated with business processes used to Start a Neuro Business Process.
- Task page
- Run through a created Workflow/ESI Design, rendering a neuro form on the ticket screen.
Before getting started
Must have the Neuro Application created.
Procedure
- Access the functionality through navigation in the menu Neuro > Management > Form;
- Click on "New";
- Complete the fields available for “Basic Data”, In this tab the user should inform the basic data of the forms, such as the Application to which the form belongs, the Name, Description, Business Rules (for Validation and for SM, if any) and the Folder, which is a physical form grouper on the server, for the purposes of organization and mark, if the Form is to be Show as an SM widget;
Figure 1 - Form
ATTENTION:
Version is incremented automatically by the system whenever a new version of the form is created.
- Add page
Figure 2 - Add Page
- The generated tabs will have the following structure:
- Properties: General data
Figure 3 - General Data
- HTML: page HTML structure
Figure 4 - HTML
- Controller: Controller Code referring to the Form
Figure 5 - Controller
- Dependencies: the dependencies of the application are reported. The name of the dependency and the path in which it is located must be entered. The user must also inform whether it will be injected into the controller.
Figure 6 - Dependencies
- Design the screen, to create the screen design, click on Edit Screen or navigate to the system tab Screen Design that opens automatically:
- Drag the components located on the left side palette to the center of the screen according to the shape you want to build the form. The components are arranged in rows and columns, and the rows have a width of 12 columns. This means that in each line you can insert up to 2 components with width 6, or up to 3 components with width 4, for example. It is not mandatory to fill the entire row;
- You can also create tabs on the forms. To do this, go to the tabs menu, and choose tabs horizontally or vertically. The tabs will be added on the screen, and you can design the screen with the components on each tab.
Figure 7 - Design
- Click on "Save" to run the changes. You can save it in the original version (current version), or in a new version.
JS for visualization:
This tab has the ability to add variables in the JavaScript scope on the screen that opens when you click the "View Screen" button. More information can be found in the Developing Applications.