Form fields in Formio forms need to be mapped to an application/table/column in order to persist the field values to the database. The mapping is done by specifying the database column in a component's API tab, shown below:

The API tab dialog fields:

• Property Name - must be the column name
• Application - the application that table/column belong to [appid]
• Category - the table [categoryid]
• Text Field Mapping - the column [fieldid]

In the formio component JSON the selections appear as:

...
  "datamap": {
    "appid": 10,
    "fieldid": 466,
    "categoryid": 118
  },
...

NOTE: The names are not a particularly good fit but have not been changed from names used by Formio.

The Appfactory API tab is defined in the following files:

• /src/components/base/Base.js - extends the Formio BaseComponent, overrides the show method, and adds the BaseComponent.api function
• /src/components/base/editForm/Base.edit.api.js - defines the API tab fields and provides server request URLs to load the select fields

Base.js

const _BaseEdit5 = require('./editForm/Base.edit.api');

const _BaseEdit6 = _interopRequireDefault(_BaseEdit5);
...
BaseComponent.api = function () {
  return {
    label: 'API',
    key: 'api',
    weight: 30,
    components: _BaseEdit6.default
  };
};

The Base.edit.api.js file defines the fields on the API tab. As the user selects an 'Application' the application tables are loaded in the 'Category'. When the 'Category' is selected (table) a request is made to get the columns for the table and are loaded into the 'Test Field Mapping' select control. Based on the selections made the 'datamap' element is populated using the IDs for each of the fields as shown above.

The Appfactory API tab needs to be added to the editing dialog for any component that could be mapped to an Appfactory database table. This is done in the /src/components/builder.js which is then added to the FormBuilder.vue.

FormBuilder.vue calls the builder.init method when it is mounted:

const builder = require('../components/builder');
...
  mounted() {
    builder.default.init();
    ...
  },

builder.init
The init function walks the list of components and modifies the component.editForm replacing the existing 'api' tab with the Appfactory api tab.

const _BaseEdit5 = require('./base/editForm/Base.edit.api');
const _BaseEdit6 = _interopRequireDefault(_BaseEdit5);
...
    // find API tab and replace it with application version
    const pos = _.findIndex(tmp.components[0].components, it => it.key === 'api');
    tmp.components[0].components.splice(pos, 1,
      {
        label: 'API',
        key: 'api',
        weight: 30,
        components: _BaseEdit6.default,
      },
    );
  }
  return tmp;