Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

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

Opciones del menú

Info

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

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

Edit filled form

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

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.

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.

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

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

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

  • No labels