| Table of Contents |
|---|
Objetivo
El objetivo de esta funcionalidad es soportar dentro de Onesait Platform el desarrollo de aplicaciones Web con un enfoque NoCode. Así, desde el Control Panel podrás crear formularios, asignarles Entidades (y datasources) y hacer navegación entre formularios.
Estos formularios podrán integrarse en tu aplicación Web, sea cual sea la tecnología UI que uses, por ejemplo en los dashboards de Plataforma o en las aplicaciones Vue de ODS.
...
Objective
The purpose of this functionality is to support the development of Web applications with a NoCode approach within Onesait Platform. Thus, from the Control Panel you will be able to create forms, assign Entities (and datasources) to them and navigate between forms.
These forms can be integrated into your Web application, whatever UI technology you use, for example in Platform dashboards or ODS Vue applications.
To build this functionality we have based on http://Form.io que es una librería JavaScript que incluye un Builder y un Renderer, y la hemos extendido e integrado con las capacidades de plataforma permitiendo manejar de forma muy sencilla las Entidades de plataforma y sus DataSources
Funcionalidad principal
Listado de OP Forms
En el menú del Control Panel se ha añadido una nueva entrada:
...
Ésta da acceso al listado de formularios:
...
Desde este listado se tiene acceso a las siguientes opciones:
Búsqueda de formulario: A partir de la lupa se pueden realizar búsquedas en el listado.
Creación de formulario: Este botón permite acceder a la pantalla de creación.
Vista: Este botón da acceso a la pantalla de carga de datos y vista del formulario.
Edición: Este acceso a la pantalla de edición del formulario.
Borrado: con este se borrará.
Clonado: Este botón permite clonar un formulario.
...
Creación de un OP Form
Tras acceder con el botón de creación desde el listado, aparece la pantalla de creación de formularios
...
Se pueden ir siguiendo los consejos para elaborar el formulario.
Los pasos necesarios serían:
Dar un nombre al formulario.
Seleccionar la entidad en la que se almacenarán los registros creados a partir del formulario.
Arrastrar desde el panel izquierdo de componentes al lienzo los elementos necesarios para componer el formulario. Lo ideal es primero arrastrar componentes del layout para dar la estructura que se tiene diseñada y luego ir arrastrando los distintos elementos como campos de texto, de selección, ….
Mientras se van arrastrando los distintos elementos se muestra una ventana modal. Ésta por ejemplo es la del campo texto.
...
Finalmente presionando el botón CREATE se creará un nuevo formulario.
Generación de formulario para una entidad
...
Tanto en la pantalla de creación de formulario como de edición de formulario existe el botón Build form from entity, el cual tras seleccionar una entidad generará los campos del tipo pertinente en el formulario para cada campo de la entidad.
Por ejemplo para la entidad HelsinkiPopulation cuyos campos son todos de tipo number, éste sería el resultado:
...
Éste sería uno de los campos:
...
Carga de datos
Desde el listado al pulsar en el botón VIEW de alguno de los formularios se accede a la pantalla de visualización y carga de datos.
En ésta se aprecia en primer lugar el formulario vacío y espacio con consejos para el usuario y enlaces a documentación para dar facilidades de uso.
El formulario podrá rellenarse desde esta pantalla y enviarse para registrar los datos en la entidad definida para el formulario.
...
Navegación entre formularios
A los botones se les pueden asignar distintas acciones en la pestaña Display, una de ellas es la del envío del formulario submit.
Para seguir con las prácticas no code de la plataforma, se han mejorado los botones de los formularios añadiendo el campo Redirect, el cual, tras realizarse el envío con éxito de los datos del formulario, cargará en la página actual la url que se indica en este campo.
...
Este campo se puede escribir de dos formas una la url completa host + path como https://<instancia onesaitplatform.com>/path o sólo el path como /path, esta última en caso de que estemos trabajando en una aplicación en la que tengas definida la variable "appbase".
...
Carga de datos en un combo (SELECT)
Existen muchas formas de cargar los datos en el componente SELECT pero la más sencilla es usando los datasources de Onesait Platform.
...
Para esto en primer lugar se crea el datasource. Éstos son consultas sobre una o varias entidades.
...
Luego en el formulario se arrastraría el SELECT y aparece la ventana con la configuración:
...
Se accede a la pestaña "Data" y:
En el campo "Data Source Type" se selecciona el valor "Datasource".
Campo "Datasource", el name del datasource en este caso sería catalogo.
"Value Property", el valor de cada opción del selector, debe coincidir con el path de los elementos que devuelve el datasource por ejemplo:
Si los elementos devueltos por el datasource tienen esta forma:
{catalogo:{nombre:"indef001",descripcion:"contrato indefinido"}}
para usar como valor nombre se rellenaría con catalogo.nombre
En “item Template” se rellena la descripción. Al igual que antes, se debe poner el path completo, para la descripción se pondría por ejemplo de la forma más básica:
<span>{{ item.catalogo.descripcion }}</span>
Finalmente en la pestaña "API" se rellenará "Property Name" con el path de la propiedad de la entidad donde se almacenará la selección realizada.
Carga de datos en un SELECT para usuarios expertos
Para el caso de usuarios más expertos se pueden utilizar los datasources de Plataforma en una función JavaScript predefinida que permite las operaciones which is a JavaScript library that includes a Builder and a Renderer, and we have extended it and integrated it with the platform capabilities allowing to easily manage the platform Entities and their DataSources.
Main functionality
List of OP Forms
A new entry has been added to the Control Panel menu:
...
This gives access to the list of forms:
...
From this list you have access to the following options:
Form search: From the magnifying glass you can search in the list.
Form creation: This button allows access to the creation screen.
View: This button gives access to the data loading screen and form view.
Editing: This accesses the form editing screen.
Deleted: with this it will be deleted.
Cloning: This button allows you to clone a form.
...
Creating an OP Form
After accessing with the create button from the list, the form creation screen appears.
...
You can follow the tips to elaborate the form.
The necessary steps would be:
Give a name to the form.
Select the entity where the records created from the form will be stored.
Drag from the left panel of components to the canvas the necessary elements to compose the form. Ideally, first drag components from the layout to give the designed structure and then drag the different elements such as text fields, selection fields, .....
While dragging the different elements, a modal window is displayed. For example, this is the one for the text field.
It has two sections, the left one for configuration and the right one for preview. Everything is done by drag and drop and filling in the properties of the components. By hovering the cursor over the question mark symbols, a tooltip will be displayed, which will guide the users to know how each field works.
Finally pressing the CREATE button will create a new form.
Form generation for an entity
...
In both the form creation and form editing screens there is a Build form from entity button, which after selecting an entity will generate the fields of the relevant type in the form for each field of the entity.
For example, for the entity HelsinkiPopulation whose fields are all of type number, this would be the result:
...
This would be one of the fields:
...
Data loading
From the list, clicking on the VIEW button of any of the forms takes you to the display and data loading screen.
In this screen you will first see the empty form and a space with tips for the user and links to documentation to facilitate its use.
The form can be filled in from this screen and sent to register the data in the entity defined for the form.
...
Navigating between forms
Buttons can be assigned different actions in the Display tab, one of them is the submission of the form submit.
To continue with the non-code practices of the platform, the form buttons have been improved by adding the Redirect field, which, after successful submission of the form data, will load the url indicated in this field on the current page.
...
This field can be written in two ways: the complete url host + path as <https://<instance> onesaitplatform.com>/path or only the path as /path, this last one in case we are working in an application where you have defined the variable "appbase".
...
Loading data in a combo (SELECT)
There are many ways to load data into the SELECT component but the simplest way is to use Onesait Platform datasources.
...
For this, first the datasource is created. These are queries on one or several entities.
...
Then the SELECT is dragged on the form and the window with the configuration appears:
...
Go to the "Data" tab and:
In the "Data Source Type" field the value "Datasource" is selected.
“Datasource" field, the name of the datasource in this case would be catalog.
“Value Property", the value of each option of the selector, must match the path of the elements returned by the datasource for example:
If the elements returned by the datasource have this form:
{catalog:{name: "indef001",description: "permanent contract"}}}
to use as value name would be populated with catalog.name
In "item Template" you fill in the description. As before, the complete path must be filled in, for the description you would put for example the most basic form:
<span>{{ item.catalog.description }}</span>
Finally, in the "API" tab, "Property Name" must be filled in with the path of the entity property where the selection will be stored.
Loading data into a SELECT for expert users
For more expert users, it is possible to use the Platform datasources in a predefined JavaScript function that allows the operations project, filters, group, sort, offset, limit, param. Con esto se permite, sin modificar el datasource, obtener los datos de la forma deseada proyectando los campos, ordenándolos, …Esto se consigue accediendo a la pestaña Data en el Campo Data Source Type seleccionar el valor Custom, entonces aparece el campo Custom Values el cual debes rellenar con esta funcionThis allows, without modifying the datasource, to obtain the data in the desired form by projecting the fields, sorting them, ....
This is achieved by accessing the Data tab in the Data Source Type Field, select the Custom value, then appears the Custom Values field which you must fill with this function:
| Code Block |
|---|
from('catalogo').exec().then(function( msg ) {
values = msg.map((x) => x.catalogocatalog) ;
instance.setItems(values);
}); |
Donde Where 'catalogo' sería el nombre del datasource que se pretende utilizar para obtener los datos.
El restos de campos como en la carga básica anterior.
Tips para los usuarios
Tanto la pantalla de creación como de vista tienen un espacio donde se muestran consejos para que sea más sencillo elaborar los formularios a los usuarios.
...
Internacionalización
Es posible de forma sencilla internacionalizar los formularios. Para esto hay que seleccionar una internacionalización previamente definida.
...
Estas internacionalizaciones se definen desde esta entrada del menú.
...
Tecnología base
Los OP Forms se basan en la tecnología open-source Formio.js que es una librería Javascript que incluye un Form Builder para la creación de formularios
...
Y un renderizador y un SDK que permite renderizar los formularios de esquema JSON producidos por catalog' would be the name of the datasource that is intended to be used to obtain the data.
The rest of fields as in the previous basic load.
Tips for users
Both the creation screen and the view screen have a space where tips are displayed to make it easier for users to create forms.
...
Internationalization
It is possible to internationalize the forms in a simple way. To do this, a previously defined internationalization must be selected.
...
These internationalizations are defined from this menu entry.
...
Core Technology
OP Forms are based on the open-source Formio.js technology, which is a Javascript library that includes a Form Builder for the creation of forms.
...
And a renderer and SDK that allows rendering of JSON schema forms produced by http://Form.io dentro de su aplicación utilizando JavaScript plano, así como proporciona un SDK de interfaz para comunicarse con las API de within your application using plain JavaScript, as well as providing a front-end SDK for communicating with the http://Form.io.
Además se incluyen numerosos ejemplosNumerous examples are also included: https://formio.github.io/formio.js/app/examples/ y documentación sobre su uso and documentation on its use:https://help.form.io/developers/form-development/form-renderer