...
El objetivo de esta funcionalidad es soportar dentro de Onesait Platform el desarrollo de aplicaciones Web web con un enfoque NoCode no code. Así, desde el Control Panel podrás crear formulariosFormularios, asignarles Entidades (y datasourcesDatasources) y hacer navegación entre formulariosFormularios.
Estos formularios Formularios podrán integrarse en tu aplicación Webweb, sea cual sea la tecnología UI que uses, por ejemplo en los dashboards Dashboards de la Plataforma o en las aplicaciones Vue de ODS (Onesait Design System).
Para construir esta funcionalidad nos hemos basado en 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 Onesait Platform permitiendo manejar de forma muy sencilla las Entidades de plataforma la Plataforma y sus DataSourcesDatasources.
Funcionalidad principal
Listado de OP Forms
...
Ésta da acceso al listado de formulariosFormularios:
...
Desde este listado se tiene acceso a las siguientes opciones:
Búsqueda de formularioFormulario: A a partir de la lupa se pueden realizar búsquedas en el listado.
Creación de formularioFormulario: Este este botón permite acceder a la pantalla de creación del Formulario.
Vista: Este este botón da acceso a la pantalla de carga de datos y vista del formularioFormulario.
Edición: Este este acceso a la pantalla de edición del formularioFormulario.
Borrado: con este se borrará el Formulario.
Clonado: Este este botón permite clonar un formularioFormnulario.
...
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 formulariosFormularios:
...
Se pueden ir siguiendo los consejos para elaborar el formularioFormulario.
Los pasos necesarios serían:
Dar un nombre al formularioFormulario.
Seleccionar la entidad Entidad en la que se almacenarán los registros creados a partir del formularioFormulario.
Arrastrar desde el panel izquierdo de componentes al lienzo los elementos necesarios para componer el formularioFormulario. Lo ideal es primero arrastrar componentes del layout de «Layout» para dar la estructura que se tiene diseñada y luego ir arrastrando los distintos elementos como campos de texto, de selección, …etc.
Mientras se van arrastrando los distintos elementos, se muestra una ventana modal. Ésta por ejemplo es la del campo texto.:
...
Tiene dos secciones, la izquierda para la configuración y la derecha la previsualización. Todo se realiza mediante drag «Drag and dropDrop» y rellenando las propiedades de los componentes. Al pasar el cursor sobre los símbolos con interrogación🛈, mostrarán untooltip,que sirve de guía a los usuarios para saber el funcionamiento de cada campo.
Finalmente presionando el botón CREATE «Crear» se creará un nuevo formularioFormulario.
Generación de
...
Formulario para una
...
Entidad
...
Tanto en la pantalla de creación de formulario Formulario como de edición de formulario , existe el botónBuild form from entity «Usar Plantilla», el cual tras seleccionar una entidad Entidad generará los campos del tipo pertinente en el formulario Formulario para cada campo de la entidadEntidad.
Por ejemplo para la entidad 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 «Mostrar» (icono del ojo)de alguno de los formularios Formularios, se accede a la pantalla de visualización y carga de datos.
En ésta se aprecia en primer lugar el formulario Formulario vacío y espacio con consejos para el usuario y enlaces a documentación para dar facilidades de uso.
El formulario Formulario podrá rellenarse desde esta pantalla y enviarse para registrar los datos en la entidad Entidad definida para el formularioFormulario.
...
Navegación entre
...
Formularios
A los botones se les pueden asignar distintas acciones en la pestaña «Display, una ». Una de ellas es la del envío del formulario submitFormulario, «Submit».
Para seguir con las prácticasno code de la plataformaPlataforma, se han mejorado los botones de los formularios Formularios añadiendo el campo «Redirect»,el cual, tras realizarse el envío con éxito de los datos del formularioFormulario, cargará en la página actual la url URL que se indica en este campo.
...
Este campo se puede escribir de dos formas, una la url URL completahost + 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 Select, pero la más sencilla es usando los datasources Datasources de Onesait Platform.
...
Para esto en primer lugar se crea el datasource Datasource. Éstos son consultas sobre una o varias entidadesEntidades.
...
Luego en el formulario Formulario se arrastraría el SELECT 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"En el campo «Datasource», el name del datasource en nombre del Datasource. En este caso sería «catalogo».
"En el campo «Value Property"», el valor de cada opción del selector , debe coincidir con el path de los elementos que devuelve el datasource Datasource, por ejemplo:
Si los elementos devueltos por el datasource 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 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 Datasources de la Plataforma en una función JavaScript predefinida que permite las operaciones project, filters, group, sort, offset, limit , y param.Con esto se permite, sin modificar el datasourceDatasource, obtener los datos de la forma deseada proyectando los campos, ordenándolos, …ordenándolos…
Esto se consigue accediendo a la pestaña «Data» y en el Campo campo «Data Source Type» seleccionar el valor «Custom», entonces aparece el campo «Custom Values», el cual debes rellenar con esta funcionfunción:
| Code Block |
|---|
from('catalogo').exec().then(function( msg ) {
values = msg.map((x) => x.catalogo) ;
instance.setItems(values);
}); |
Donde '«catalogo' » sería el nombre del datasource 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 Formularios a los usuarios.
...
Internacionalización
Es posible de forma sencilla internacionalizar los formulariosFormularios. 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 Formularios se basan en la tecnología open - source FormioForm.jsio, que es una librería Javascript JavaScript que incluye un Form Builderpara la creación de formulariosFormularios.
...
Y Incluye también un renderizador y un SDK que permite renderizar los formularios Formularios de esquema JSON producidos por http:// Form.io dentro de su aplicación utilizando JavaScript plano, así como proporciona un SDK de interfaz para comunicarse con las API de http:// Form.io.
Además se incluyen numerosos ejemplos: https://formio.github.io/formio.js/app/examples/ y documentación sobre su uso: https://help.form.io/developers/form-development/form-renderer