ES5 Custom Component

checkmatrix.js

/**
 * Get the base component class by referencing Formio.Components.components map.
 */
var BaseComponent = Formio.Components.components.base;

/**
 * Create a new CheckMatrixComponent "class" using ES5 class inheritance notation. 
 * https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance
 * 
 * Here we will derive from the base component which all Form.io form components derive from.
 *
 * @param component
 * @param options
 * @param data
 * @constructor
 */
function CheckMatrixComponent(component, options, data) {
  BaseComponent.prototype.constructor.call(this, component, options, data);
}

// Perform typical ES5 inheritance
CheckMatrixComponent.prototype = Object.create(BaseComponent.prototype);
CheckMatrixComponent.prototype.constructor = CheckMatrixComponent;

/**
 * Define what the default JSON schema for this component is. We will derive from the BaseComponent
 * schema and provide our overrides to that.
 * @return {*}
 */
CheckMatrixComponent.schema = function() {
  return BaseComponent.schema({
    type: 'checkmatrix',
    numRows: 3,
    numCols: 3
  });
};

/**
 * Register this component to the Form Builder by providing the "builderInfo" object.
 * 
 * @type {{title: string, group: string, icon: string, weight: number, documentation: string, schema: *}}
 */
CheckMatrixComponent.builderInfo = {
  title: 'Check Matrix',
  group: 'basic',
  icon: 'fa fa-table',
  weight: 70,
  documentation: 'http://help.form.io/userguide/#table',
  schema: CheckMatrixComponent.schema()
};

/**
 *  Tell the renderer how to build this component using DOM manipulation. 
 */
CheckMatrixComponent.prototype.build = function() {
  this.element = this.ce('div', {
    class: 'table-responsive'
  });
  this.createLabel(this.element);

  var tableClass = 'table ';
  ['striped', 'bordered', 'hover', 'condensed'].forEach(function(prop) {
    if (this.component[prop]) {
      tableClass += `table-${prop} `;
    }
  }.bind(this));
  
  var table = this.ce('table', {
    class: tableClass
  });

  // Build the body.
  var tbody = this.ce('tbody');
  this.inputs = [];
  this.checks = [];
  for (let i = 0; i < this.component.numRows; i++) {
    var tr = this.ce('tr');
    this.checks.push([]);
    for (let j = 0; j < this.component.numCols; j++) {
      var td = this.ce('td');
      this.checks[i][j] = this.ce('input', {
        type: 'checkbox'
      });
      this.addInput(this.checks[i][j], td);
      tr.appendChild(td);
    }
    tbody.appendChild(tr);
  }
  table.appendChild(tbody);
  this.element.appendChild(table);
};

/**
 * Provide the input element information. Because we are using checkboxes, the change event needs to be 
 * 'click' instead of the default 'change' from the BaseComponent.
 * 
 * @return {{type, component, changeEvent, attr}}
 */
CheckMatrixComponent.prototype.elementInfo = function() {
  const info = BaseComponent.prototype.elementInfo.call(this);
  info.changeEvent = 'click';
  return info;
};

/**
 * Tell the renderer how to "get" a value from this component.
 * 
 * @return {Array}
 */
CheckMatrixComponent.prototype.getValue = function() {
  var value = [];
  for (var rowIndex in this.checks) {
    var row = this.checks[rowIndex];
    value[rowIndex] = [];
    for (var colIndex in row) {
      var col = row[colIndex];
      value[rowIndex][colIndex] = !!col.checked;
    }
  }
  return value;
};

/**
 * Tell the renderer how to "set" the value of this component.
 * 
 * @param value
 * @return {boolean}
 */
CheckMatrixComponent.prototype.setValue = function(value) {
  if (!value) {
    return;
  }
  for (var rowIndex in this.checks) {
    var row = this.checks[rowIndex];
    if (!value[rowIndex]) {
      break;
    }
    for (var colIndex in row) {
      var col = row[colIndex];
      if (!value[rowIndex][colIndex]) {
        return false;
      }
      let checked = value[rowIndex][colIndex] ? 1 : 0;
      col.value = checked;
      col.checked = checked;
    }
  }
};

// Use the table component edit form.
CheckMatrixComponent.editForm = Formio.Components.components.table.editForm;

// Register the component to the Formio.Components registry.
Formio.Components.addComponent('checkmatrix', CheckMatrixComponent);

// Modify the builder configurations.
Formio.builderConfig = {
  builder: {
    basic: false,
    advanced: false,
    data: false,
    customBasic: {
      title: 'Basic Components',
      default: true,
      weight: 0,
      components: {
        textfield: true,
        textarea: true,
        email: true,
        phoneNumber: true,
        checkmatrix: true
      }
    },
    custom: {
      title: 'User Fields',
      weight: 10,
      components: {
        firstName: {
          title: 'First Name',
          key: 'firstName',
          icon: 'fa fa-terminal',
          schema: {
            label: 'First Name',
            type: 'textfield',
            key: 'firstName',
            input: true
          }
        },
        lastName: {
          title: 'Last Name',
          key: 'lastName',
          icon: 'fa fa-terminal',
          schema: {
            label: 'Last Name',
            type: 'textfield',
            key: 'lastName',
            input: true
          }
        },
        email: {
          title: 'Email',
          key: 'email',
          icon: 'fa fa-at',
          schema: {
            label: 'Email',
            type: 'email',
            key: 'email',
            input: true
          }
        },
        phoneNumber: {
          title: 'Mobile Phone',
          key: 'mobilePhone',
          icon: 'fa fa-phone-square',
          schema: {
            label: 'Mobile Phone',
            type: 'phoneNumber',
            key: 'mobilePhone',
            input: true
          }
        }
      }
    },
    layout: {
      components: {
        table: false
      }
    }
  },
  editForm: {
    textfield: [
      {
        key: 'api',
        ignore: true
      }        
    ]
  }
};