Objetivo

Para facilitar la labor de integración de los OP Forms en los distintos proyectos y productos, hemos creado una app 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, hayuna guía con información y consejos sobre las opciones del menú y los componentes.

También sirve para trabajar directamente con los formularios, 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 en onesaitplatform-forms.

Opciones del menú

Opción Info

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

Opción Form List

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 plataforma y al pulsar en SHOW se recupera un listado con los formularios a los que tiene acceso ese usuario.

Opción 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.

Opción Edit filled form

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

Opción Create form

Permite crear un formulario indicando el nombre de este y seleccionando una entidad de las disponibles para el usuario del token dado.

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.

Opción Update form

Puede rellenarse los campos y pulsar 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.

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:

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

Estructura del proyecto

• 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"
                  />
                  

Variables a definir en App.vue, indican el host de 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 plataforma, como loadEntities, loadFormsList,…

• InfoApp.vue es el componente con el contenido de la pestaña Info.