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

Open

Option Info

Guide with information and tips on menu options and components.

Open

Form List Option

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

The button appears on both the form creation and form update tabs:

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

Project structure

• App.vue 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:

Variables to define in App.vue, indicate 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.

• onesaitPlatformServices.js implements all the services that may be needed to work with the forms by invoking platform REST APIs, such as loadEntities, loadFormsList,....

• InfoApp.vue is the component with the content of the Info tab.