The DebugComponent is a custom component that was created to act as a guideline for adding custom components. The steps taken to create it and add it to Formio are described here.

The component displays the form properties Formio form.currentUser, form.customData.formData, and form.relatedData. These properties represent the various form data used in component scripting and are the results of different requests in the formeventactions for a page. The test page / pageform displays a list of Test App work requests. As the work requests are selected for edit (clicking on the edit button in the data table) requests are made to the back-end to load the form properties. The debug component displays the state of the form properties.

Test pages, pageforms, menuitems, and formeventactions records were created to work with the DebugComponent and were added to the Test Application SQL scripts. The page is in the menu tree as Test Application/Samples/Custom Components.

Create a module DebugComponent.js in src/components/debugcomponent.

• Extend a Formio component.
• Register the component with Formio

class DebugComponent extends FieldComponent {
  constructor(component, options, data) {
    super(component, options, data);
  }
  ...
}

Formio.registerComponent('debugcomponent', DebugComponent);

• Add the schema and builderInfo attributes

  static schema() {
    return FieldComponent.schema({
      type: 'debugcomponent'
    });
  }

  static builderInfo = {
    title: 'Debug Component',
    group: 'basic',
    icon: 'list-alt',
    weight: 70,
    documentation: 'http://help.form.io/userguide/#table',
    schema: DebugComponent.schema()
  };

• In App.vue add a require statement to cause the module to be executed and register

const DebugComponent = require('./components/debugcomponent/DebugComponent.js');

NOTE: Forcing the debug component to load and execute is very important to including the component in Form Builder.

The custom display is accomplished by overriding the renderContent method. The rendering is done using HTML elements and data from the _currentForm._form attribute once they are available in the component object.

  renderContent() {
    let content = '<div><h5>Debug Component</h5>';

    if(this._currentForm && this._currentForm._form) {
      const form = this._currentForm._form;

      // current user
      content += '<div style="color: blue">form.currentUser</div>';
      const currentUser = JSON.stringify( form.currentUser ? form.currentUser : {} );
      content += `<div>${currentUser}</div>`;

      // form data
      content += '<div style="color: blue">form.customData.formData</div>';
      const formData = JSON.stringify( form.customData && form.customData.formData ? form.customData.formData : {} );
      content += `<div>${formData}</div>`;

      // related data
      content += '<div style="color: blue">form.relatedData</div>';
      const relatedData = JSON.stringify( form.relatedData ? form.relatedData : {} );
      content += `<div>${relatedData}</div>`;
    }

    content += '</div>';

    return this.renderTemplate('html', {
      component: this.component,
      tag: this.component.tag,
      attrs: [],
      content: content,
      singleTags: this.singleTags
    });
  }

The Debug Component interacts with the Formio form using the settings in the component's edit dialog which controls the properties for the component in a specific page. In order to cause the component to re-render when a work request is selected or the Reload button is clicked it was necessary to add logic for the component on the page.

In order to call the renderContent method when a work request is selected it was necessary to check the 'Refresh On Change' checkbox on the Display tab.

In order to clear a selected work request a 'Reload' button was added with an Action set to 'Event' and the Button Event set to 'clear'. This causes a clear event to fire when the button is clicked which will cause the Application.vue page to clear the form data (customData and relatedData properties). On the Debug Component's Logic tab an Advanced Logic was added and named 'Refresh'. This logic is triggered by the Event clear and has Javascript that calls the component's delatedRefresh method to re-render the component after the form data changes.

The delatedRefresh method sets a timer to allow the form data to update and then calls the renderContent method which will re-render the updated data and then call the redraw method to refresh the screen:

  delayedRefresh() {
    setTimeout(() => {
      this.renderContent();
      this.redraw();
    }, 300);
  }

The Logic tab settings: