---
title: "Demostrador OP Forms (versión 5.3)"
canonical: "https://onesaitplatform-es.refined.site/space/DOC/3903783099/Demostrador%20OP%20Forms%20(versi%C3%B3n%205.3)"
format: markdown
---
> Macro (toc)

# Objetivo

Para facilitar la labor de integración de los **OP Forms** en los distintos proyectos y productos, hemos creado una **aplicación con Vue 2 CLI**, la cual servirá de **referencia para los desarrolladores** ya que se indican todos los elementos y configuraciones necesarias a nivel de código.

Para los usuarios que trabajen con los Formularios, en la primera opción del menú «***Info***» hay una guía con **información y consejos **sobre las** opciones del menú y los componentes.**

**También sirve para trabajar directamente con los Formularios**, su creación, edición, inserción de datos, consulta de datos para un Formulario…, permitiendo con su uso un **desarrollo mucho más ágil**.

# ¿Dónde encontrar el ejemplo?

Hemos subido el ejemplo a GitHub. Podéis acceder a él desde [aquí](https://github.com/onesaitplatform/onesaitplatform-forms).

# Opciones del menú

![image](media://4cfbcbab-47b4-4be4-a17b-7e494d125554)

## *Info*

- Guía con **información y consejos **sobre las** opciones del menú y los componentes.**

![image](media://ee6a6623-7472-4667-9879-3e509e4001b5)


![image](media://9fe54cbd-33d1-4a97-bc22-0a9f521c493a)

## *Form List*

![image](media://a8a97f52-d979-481f-8e6a-6b6628758e53)

Todas estas opciones tienen un panel a la izquierda donde se rellenan los datos para poder obtener la información necesaria, en este caso por ejemplo se rellena el **X-OP-APIKey o *****token***** de usuario** **de la Plataforma** y al pulsar en «***SHOW***» se recupera un listado con los Formularios a los que tiene acceso ese usuario.

## *Complete the application form*

En esta opción se podrá rellenar el Formulario y almacenar la información en la Entidad del Formulario al realizar el *submit*. Si se ha rellenado el campo «***Redirect***» del botón de «***Submit***», redirigirá la página a la URL indicada.

![image](media://d8d6c453-830d-4e76-95f7-e0a16fe938f8)


## *Edit filled form*

En este caso, al introducir el identificador del Formulario y del dato se podrán ver los datos y modificarlos.

![image](media://0b0df461-e227-451a-ab95-3a234f3d3d68)

![image](media://6a0f7afe-ef88-45f4-bed9-45a8b82e8029)


## *Create form*

Permite crear un Formulario indicando el nombre de este y seleccionando una Entidad de las disponibles para el usuario del *token *dado.

![image](media://398953b2-ab38-4104-bc7c-fa71b1e4933f)

![image](media://658c6f3d-70b1-4ae9-b9bf-ec5b3d53ff0a)

Pulsando el botón** **«*SHOW*» mostrará el editor de Formularios con los componentes y el lienzo.

Tras obtener el diseño deseado y haber dado un nombre y Entidad, pulsando el **botón** «***CREATE***» se habrá creado el nuevo Formulario. Se puede ver en el listado de Formularios.

## *Update form*

Pueden rellenarse los campos y pulsar el botón «*SHOW*» o desde el listado de Formularios, pulsar el botón «*UPDATE*» del Formulario que se quiere modificar.

Aparecerá cargado y se podrán realizar los cambios oportunos y guardarlos.

![image](media://be36ae1f-cedf-45e8-ad27-89d0193e321c)

# Botón «Build Form From Entity»

Tanto en la pestaña de creación de Formulario como la de actualización de Formulario aparece el botón «*BUILD FORM FROM ENTITY*».

![image](media://f102e306-a173-4d2a-8601-7ee4e6159cf4)

Éste, tras seleccionar una Entidad, permite generar el Formulario a partir de los campos definidos en la estructura de la Entidad.

# Estructura del proyecto

![image](media://78c221f9-b0dc-4ba9-a53a-6145ea05d27c)

- «**App.vue**» es el componente raíz de la aplicación. Importa la librerías y estilos necesarios de la instalación de la Plataforma y recopila los datos de *token*, Entidad… Desde él, se invoca al componente «**ShowForm**», que es el componente que contiene toda la lógica para mostrar los Formularios, ya sea en modo vista o edición dependiendo de los parámetros.

Por ejemplo: 

```
  <ShowForm
                    v-bind:platformbase="platformbase"
                    v-bind:appbase="appbase"
                    v-bind:xopapikey="xopapikey"
                    v-bind:formid="formid"
                    v-bind:dataoid="dataoid"
                    v-bind:editForm="false"
                    @interface="getFormInterface"
                  />
                  
```

Las variables a definir en «**App.vue**» indican el host de la Plataforma** **«**platformbase**»** **y el host de la aplicación «**appbase**».** **También, si se desea, se puede inicializar «**xopapikey**»** **con un *token *por defecto en local durante el desarrollo para que aparezca precargado.

```
      appbase: "http:localhost:8080",
      platformbase: "https://lab.onesaitplatform.com/",
      xopapikey: "6e53f4a1198b4a10b4bb9bbfe26238f4",
```


- «**onesaitPlatformServices.js**»** **implementa todos los **servicios** que pueden necesitarse para trabajar con los Formularios invocando a «***API REST***»** de la Plataforma**, como «loadEntities», «loadFormsList»…
- «**InfoApp.vue**» es el componente con el contenido de la pestaña «*Info*».