---
title: "¿Cómo trabajar con OP Forms?"
canonical: "https://onesaitplatform-es.refined.site/space/DOC/3903782913/%C2%BFC%C3%B3mo%20trabajar%20con%20OP%20Forms%3F"
format: markdown
---
> Macro (toc)

# Objetivo

El objetivo de esta funcionalidad es soportar dentro de Onesait Platform el desarrollo de aplicaciones web con un enfoque *no code*. 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 la Plataforma o en las aplicaciones Vue de ODS (*Onesait Design System*).

Para construir esta funcionalidad nos hemos basado en [Form.io](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 Onesait Platform permitiendo manejar de forma muy sencilla las Entidades de la Plataforma y sus Datasources.

# Funcionalidad principal

## Listado de OP Forms

En el menú del Control Panel se ha añadido una nueva entrada:

![image-20240729-083010.png](media://3c2ade71-f924-4cb5-ad26-68b40b218bbe)

Ésta da acceso al listado de Formularios:

![image-20240729-083157.png](media://a018593c-94e2-424b-a733-f35e5fd32aca)

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 del Formulario.
- **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á el Formulario.
- **Clonado:** este botón permite clonar un Formnulario.

## 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:

![image-20240729-084114.png](media://31f58f74-a2e3-4784-8dee-f6c8bdf3171b)

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 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:

![image-20240729-084626.png](media://578fe695-1955-44b0-8614-6d6c2b032d19)

Tiene dos secciones, la izquierda para la configuración y la derecha la previsualización.** Todo se realiza mediante **«**Drag and Drop**» y** rellenando las propiedades de los componentes. **Al pasar el cursor sobre los símbolos 🛈, mostrarán un** *****tooltip***,** **que sirve de guía a los usuarios para saber el funcionamiento de cada campo.

Finalmente presionando el botón «**Crear**» se creará un nuevo Formulario.

## Generación de Formulario para una Entidad 

![image-20240729-085020.png](media://0b66c84c-984c-4693-987e-7e96d7da7cce)

Tanto en la pantalla de creación de Formulario como de edición, existe el **botón** «**Usar Plantilla**», 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:

![image-20240729-085400.png](media://95a50725-6a27-4590-adae-8def492c2a27)

Éste sería uno de los campos:

![image-20240729-085527.png](media://452936a5-5f51-4d98-b6ec-aefed190079e)

## Carga de datos

Desde el listado, al pulsar en el **botón** «**Mostrar**» (icono del ojo)** **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.

![image-20240729-085918.png](media://33bc6b42-3461-4386-af14-79bc6442eb01)

## 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.

![image-20240729-090435.png](media://6e1f8018-6401-41fa-8a1c-94748509a2b0)

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***».

![image-20240729-090659.png](media://69e65c38-a554-4d37-8907-f14fd57e27e6)

## 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.

![image](media://942d1964-c7b6-440c-9aac-a43b5a71a95f)

Para esto en primer lugar se crea el **Datasource**. Éstos son consultas sobre una o varias Entidades.

![image](media://333dd034-f45b-4a11-a328-93d3c09cacbe)

Luego en el Formulario se arrastraría el ***Select*** y aparece la ventana con la configuración:

![image](media://29db75e9-62e7-4223-b122-0e8afc7f1a91)

Se accede a la pestaña «***Data***» y:

- En el campo «***Data Source Type***» se selecciona el valor «**Datasource**».
- En el campo «***Datasource***», el 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, 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 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 Datasource, obtener los datos de la forma deseada proyectando los campos, ordenándolos…

Esto se consigue accediendo a la pestaña «***Data***» y en el campo «***Data Source Type***» seleccionar el valor «***Custom***», entonces aparece el campo «***Custom Values***», el cual debes rellenar con esta función:

```
from('catalogo').exec().then(function( msg ) {
    values =  msg.map((x) => x.catalogo) ;  
    instance.setItems(values);
  });
```

Donde «**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.

![image-20240729-094545.png](media://71185465-c1e9-41e3-993f-29f3e53d0118)

## Internacionalización

Es posible de forma sencilla internacionalizar los Formularios. Para esto hay que seleccionar una internacionalización previamente definida.

![image-20240729-094841.png](media://29323fd8-c0f5-4eda-9b91-8d4c5efe0441)

Estas internacionalizaciones se definen desde esta entrada del menú.

![image-20240729-095035.png](media://1fb28389-27d4-4cbb-8001-8e507e4dbc66)

# Tecnología base

Los Formularios se basan en la tecnología *open source* **[Form.io](https://formio.github.io/formio.js/#)**, que es una librería JavaScript que incluye un ***[Form Builder](https://formio.github.io/formio.js/app/builder.html)*****[ ](https://formio.github.io/formio.js/app/builder.html)**para la creación de Formularios.

![image](media://fd9a484f-c61f-4f4e-827c-2acc27b3f4c7)


Incluye también un renderizador y un **[SDK ](https://formio.github.io/formio.js/app/sdk)**que permite renderizar los Formularios de esquema JSON producidos por [Form.io](http://Form.io) dentro de su aplicación utilizando JavaScript plano, así como proporciona un SDK de interfaz para comunicarse con las API de [Form.io](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).