Use of Forms in various Front End technologies
- Francisco Javier López Acevedo
Available since version 6.1.0-Warcraft
Introduction
Taking advantage of the release of version 6.1 of Onesait Platform, several example web applications have been generated where the Forms are integrated using various Front End technologies, such as Angular, Vite + React and Vue 2.
These examples allow to show how the Platform Forms can be embedded with any general web application.
Download the examples
The examples in this guide can be downloaded from the Onesait Platform GitHub repository:
To install them, follow the instructions in the different README.md files for each example, where the version of Node.js required and the different commands to be used are indicated, depending on the technology of the example application.
Examples
Vite + React Application
In this example the Forms have been integrated with Vite + REACT, where the Application logs in against the Platform security from a user registered in the Platform and using his own password. The navigation between components is done with React Router.
Once the project has been raised locally, the URL to access the example is http://localhost:5173/.
Once logged in, a list of Forms will be displayed, allowing you to click on the “Show Form” button to load the form for that row of the table.
After this, the Form is displayed.
In it you will be able to load an identifier to display the data of that record.
At the development code level, the Forms library is mainly integrated in the Showform.jsx file located in the src/components path of the web project.
Angular + Angular Material Application
The example application built on Angular, and has the same functionality as the previous one. In this case, the project built locally has its access URL at http://localhost:4200/.
The login is done against Onesait Platform's own security:
After logging in, the user's Forms list will be displayed.
Loading the empty Form to be able to insert new records, or if the identifier field is filled in, it will be possible to load the values of a record of the Entity associated to the Form.
For this application, the forms are embedded with the showform.component.ts component located in the src/app/showform path of the web project.
Vue 2 Application
In this application the framework to use is Vue 2, which has available the same functionality as the previous ones.
After raising the project locally, the access URL in this case will be http://localhost:8080/.
To log in, click on the user icon at the top right of the screen. This will open the login modal, where you will have to enter your user name and password.
To reload the list of available forms, click on the “Reload form list” button on the left side of the list.
To load one of the Forms, click on its corresponding “Use” button, located to the right of each Form record. The selected one will then be loaded and new records can be created, if it is an insertion form.
As in the previous cases, the identifier of a previously created record can be typed in to retrieve its data.
In this case, it is the ShowForm.vue component, located in src/components, which is responsible for embedding the forms in the application.