Whats the point in running 3 different configs of webpack in sequence?
Especially since this command is used in the build command?

Obviously I'm missing something… I've added custom Javascript to the Custom CSS and Javascript section of the Developer Portal (using next.form.io) but the custom component is not appearing anywhere.

I have created a custom component in FormIO. I have followed the tutorial on the Check Matrix component and I am having issues trying to:

1. get the type to render as a custom name "e.g. mycomp". It returns "unknown component: mycomp" in the builder. I reverted to using a type that is known by FormIO like "textfield" and it renders
2. Adding eventlisteners to my component is not triggering

How can I get the component to render and add my events to this component? What i am doing wrong?

InputComponent.ts

  Import { Components } from "formiojs";

   const Field = Components.components.field;


   export default class loqateAddressComponent extends (Field as any) {
   constructor(component, options, data) {
    super(component, options, data);
   
   }

   static schema(...extend:any[]) {
   
     return Field.schema({
         type: 'textfield', //want this to be customname but it wont render
         label: 'Xrm Address',
         key: 'loqateaddress',
         ...extend});
   }

    static get builderInfo() {
      return {
       title: 'Loqate Address',
       group: 'basic',
       icon: 'home',
       documentation: '/userguide/#address',
       weight: 35,
       schema: loqateAddressComponent.schema(),
     };
   }

   renderInput(){
   return this.renderTemplate('input', {
     input: {
       type: 'input',
       ref: `${this.component.key}`,
       attr: {
         id: `${this.component.key}`,
         class: 'form-control',
         type: 'search',
       }
     }
   });
  }

  public render(children) {
   return super.render(this.renderTemplate('loqateaddress',{
     renderInputType: this.render.bind(this)
   }));
 }

 public attach(element: any) {
   const refs = {};
   refs[`${this.component.key}`] = "input";

   this.loadRefs(element, refs);
   console.log("attach rendered");

   this.addEventListener(element, 'change', ()=> { 
     console.log("address clicked");
   });
   

   return super.attach(element);
 }


 

}

Form.ejs (For my template)

<div>
    {% {{ctx.renderInputType}} %}
</div>

Ok, just tried to check this out and do npm install.

Doesn't compile:
$ npm install
npm WARN prepublish-on-install As of npm@5, prepublish scripts are deprecated.
npm WARN prepublish-on-install Use prepare for build steps and prepublishOnly for upload-only.
npm WARN prepublish-on-install See the deprecation note in npm help scripts for more information.

@formio/[email protected] prepublish /Users/tagg/sietch-formio-components
npm run build

@formio/[email protected] build /Users/tagg/sietch-formio-components
tsc && gulp templates && npm run webpack && node-sass ./src/sass/contrib.scss ./dist/formio-contrib.css

src/components/CheckMatrix/CheckMatrix.form.ts:1:33 - error TS2307: Cannot find module 'formiojs/components/_classes/nested/NestedComponent.form'.

1 import nestedComponentForm from 'formiojs/components/_classes/nested/NestedComponent.form';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/components/CheckMatrix/CheckMatrix.ts:6:28 - error TS2307: Cannot find module 'formiojs'.

6 import { Components } from 'formiojs';
~~~~~~~~~~

src/use.ts:1:24 - error TS2307: Cannot find module 'formiojs'.

1 import { Formio } from 'formiojs';
~~~~~~~~~~

Found 3 errors.

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @formio/[email protected] build: tsc && gulp templates && npm run webpack && node-sass ./src/sass/contrib.scss ./dist/formio-contrib.css
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @formio/[email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/tagg/.npm/_logs/2020-05-04T14_16_11_268Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @formio/[email protected] prepublish: npm run build
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @formio/[email protected] prepublish script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/tagg/.npm/_logs/2020-05-04T14_16_11_294Z-debug.log

Environment

Please provide as many details as you can:
Add the following code when customizing the component
get className() {
let name = table-responsive ${super.className}
if (!this.component.bordered) {
name += ' no-top-border-table'
}
return name
}
report an error:
Cannot read properties of undefined (reading 'hasOwnProperty')

• Hosting type
  • Form.io
  • Local deployment
    • Version:
• Formio.js version:
• Frontend framework:
• Browser:
• Browser version:

Steps to Reproduce

Expected behavior

Observed behavior

Example

If possible, please provide a screenshot, live example (via JSFiddle or similar), and/or example code to help demonstrate the issue.

For code or form JSON, please enclose in a code block:

// your code here

 get className() {
    let name = `table-responsive ${super.className}`
    if (!this.component.bordered) {
      name += ' no-top-border-table'
    }
    return name
  }

Attempting to implement the sample CheckMatrix custom component as code in a project as a starting point to developing our own custom component. Importing as shown (sort of) in the documentation at https://formio.github.io/formio.js/app/examples/customcomponent.html

import { Formio } from "formiojs";
import checkmatrix from "./components";
(Formio as any).use(checkmatrix);

(which replaces importing from the npm package)
Component fails to render, in its place is "Unknown component: checkmatrix"

Added a console.log to show that the schema is being accessed, but the component constructor fails to execute.
What steps are missing?

Environment

Windows
NodeJS 10.15.1

Issue

I have an issue building this template to support ie11.
When including the formio-contrib.use.min.js file along with formiojs, I am seeing an error triggered on the formio.full.min.js file in IE11:
e.fetch.polyfill=!0

Chrome and Edge work as expected.

The original bundled contrib/dist/formio-contrib.use.min.js works fine , so it seems to be an issue with the build?
Typescript seems to be configured for IE11 support. I have tried different versions of Node and dependencies, but no luck so far.

To reproduce

Download the repo
run npm install and use the newly built formio-contrib.use.min.js file as described in the readme:

Or you can use the formio-contrib.use.min.js file which automatically adds the Formio.use method.

<link rel="stylesheet" href="https://unpkg.com/formiojs@latest/dist/formio.full.min.css">
<script src="https://unpkg.com/formiojs@latest/dist/formio.full.min.js"></script>
<script src="https://unpkg.com/@formio/contrib@latest/dist/formio-contrib.use.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@formio/contrib@latest/dist/formio-contrib.css">

Hi all,

I'm willing to create a custom component that includes an entry field and drop-down list next to it, for example to choose the language or the unit of the entered text.

Could you please give me some hints how to tackle this task?

Concrete, I would like to know the following:

1. from which component to derive? Container?
2. how to use renderTemplate and pass textfield and select objects to it?

I'm struggling with it since days, and don't know how to move forward!

Thanks and regards

I use contrib's test page quite a bit for custom component development, but I also heavily use the evalContext for my validators. Is there a good way to inject the evalContext into the form for doing this testing? My assumption would be in https://github.com/formio/contrib/blob/master/index.html. Thank You

Environment

Please provide as many details as you can:
Add the following code when customizing the component
get className() {
let name = table-responsive ${super.className}
if (!this.component.bordered) {
name += ' no-top-border-table'
}
return name
}
report an error:
Cannot read properties of undefined (reading 'hasOwnProperty')

• Hosting type
  • Form.io
  • Local deployment
    • Version:
• Formio.js version:
• Frontend framework:
• Browser:
• Browser version:

Steps to Reproduce

Expected behavior

Observed behavior

Example

If possible, please provide a screenshot, live example (via JSFiddle or similar), and/or example code to help demonstrate the issue.

For code or form JSON, please enclose in a code block:

// your code here
/**
 * This file shows how to create a custom component.
 *
 * c
 */
import { Components } from 'formiojs'
const FieldComponent = (Components as any).components.field
import editForm from './CheckMatrix.form'

/**
 * Here we will derive from the base component which all Form.io form components derive from.
 *
 * @param component
 * @param options
 * @param data
 * @constructor
 */
export default class CheckMatrix extends (FieldComponent as any) {
  public checks: Array<Array<any>>
  constructor(component, options, data) {
    super(component, options, data)
    this.checks = []
  }

  static schema() {
    return FieldComponent.schema({
      type: 'checkmatrix',
      numRows: 3,
      numCols: 3,
    })
  }

  public static editForm = editForm

  static builderInfo = {
    title: 'Check Matrix',
    group: 'basic',
    icon: 'fa fa-table',
    weight: 70,
    documentation: 'http://help.form.io/userguide/#table',
    schema: CheckMatrix.schema(),
  }

// 添加这 会report error
  get className() {
    let name = `table-responsive ${super.className}`
    if (!this.component.bordered) {
      name += ' no-top-border-table'
    }
    return name
  }

  get tableClass() {
    let tableClass = 'table '
    ;['striped', 'bordered', 'hover', 'condensed'].forEach((prop) => {
      if (this.component[prop]) {
        tableClass += `table-${prop} `
      }
    })
    return tableClass
  }

  renderCell(row, col) {
    return this.renderTemplate('input', {
      input: {
        type: 'input',
        ref: `${this.component.key}-${row}`,
        attr: {
          id: `${this.component.key}-${row}-${col}`,
          class: 'form-control',
          type: 'checkbox',
        },
      },
    })
  }

  public render(children) {
    return super.render(
      this.renderTemplate('checkmatrix', {
        tableClass: this.tableClass,
        renderCell: this.renderCell.bind(this),
      })
    )
  }

  /**
   * After the html string has been mounted into the dom, the dom element is returned here. Use refs to find specific
   * elements to attach functionality to.
   *
   * @param element
   * @returns {Promise}
   */
  attach(element) {
    const refs = {}

    for (let i = 0; i < this.component.numRows; i++) {
      refs[`${this.component.key}-${i}`] = 'multiple'
    }

    this.loadRefs(element, refs)

    this.checks = []
    for (let i = 0; i < this.component.numRows; i++) {
      this.checks[i] = Array.prototype.slice.call(this.refs[`${this.component.key}-${i}`], 0)

      // Attach click events to each input in the row
      this.checks[i].forEach((input) => {
        this.addEventListener(input, 'click', () => this.updateValue())
      })
    }

    // Allow basic component functionality to attach like field logic and tooltips.
    return super.attach(element)
  }

  /**
   * Get the value of the component from the dom elements.
   *
   * @returns {Array}
   */
  getValue() {
    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
  }

  /**
   * Set the value of the component into the dom elements.
   *
   * @param value
   * @returns {boolean}
   */
  setValue(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
      }
    }
  }
}

Hello,
I'm trying to add drag and drop areas into a custom component.
To make it work, i tried to render a 'fieldset' component into my custom component but i cannot drop items into it.
Is there a way to make it work ?

Ideally i'd make a accordion with custom values. Eg. https://developer.mozilla.org/fr/docs/Web/HTML/Element/summary
The summary would be based on parameters (a datagrid i guess) and the values could be anything the user wants : a password field, a date field, a checkbox...
Thank you

Would be nice if the other components are included.

I have formio https://github.com/formio/formio.git running in my local system.
I want to show the custom contrib components in the edit form page along with the default component, so that I can use these as drag and drop similar to other components.

What are the steps required to add custom components in left navigation bar of edit form along with default component?

In some basic components there's a "data" tab parameters (see image), i want it on my custom components but i dont know how to implement it because there's absolutly no documentation...

Basic component :

My component :

Does anyone has aldready did it ?
Thank you