| Table of Contents |
|---|
Objetivo
Para facilitar la labor de integración de los OP Forms en los distintos proyectos y productos, hemos creado una app 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 Formularios, en la primera opción del menú «Info, hayuna » 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 formulariosFormularios, su creación, edición, inserción de datos, consulta de datos para un formulario Formulario…, permitiendo con su uso un desarrollo mucho más ágil.
¿Dónde encontrar el ejemplo?
Hemos subido el ejemplo a GitHub, podéis . Podéis acceder a él en onesaitplatform-formsdesde aquí.
Opciones del menú
...
...
Info
Guía con i nformación 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 plataformala Plataforma y al pulsar en «SHOW» se recupera un listado con los formularios Formularios a los que tiene acceso ese usuario.
...
Complete the application form
En esta opción se podrá rellenar el formulario Formulario y almacenar la información en la entidad Entidad del formulario Formulario al realizar el submit, si . Si se ha rellenado el campo «Redirect» del botón de submit «Submit», redirigirá la página a la url URL indicada.
...
...
Edit filled form
En este caso, al introducir el identificador del formulario Formulario y del dato se podrán ver los datos y modificarlos.
...
...
Create form
Permite crear un formulario Formulario indicando el nombre de este y seleccionando una entidad Entidad de las disponibles para el usuario del token dado.
...
Pulsando el botón«SHOW» mostrará el editor de formularios Formularios con los componentes y el lienzo.
Tras obtener el diseño deseado y haber dado un nombre y entidad Entidad, pulsando el botón «CREATE» se habrá creado el nuevo formularioFormulario. Se puede ver en el listado de formulariosFormularios.
...
Update form
Puede Pueden rellenarse los campos y pulsar el botón «SHOW» o desde el listado de formularios Formularios, pulsar el botón «UPDATE» del formulario 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 Formulario como la de actualización de formulario Formulario aparece el botón :
...
«BUILD FORM FROM ENTITY».
...
Éste, tras seleccionar una entidadEntidad, permite generar el formulario Formulario a partir de los campos definidos en la estructura de la entidadEntidad.
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, … Entidad… Desde él, se invoca al componente «ShowForm», que es el componente que contiene toda la lógica para mostrar los formularios Formularios, ya sea en modo vista o edición dependiendo de los parámetros.
...
| Code Block |
|---|
<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 Las variables a definir en «App.vue, » indican el host de plataforma “platformbase“ la Plataforma«platformbase»y el host de la aplicación “appbase”«appbase».También, si se desea, se puede inicializar «xopapikey»con un token por defecto en local durante el desarrollo para que aparezca precargado.
| Code Block |
|---|
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 Formularios invocando a «API REST» de plataformala Plataforma, como loadEntities«loadEntities», loadFormsList,…«loadFormsList»…
«InfoApp.vue» es el componente con el contenido de la pestaña «Info».