1 Goal
2 Where to find the example?
3 Menu options
- 3.1 Info Option
- 3.2 Form List Option
- 3.3 Option Complete the application form
- 3.4 Edit filled form option
- 3.5 Create form option
- 3.6 Update form option
4 Build Form From Entity
5 Project structure

Goal

To facilitate the work of integrating OP Forms into 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 are indicated at the code level.

For users who work 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 is also used to work directly with forms, creation, editing, data insertion, data query for a form, allowing much more agile development with its use.

Where to find the example?

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

Menu options

Info Option

Guide with information and tips on menu options and components.

Form List Option

All these options have a panel to the left where the data is filled in, to obtain the necessary information. In this case, for example, the X-OP-APIKey or platform user token is filled in and, when you click on SHOW, a list is retrieved with the forms to which that user has access.

Option Complete the application form

In this option, you can fill out the form and store the information in the form entity when submitting. If the Redirect field of the submit button has been filled out, it would redirect the page to the indicated url.

Edit filled form option

In this case, when entering the identifier of the form and the data, you can see and modify the data.

Create form option

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

Pressing the SHOW button will show 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 press the UPDATE button of the form you want to modify.

It will appear loaded and you can make the appropriate changes and save them.

Build Form From Entity

This button appears in both the form creation and form update tabs:

After selecting an entity, it allows the form to be generated from the fields defined in the structure of the entity.

Project structure

App.vue is the root component of the application. It imports the necessary libraries and styles from the Platform installation and collects data from the token, entity, etc. From it, the ShowForm component is invoked, which is the component that contains all the logic to display the forms, either in view or editing 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 to be defined in App.vue, indicate the platform host “platformbase” and the application host “appbase”. If desired, xopapikey can be initialized with a default local token during development so that it appears preloaded.

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

onesaitPlatformServices.js implements all the services that may be needed to work with forms by invoking platform REST APIs, such as loadEntities, loadFormsList,…
InfoApp.vue is the component with the contents of the Info tab.

platform-doc-en

OP Forms Demonstrator with Vue 2