Formio Url - v22-appfactory/appfactory-wiki GitHub Wiki

In most cases server requests to the back-end/services layer are done from the Vue UI components. The user clicks the Submit button, the Vue component gets the submit event directed to a handler, and a call is made to the REST interface to process the data submission. There are cases, however, where the Formio library makes calls directly to a back-end. An example would be when loading a resource used to populate the options in a select component. The Formio library was designed to provide a front-end for a database service and by default it will make these automatic calls to the URL for the database service provided by Formio. This needs to be overridden to make calls to the Appfactory services instead. Formiojs provides a 'url' attribute that allows this redirection to take place.

    <formio
      ref="appForm"
      class="formioForm"
      v-if="showForm"
      :form="formComponents"
      :url="serverUrl"
    ...
      v-on:resourceLoaded="resourceLoaded"
    />

In the example the URL to be used is in the 'serverUrl' variable which is a 'computed' value pulled from the application store:

    serverUrl() {
      return this.$store.getters.serverUrl;
    }

The store 'serverUrl' is determined based on how the application is started and provides for a variable protocol, domain, and port.

Once Formio is loaded there are properties on the Formio object that are updated for the custom URL. This is done in the App.vue in a call to the store on startup. App.vue

import { Formio } from 'formiojs';
...
    const projectUrl = Formio.getProjectUrl();
    if (!projectUrl.startsWith(this.$store.getters.serverUrl)) {
      this.$store.dispatch('setFormioAppId', '');
    }

store.js

import { Formio } from 'formiojs';
...
    formioAppId: (state, payload) => {
      const url = state.serverUrl + (payload === '' ? '' : `/${payload}`);
      Formio.setBaseUrl(url);
      Formio.setProjectUrl(url);
    },

Matching services endpoints are provided for the automatic Formio requests. Using the example of the resources request there are two endpoints, one to match the Formio request and one for internal use. A sample request is: http://localhost:3000/form/4d7236e0-2a28-11e9-9453-b905fa127ca0/submission?limit=100&skip=0

The formRoutes routes/URLs start with '/form' based on the app.use statement in app.js.
app.js

app.use('/form', require('./routes/formRoutes').default);

formRoutes.js

formRoutes.get('/:resourceId/submission', controller.getResourceValues);
formRoutes.get('/:resourceId', controller.getResourceValues);