Component Overrides - v22-appfactory/appfactory-wiki GitHub Wiki

Overview

A Formio component can be modified to behave as needed in Appfactory by:

  1. extending the component,
  2. overriding the necessary methods,
  3. replacing the Formio component with the extended component.

An example is the AppfactorySelect component which modifies two Select component methods. This changes the reload behavior. The full source of AppfactorySelect.js is shown as an illustration:

import SelectComponent from 'formiojs/components/select/Select';
import bus from '../../modules/bus';

export default class AppfactorySelectComponent extends SelectComponent {
  constructor(component, options, data) {
    super(component, options, data);
    component.lazyLoad = false; // force lazy load off
    component.valueProperty = 'value';
  }

  // override loadItems
  loadItems(url, search, headers, options, method, body) {
    let newUrl = url;
    newUrl = newUrl.replace('form//submission', `form/${this.component.resource}/submission`);
    this.reloading = true;
    super.loadItems(newUrl, search, headers, options, method, body);
  }

  // override setItems
  setItems(items, fromSearch) {
    if(this.component.refreshOn && !this.path.startsWith('datamap.')) {
      this.setChoicesValue([]);
      this.dataValue = this.component.defaultValue;
    }
    super.setItems(items, fromSearch);
    if(this.reloading) {  // only fire event if loading the resources from a call to the server
      bus.$emit('resource-loaded', this);
      this.reloading = false;
    }
  }
}

The Formio Select component is replaced by the AppfactorySelect in App.vue:

import AllComponents from 'formiojs/components';
...
import AppfactorySelectComponent from './components/select/AppfactorySelect';
    // replace select component with extended AppfactorySelectComponent
    AllComponents.select = AppfactorySelectComponent;
⚠️ **GitHub.com Fallback** ⚠️