formio / contrib

Contributed components for Form.io

A combined form and API platform for Serverless applications

Form.io is a revolutionary combined Form and API platform for Serverless applications. This repository serves as the core Form and API engine for https://form.io. This system allows you to build "serverless" data management applications using a simple drag-and-drop form builder interface. These forms can then easily be embedded within your Angular.js and React applications using the <formio> HTML element.

Walkthrough video and tutorial

For a walkthrough tutorial on how to use this Open Source platform to build a Serverless application, watch the video 0 to M.E.A.N in 30 minutes

Form Building & Rendering Demo

Here is a link to a demo of the Form Building and Form Rendering capability that can be hooked into this API platform.

http://codepen.io/travist/full/xVyMjo/

Run with Docker Compose

The fastest way to run this library locally is to use Docker.

• Install Docker

• Download and unzip this package to a local directory on your machine.

• Open up your terminal and navigate to the unzipped folder of this library.

• Type the following in your terminal

  docker-compose up -d
  

• Go to the following URL in your browser.

  http://localhost:3001
  

• Use the following credentials to login.

  • email: [email protected]
  • password: CHANGEME

• To change the admin password.

  • Once you login, click on the Admin resource
  • Click View Data
  • Click on the [email protected] row
  • Click Edit Submission
  • Set the password field
  • Click Save Submission
  • Logout

• Have fun!

Manual Installation (Node + MongoDB)

To get started you will first need the following installed on your machine.

• Node.js - https://nodejs.org/en/
• MongoDB - http://docs.mongodb.org/manual/installation/
  • On Mac I recommend using Homebrew brew install mongodb-community
  • On Windows, download and install the MSI package @ https://www.mongodb.org/downloads
• You must then make sure you have MongoDB running by typing mongod in your terminal.

Running with Node.js

You can then download this repository, navigate to the folder in your Terminal, and then type the following.

npm install
npm start

This will walk you through the installation process. When it is done, you will have a running Form.io management application running at the following address in your browser.

http://localhost:3001

The installation process will also ask if you would like to download an application. If selected, the application can be found at the following URL.

http://localhost:8080

You can also see the contents of the application (for modification) within the app folder which exists inside of the folder where you downloaded this repository.

Development

To start server with auto restart capability for development simply run this command:

npm run start:dev

Deploy to Hosted Form.io

If you wish to deploy all of your forms and resources into the Form.io Hosted platform @ https://portal.form.io, you can do this by using the Form.io CLI command line tool.

npm install -g formio-cli

Once you have this tool installed, you will need to follow these steps.

• Create a new project within Form.io
• Create an API Key within this project by going to the Project Settings | Stage Settings | API Keys
• Next, you can execute the following command to deploy your local project into Hosted Form.io.

formio deploy http://localhost:3001 https://{PROJECTNAME}.form.io --dst-key={APIKEY}

You will need to make sure you replace {PROJECTNAME} and {APIKEY} with your new Hosted Form.io project name (found in the API url), as well as the API key that was created in the second step above.

This will then ask you to log into the local Form.io server (which can be provided within the Admin resource), and then after it authenticates, it will export the project and deploy that project to the Form.io hosted form.

License Change (March 8th, 2020)

This library is now licensed under the OSL-v3 license, which is a copy-left OSI approved license. Please read the license @ https://opensource.org/licenses/OSL-3.0 for more information. Our goal for the change to OSLv3 from BSD is to ensure that appropriate Attribution is provided when creating proprietary products that leverage or extend this library.

Help

We will be updating the help guides found @ https://help.form.io as questions arise and also to help you get started with Form.io.

Thanks for using Form.io!

The Form.io Team.

Security

If you find and/or think you have found a Security issue, please quietly disclose it to [email protected], and give us sufficient time to patch the issue before disclosing it publicly.

contrib's Issues

"Unknown component" - demo component fails to render

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?

Doesn't work with formio.js [BUG]

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

Use a layout component into a custom one

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

[BUG]

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
      }
    }
  }
}

Contributed component for drag and drop

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?

[Help] create custom component with textfield and select

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

Error with IE11 [BUG]

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">

formio-contrib only contains CheckMatrix - not the other components in src/components

Would be nice if the other components are included.

[BUG]

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
  }

Add the data tab on custom 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

Webpack

contrib/package.json

Line 14 in 8bf9c6e

"webpack": "npm run webpack:dev && npm run webpack:prod && npm run webpack:use",

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

TypeScript FormIO Custom Component doesnt Render & cant add Even Listeners

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>

Help - component not appearing

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.

Question: How to use evalContext in contrib test page.

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