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

...

Objective

To facilitate the work of integrating OP Forms in different projects and products, we have created an app with Vue 2 CLI, which will serve as a reference for developers since all the necessary elements and configurations at code level are indicated.

For users working with the forms in the first option of the Info menu, there is a guide with information and tips on the menu options and components.

It also serves to work directly with the forms, creating, editing, inserting data, querying data for a form allowing with its use a much more agile development.

Where to find the example?

We have uploaded the example to GitHub, you can access it at onesaitplatform-forms.

Menu options

...

Option Info

Guide with information and tips on menu options and components.

...

...

Form List Option

...

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 All these options have a panel on the left where you fill in the data to obtain the necessary information. In this case, for example, you fill in the 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 guardarlosor platform user token and when you click on SHOW, a list of the forms to which that user has access is retrieved.

Option Complete the application form

In this option you can fill in the form and store the information in the form entity when submitting, if you have filled in the Redirect field of the submit button it will redirect the page to the indicated url.

...

Edit filled form option

In this case, by entering the form and data identifier, the data can be viewed and modified.

...

Create form option

Allows to create a form by indicating the name of the form and selecting an entity from those available for the user of the given token.

...

Pressing the SHOW button will display the form editor with the components and the canvas.

After obtaining the desired design and having given a name and entity by pressing the CREATE button the new form will have been created. It can be seen in the list of forms.

Update form option

You can fill in the fields and press SHOW or from the list of forms click on the UPDATE button of the form you want to modify.

It will appear loaded and you will be able to make the appropriate changes and save them.

...

Build Form From Entity

Tanto en la pestaña de creación de formulario como la de actualización de formulario aparece el botónThe button appears on both the form creation and form update tabs:

...

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

...

After selecting an entity, it allows you to generate the form from the fields defined in the entity structure.

Project structure

...

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

...

• is the root component of the application. It imports the necessary libraries and styles from the Platform installation and collects the token data, entity, ... From it, the ShowForm component is invoked, which is the component that contains all the logic to display the forms either in view or edit mode depending on the parameters.

For example:

  <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 to define in 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 precargadoindicate the platform host "platformbase" and the application host "appbase". Also, if desired, you can initialize xopapikey with a local default token during development so that it appears preloaded.

      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 implements all the services that may be needed to work with the forms by invoking platform REST APIs, such as loadEntities, loadFormsList,…....

• InfoApp.vue es el componente con el contenido de la pestaña Info is the component with the content of the Info tab.