Giter Site home page Giter Site logo

react's Introduction

Join the chat at https://gitter.im/formio/formio StackOverflow

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

    npm install
    docker-compose up
    
  • Go to the following URL in your browser.

    http://localhost:3001
    
  • Use the following credentials to login.

  • 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.

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.

react's People

Contributors

abhishekthorat-tudip avatar alexanderlihodievskiy avatar alexandraramanenka avatar alexeydavyd avatar ayoubsayah avatar batusai513 avatar brendanbond avatar chasesy avatar cymen avatar darabi avatar dependabot[bot] avatar edwinanciani avatar groksrc avatar hamdrive avatar ivan-pik avatar j-perl avatar jafin avatar johnazre avatar joxertmd avatar lane-formio avatar limouren avatar nickkhall avatar nrviens avatar randallknutson avatar roma-formio avatar shuhaib-aot avatar tanyagashtold avatar travist avatar wirob avatar yuryrybak avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react's Issues

Edge delete globalObject[safeGlobalName]; issue

Hey, I'm hoping someone is about to help me on an issue i'm seeing in microsoft edge.

I included formio react and setup a form and it works a treat everywhere except edge (even IE11)

This issue is causing the client site to render a white page with no errors in the console. However the below is what the dev environment gives me.

formio

I would really appreciate a quick response if at all possible

Thanks!

onElementRender incorrect documentation

Looks like the onElementRender callback takes two parameters: the Form.IO instance and the element. Also, the documentation should state that the onElementRender handler must return the element to render (if it does not return anything, the form does not render).

Issue with reduxRouter

I was attempting to compile with browserify a run this on the client side. The compilation goes fine, but when I attempt to render the component I get this error:

[Error] TypeError: undefined is not an object (evaluating '_reactRouter.propTypes.routerContext')
    (anonymous function) (application.js:100423)
    s (application.js:1:259)
    (anonymous function) (application.js:1:307)
    (anonymous function) (application.js:18648)
    s (application.js:1:259)
    (anonymous function) (application.js:1:307)
    (anonymous function) (application.js:18668)
    s (application.js:1:259)
    (anonymous function) (application.js:1:307)
    (anonymous function) (application.js:17687)
    s (application.js:1:259)
    (anonymous function) (application.js:1:307)
    (anonymous function) (application.js:18013)
    s (application.js:1:259)
    (anonymous function) (application.js:1:307)
    (anonymous function) (application.js:17633)
    s (application.js:1:259)
    (anonymous function) (application.js:1:307)
    (anonymous function) (application.js:11)
    (anonymous function) (application.js:46)
    s (application.js:1:259)
    e (application.js:1:427)
    Global Code (application.js:1:444)

Select refreshOn not working

Hi, it seems like the refreshOn only works once.
I have a dropdown that loads from a URL and I have it set up with refreshOn to refresh when another dropdown changes.
This only happens once, when I change the second dropdown a second time it doesn't refresh anymore.

Any thoughts? maybe I'm missing a setting or something to refresh multiple times instead of one?

Thanks in advance,

Juan

FormBuilder is reset when change state ?

Example, I have code:

class CreateForm extends Component {
  constructor() {
    super();

    this.state = {
        components:  {},
        name:  '',
     }
  }
...

render () {
   return (
     <div>
         ...
        <FormBuilder onChangeFormBuilder={this.onChangeFormBuilder} />
        ...
    </div>
  )
}

Anytime 'name' or 'components' was changed, FormBuilder is reset

Server side rendering

When trying to import react-formio:
import Formio from 'react-formio';

following error occures:

C:\Users\kala\workspace\react_fullstack\node_modules\formiojs\node_modules\whatwg-fetch\fetch.js:330
})();
^
ReferenceError: self is not defined
at C:\Users\kala\workspace\react_fullstack\node_modules\formiojs\node_modules\whatwg-fetch\fetch.js:4:7
at Object. (C:\Users\kala\workspace\react_fullstack\node_modules\formiojs\node_modules\whatwg-fetch\fetch.js:330:3)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object. (C:\Users\kala\workspace\react_fullstack\node_modules\formiojs\src\formio.js:9:1)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object. (C:\Users\kala\workspace\react_fullstack\node_modules\react-formio\lib\Formio.js:4:16)

Tab support ??

Goo days, there wiil be a support of tabs ??
The modules are very functional, but has no support of Tabs, it hard to use form builder with no tabs in every version react,ng2, and angularjs

Uncaught TypeError: Cannot read property 'routerContext' of undefined

Hi :) ,

I got that error when I installed react-formio:
"Uncaught TypeError: Cannot read property 'routerContext' of undefined"
The error is in webpack:///./~/redux-view/lib/ReduxView.js

My package.json dependencies are:
"dependencies": {
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-formio": "^0.10.11",
"react-redux": "^4.4.5",
"react-router": "^2.8.1",
"react-router-redux": "^4.0.6",
"redux": "^3.6.0"
}

And node version is v6.4.0

Thanks

Changes in #92 took no effect

Hello again! Thx for replying to #93 and merging #92.
Unfortunately these changes took no effect because PR was merged after new lodash imports were created in code:(
i've prepared new PR #95 to fix this again.
I've also tried to add some linting rules like http://eslint.org/docs/rules/no-restricted-imports, to automatically prevent creating such imports in the future. But it looks like that eslint currently in broken state:( And it is not a part of the project build

Does not support React 16

Expected result
component Formio for react should run fine on react 16

Actual result
Formio relies on createClass not present in react 16, impossible to embed the forms generated in a new React 16 app.

input-group on wrapping every component

I'm having this issue where every component in the form is getting the input-group class, and that class is just for elements with prefix or sufix (or both), and when using bootstrap, the style is messed up.

_this2.builder.destroy() is not a function

I use FormBuilder, as:

render() {
      return (
        <div id="content" className="app-content" role="main">
          <div className="wrapper-md">
            <FormBuilder
              form={{ display: 'form' }}
              onChange={(schema) => this.onChangeFormBuilder(schema)}
            />
          </div>
        </div>
      );
    }

When I move to another component, it has error:

screen shot 2018-05-18 at 10 48 13 am

How can I fixed it ?

Error installing react-formio

I am giving this command npm install react-formio but I get this warning and the form is not able to render

/react-formio/dist/build/Formio.js
Critical dependencies:
1:479-486 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ ./
/react-formio/dist/build/Formio.js 1:479-486

Please guide me how to implement this on my react project

Hello,

Can you please guide me how to implement this on my react project, I'm confused as its mentioned only few lines to get a formbuilder, but i need to customize the whole components inside project and react-app-starterkit isn't working as its trowing module not found error.

Thanks in Advance
Harshith

File Upload Problem

Hello,

Im using the localhost react-formio mode and i want to use the file upload on my form to upload pictures to localhost wisdom db.
So when i use the the interface of formio to add a picture,it works without problem,but when i try to use it on my react project the form does not appear and i got this error on my browser console:
capture d ecran 2016-01-26 a 13 11 23

Sorry for my bad english.

How to run whole project instead of single form.

ReactDOM.render(<Formio src="https://someFormId.form.io/user/login"></Formio> , document.getElementById('app') );

This only renders a single form.
Is there a way to redirect/navigate from one form to another in a react app?

Adapting Form.io to the latest version of react

Hi,

I’m using Form.io for a project at work, and my team and I would like to keep using Form.io as well as being able to upgrade our react version.

I’m currently working on a POC to see what changes are necessary to make Form.io compatible. I’ll send a pull request as soon as I have something stable!

I didn't see any similar, ongoing projects, but please let me know if someone's currently working on the same subject. Thanks!

React and webpack warnings

hi, i'm working with this library in a webpack application, but i'm getting these warnings:

Warning: React.__spread is deprecated and should not be used. Use Object.assign directly or another helper function with similar semantics. You may be seeing this warning due to your compiler. See https://fb.me/react-spread-deprecation for more details.

also i'm getting this in webpack:

WARNING in ./~/react-formio/dist/Formio.js
Critical dependencies: This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ ./~/react-formio/dist/Formio.js 343:501-508

Al so, when using a date component in form.io, the react component associated with the date component does not have any styles.

FormBuilder onChange stops triggering after 4 calls

Created an empty project using create-react-app, and added FormBuilder with a simple console.log event for schema changes. After 4 changes, the event stops triggering.
Sample code:

import React, { Component } from 'react';
import {FormBuilder} from 'react-formio';

class App extends Component {
  render() {
    return (
      <div className="App">
        <FormBuilder 
			form={{ display: 'form' }} 
			onChange={(schema) => console.log(schema)} />
      </div>
    );
  }
}

export default App;

Survey component has a bug

Survey component is allowing you to mark many options on the same row.

image

It is currently trying to access a property from a variable that should be an object though it is actually a string...

This was tested on the https://github.com/formio/react-example project.

Is this bug known? Is this fix on the roadmap? I might be of some help, maybe even submit a Pull Request.

Module not found: Error: Can't resolve, Please help me with this

formiojs v2.32.3, react-formio v2.1.1, node v8.11.4 and npm 5.6.0

Im getting following error when I execute npm run serve

ERROR in .//react-formio/lib/modules/auth/containers/Login.js
Module not found: Error: Can't resolve '../../../components/Formio' in '/Users/activemac05/Desktop/main-project/react-app-starterkit/node_modules/react-formio/lib/modules/auth/containers'
@ ./
/react-formio/lib/modules/auth/containers/Login.js 11:14-51
@ .//react-formio/lib/modules/auth/routes.js
@ ./
/react-formio/lib/modules/auth/index.js
@ ./src/app/auth/index.js
@ ./src/index.js
@ multi webpack/hot/dev-server webpack-hot-middleware/client ./src/index

ERROR in .//react-formio/lib/modules/auth/containers/Register.js
Module not found: Error: Can't resolve '../../../components/Formio' in '/Users/activemac05/Desktop/main-project/react-app-starterkit/node_modules/react-formio/lib/modules/auth/containers'
@ ./
/react-formio/lib/modules/auth/containers/Register.js 11:14-51
@ .//react-formio/lib/modules/auth/routes.js
@ ./
/react-formio/lib/modules/auth/index.js
@ ./src/app/auth/index.js
@ ./src/index.js
@ multi webpack/hot/dev-server webpack-hot-middleware/client ./src/index

ERROR in .//react-formio/lib/modules/resource/containers/Edit.js
Module not found: Error: Can't resolve '../../../components/Formio' in '/Users/activemac05/Desktop/main-project/react-app-starterkit/node_modules/react-formio/lib/modules/resource/containers'
@ ./
/react-formio/lib/modules/resource/containers/Edit.js 11:14-51
@ .//react-formio/lib/modules/resource/routes.js
@ ./
/react-formio/lib/modules/resource/index.js
@ ./src/app/resources/activity/index.js
@ ./src/app/resources/index.js
@ ./src/index.js
@ multi webpack/hot/dev-server webpack-hot-middleware/client ./src/index

ERROR in .//react-formio/lib/modules/resource/containers/View.js
Module not found: Error: Can't resolve '../../../components/Formio' in '/Users/activemac05/Desktop/main-project/react-app-starterkit/node_modules/react-formio/lib/modules/resource/containers'
@ ./
/react-formio/lib/modules/resource/containers/View.js 11:14-51
@ .//react-formio/lib/modules/resource/routes.js
@ ./
/react-formio/lib/modules/resource/index.js
@ ./src/app/resources/activity/index.js
@ ./src/app/resources/index.js
@ ./src/index.js
@ multi webpack/hot/dev-server webpack-hot-middleware/client ./src/index

ERROR in .//react-formio/lib/modules/resource/containers/Create.js
Module not found: Error: Can't resolve '../../../components/Formio' in '/Users/activemac05/Desktop/main-project/react-app-starterkit/node_modules/react-formio/lib/modules/resource/containers'
@ ./
/react-formio/lib/modules/resource/containers/Create.js 11:14-51
@ .//react-formio/lib/modules/resource/routes.js
@ ./
/react-formio/lib/modules/resource/index.js
@ ./src/app/resources/activity/index.js
@ ./src/app/resources/index.js
@ ./src/index.js
@ multi webpack/hot/dev-server webpack-hot-middleware/client ./src/index

Form initial data

Hello, is there a way to initialize a form with a JSON data object?
I would like to do something like this:
<Form form={schema} data={initialData} />

Thanks in advance,

Juan

TypeError: _react2.default.createClass is not a function

./node_modules/react-formio/lib/components/FormComponents/address.js
node_modules/react-formio/lib/components/FormComponents/address.js:25

22 |
23 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
24 |

25 | module.exports = _react2.default.createClass({
26 | displayName: 'Address',
27 | mixins: [_valueMixin2.default, _selectMixin2.default, _componentMixin2.default],
28 | getTextField: function getTextField() {

Unable to convert form io language

Hi,

I am trying to change one language to another language using option field in the Form io with particular data. onclicking the button am trying to change hindi language to malayalam. But Formio component is not rendering

Problem : Unable to change the language.

Node version : v10.3.0
Npm : 6.1.0
Form io : 1.17.1

import * as axios from "axios";
import React, { Component } from "react";
import { Form } from "react-formio";
import { routes } from "../urls";

class MyForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      form: undefined,
      admin: true,
      opts: {
        readOnly: false,
        language: "fr",
        i18n: {
          en: {
            Email: "ईमेल",
            Number: "संख्या",
            Submit: "जमा करें"
          },
          fr: {
            Email: "ഇമെയിൽ",
            Number: "സംഖ്യ",
            Submit: "Submit"
          }
        }
      }
    };
    this.handleSubmitFunction = this.handleSubmitFunction.bind(this);
    this.convertLanguage = this.convertLanguage.bind(this);
  }

  componentDidMount() {
    let components = {
      components: [
        {
          unique: false,
          suffix: "",
          conditional: {
            show: "",
            when: null,
            eq: ""
          },
          hidden: false,
          clearOnHide: true,
          defaultValue: "",
          tableView: true,
          label: "Email",
          protected: false,
          placeholder: "",
          properties: {
            "": ""
          },
          kickbox: {
            enabled: false
          },
          type: "email",
          hideLabel: false,
          prefix: "",
          tags: ["admin"],
          input: true,
          persistent: true,
          inputType: "email",
          key: "email",
          labelPosition: "top"
        },
        {
          suffix: "",
          properties: {
            "": ""
          },
          hidden: false,
          lockKey: true,
          clearOnHide: true,
          defaultValue: "",
          validate: {
            step: "any",
            integer: "",
            multiple: "",
            required: false,
            max: "",
            min: "",
            custom: ""
          },
          tableView: true,
          label: "Number",
          protected: false,
          placeholder: "",
          conditional: {
            show: "",
            when: null,
            eq: ""
          },
          type: "number",
          hideLabel: false,
          prefix: "",
          tags: ["print", "admin"],
          input: true,
          persistent: true,
          inputType: "number",
          key: "number",
          labelPosition: "top"
        },
        {
          type: "button",
          label: "submit",
          action: "submit",
          theme: "primary"
        }
      ]
    };
    this.setState({ form: components });
  }

  convertLanguage(e) {
    var form = { ...this.state.form };
    form.language = "en";

    var opts = { ...this.state.opts };
    opts.language = "en";
    this.setState({ form });
  }

  render() {
      return (
        <div>
          <input
            type="choice"
            onChange={this.convertLanguage}
            name="language"
            value="fr"
          />
          <Form
            onSubmit={this.handleSubmitFunction}
            form={this.state.form}
            options={this.state.opts}
          />
        </div>
      );
  }
}
export default MyFrom;

Children with the same key bug

Hi, i'm using this library but i'm getting this error describe above
captura de pantalla 2016-06-30 a las 5 07 47 p m
captura de pantalla 2016-07-01 a las 9 12 56 a m

this is the JSON that Form.io is generating:

{
   "_id":"577422c86eb8a901003f6401",
   "modified":"2016-06-30T21:18:36.294Z",
   "title":"Register Pacient Form",
   "display":"form",
   "type":"form",
   "action":"https://potatoes.com/registerpacient",
   "name":"registerPacientForm",
   "path":"registerpacient",
   "project":"57741e776eb8a901003f63ed",
   "created":"2016-06-29T19:34:32.215Z",
   "components":[
      {
         "conditional":{
            "eq":"",
            "when":null,
            "show":null
         },
         "type":"htmlelement",
         "content":"Pacient Registration Form",
         "className":"delta",
         "attrs":[
            {
               "value":"",
               "attr":""
            }
         ],
         "tag":"h1",
         "input":false
      },
      {
         "conditional":{
            "eq":"",
            "when":null,
            "show":null
         },
         "type":"htmlelement",
         "content":"",
         "className":"",
         "attrs":[
            {
               "value":"",
               "attr":""
            }
         ],
         "tag":"div",
         "input":false
      },
      {
         "conditional":{
            "eq":"",
            "when":null,
            "show":null
         },
         "type":"fieldset",
         "components":[
            {
               "isNew":false,
               "conditional":{
                  "eq":"",
                  "when":null,
                  "show":null
               },
               "type":"columns",
               "columns":[
                  {
                     "components":[
                        {
                           "conditional":{
                              "eq":"",
                              "when":null,
                              "show":null
                           },
                           "type":"datetime",
                           "validate":{
                              "custom":"",
                              "required":true
                           },
                           "persistent":true,
                           "protected":false,
                           "timePicker":{
                              "arrowkeys":true,
                              "mousewheel":true,
                              "readonlyInput":false,
                              "showMeridian":true,
                              "minuteStep":1,
                              "hourStep":1
                           },
                           "datePicker":{
                              "datepickerMode":"day",
                              "yearRange":"20",
                              "maxMode":"year",
                              "minMode":"day",
                              "initDate":"",
                              "startingDay":0,
                              "showWeeks":true
                           },
                           "datepickerMode":"day",
                           "enableTime":false,
                           "enableDate":true,
                           "format":"yyyy-MM-dd",
                           "placeholder":"Today's Date",
                           "key":"todaysDate",
                           "label":"Today's Date",
                           "tableView":true,
                           "input":true
                        }
                     ]
                  },
                  {
                     "components":[

                     ]
                  }
               ],
               "input":false
            }
         ],
         "legend":"",
         "tableView":true,
         "input":false
      },
      {
         "conditional":{
            "eq":"",
            "when":null,
            "show":null
         },
         "type":"fieldset",
         "components":[
            {
               "isNew":false,
               "type":"textfield",
               "conditional":{
                  "eq":"",
                  "when":null,
                  "show":null
               },
               "validate":{
                  "customPrivate":false,
                  "custom":"",
                  "pattern":"",
                  "maxLength":"",
                  "minLength":"",
                  "required":true
               },
               "persistent":true,
               "unique":false,
               "protected":false,
               "defaultValue":"",
               "multiple":false,
               "suffix":"",
               "prefix":"",
               "placeholder":"Patient Name",
               "key":"patientName",
               "label":"Patient Name",
               "inputMask":"",
               "inputType":"text",
               "tableView":true,
               "input":true
            },
            {
               "isNew":false,
               "conditional":{
                  "eq":"",
                  "when":null,
                  "show":null
               },
               "type":"columns",
               "columns":[
                  {
                     "components":[
                        {
                           "type":"textfield",
                           "conditional":{
                              "eq":"",
                              "when":null,
                              "show":null
                           },
                           "validate":{
                              "customPrivate":false,
                              "custom":"",
                              "pattern":"",
                              "maxLength":"",
                              "minLength":"",
                              "required":true
                           },
                           "persistent":true,
                           "unique":false,
                           "protected":false,
                           "defaultValue":"",
                           "multiple":false,
                           "suffix":"",
                           "prefix":"",
                           "placeholder":"Social Security Number",
                           "key":"socialSecurityNumber",
                           "label":"Social Security Number",
                           "inputMask":"999-999-999",
                           "inputType":"text",
                           "tableView":true,
                           "input":true
                        }
                     ]
                  },
                  {
                     "components":[
                        {
                           "conditional":{
                              "eq":"",
                              "when":null,
                              "show":null
                           },
                           "type":"columns",
                           "columns":[
                              {
                                 "components":[
                                    {
                                       "conditional":{
                                          "eq":"",
                                          "when":null,
                                          "show":null
                                       },
                                       "type":"datetime",
                                       "validate":{
                                          "custom":"",
                                          "required":true
                                       },
                                       "persistent":true,
                                       "protected":false,
                                       "timePicker":{
                                          "arrowkeys":true,
                                          "mousewheel":true,
                                          "readonlyInput":false,
                                          "showMeridian":true,
                                          "minuteStep":1,
                                          "hourStep":1
                                       },
                                       "datePicker":{
                                          "datepickerMode":"day",
                                          "yearRange":"20",
                                          "maxMode":"year",
                                          "minMode":"day",
                                          "initDate":"",
                                          "startingDay":0,
                                          "showWeeks":true
                                       },
                                       "datepickerMode":"day",
                                       "enableTime":false,
                                       "enableDate":true,
                                       "format":"yyyy-MM-dd",
                                       "placeholder":"Date of Birth",
                                       "key":"dateofBirth",
                                       "label":"Date of Birth",
                                       "tableView":true,
                                       "input":true
                                    }
                                 ]
                              },
                              {
                                 "components":[
                                    {
                                       "conditional":{
                                          "eq":"",
                                          "when":null,
                                          "show":null
                                       },
                                       "type":"number",
                                       "validate":{
                                          "custom":"",
                                          "multiple":"",
                                          "integer":"",
                                          "step":"1",
                                          "max":"",
                                          "min":"",
                                          "required":true
                                       },
                                       "persistent":true,
                                       "protected":false,
                                       "defaultValue":0,
                                       "suffix":"",
                                       "prefix":"",
                                       "placeholder":"Age",
                                       "key":"age",
                                       "label":"Age",
                                       "inputType":"number",
                                       "tableView":true,
                                       "input":true
                                    }
                                 ]
                              }
                           ],
                           "input":false
                        }
                     ]
                  }
               ],
               "input":false
            },
            {
               "input":false,
               "columns":[
                  {
                     "components":[
                        {
                           "input":true,
                           "tableView":true,
                           "inputType":"text",
                           "inputMask":"",
                           "label":"Address",
                           "key":"address",
                           "placeholder":"Address",
                           "prefix":"",
                           "suffix":"",
                           "multiple":false,
                           "defaultValue":"",
                           "protected":false,
                           "unique":false,
                           "persistent":true,
                           "validate":{
                              "required":true,
                              "minLength":"",
                              "maxLength":"",
                              "pattern":"",
                              "custom":"",
                              "customPrivate":false
                           },
                           "conditional":{
                              "show":null,
                              "when":null,
                              "eq":""
                           },
                           "type":"textfield"
                        }
                     ]
                  },
                  {
                     "components":[
                        {
                           "input":false,
                           "columns":[
                              {
                                 "components":[
                                    {
                                       "input":true,
                                       "tableView":true,
                                       "inputType":"text",
                                       "inputMask":"",
                                       "label":"Apartment Number",
                                       "key":"apartmentNumber",
                                       "placeholder":"Apartment Number",
                                       "prefix":"",
                                       "suffix":"",
                                       "multiple":false,
                                       "defaultValue":"",
                                       "protected":false,
                                       "unique":false,
                                       "persistent":true,
                                       "validate":{
                                          "required":false,
                                          "minLength":"",
                                          "maxLength":"",
                                          "pattern":"",
                                          "custom":"",
                                          "customPrivate":false
                                       },
                                       "conditional":{
                                          "show":null,
                                          "when":null,
                                          "eq":""
                                       },
                                       "type":"textfield"
                                    }
                                 ]
                              },
                              {
                                 "components":[

                                 ]
                              }
                           ],
                           "type":"columns",
                           "conditional":{
                              "show":null,
                              "when":null,
                              "eq":""
                           }
                        }
                     ]
                  }
               ],
               "type":"columns",
               "conditional":{
                  "show":null,
                  "when":null,
                  "eq":""
               }
            },
            {
               "input":false,
               "columns":[
                  {
                     "components":[
                        {
                           "input":true,
                           "tableView":true,
                           "inputType":"text",
                           "inputMask":"",
                           "label":"City",
                           "key":"city",
                           "placeholder":"City",
                           "prefix":"",
                           "suffix":"",
                           "multiple":false,
                           "defaultValue":"",
                           "protected":false,
                           "unique":false,
                           "persistent":true,
                           "validate":{
                              "required":true,
                              "minLength":"",
                              "maxLength":"",
                              "pattern":"",
                              "custom":"",
                              "customPrivate":false
                           },
                           "conditional":{
                              "show":null,
                              "when":null,
                              "eq":""
                           },
                           "type":"textfield"
                        }
                     ]
                  },
                  {
                     "components":[
                        {
                           "input":false,
                           "columns":[
                              {
                                 "components":[
                                    {
                                       "input":true,
                                       "tableView":true,
                                       "inputType":"text",
                                       "inputMask":"",
                                       "label":"State",
                                       "key":"state",
                                       "placeholder":"State",
                                       "prefix":"",
                                       "suffix":"",
                                       "multiple":false,
                                       "defaultValue":"",
                                       "protected":false,
                                       "unique":false,
                                       "persistent":true,
                                       "validate":{
                                          "required":true,
                                          "minLength":"",
                                          "maxLength":"",
                                          "pattern":"",
                                          "custom":"",
                                          "customPrivate":false
                                       },
                                       "conditional":{
                                          "show":null,
                                          "when":null,
                                          "eq":""
                                       },
                                       "type":"textfield"
                                    }
                                 ]
                              },
                              {
                                 "components":[
                                    {
                                       "conditional":{
                                          "eq":"",
                                          "when":null,
                                          "show":null
                                       },
                                       "type":"number",
                                       "validate":{
                                          "custom":"",
                                          "multiple":"",
                                          "integer":"",
                                          "step":"any",
                                          "max":5,
                                          "min":5,
                                          "required":true
                                       },
                                       "persistent":true,
                                       "protected":false,
                                       "defaultValue":0,
                                       "suffix":"",
                                       "prefix":"",
                                       "placeholder":"Zip",
                                       "key":"zip",
                                       "label":"Zip",
                                       "inputType":"number",
                                       "tableView":true,
                                       "input":true
                                    }
                                 ]
                              }
                           ],
                           "type":"columns",
                           "conditional":{
                              "show":null,
                              "when":null,
                              "eq":""
                           }
                        }
                     ]
                  }
               ],
               "type":"columns",
               "conditional":{
                  "show":null,
                  "when":null,
                  "eq":""
               }
            }
         ],
         "legend":"Patient's basic information",
         "tableView":true,
         "input":false
      },
      {
         "customClass":"button button--default",
         "conditional":{
            "eq":"",
            "when":null,
            "show":null
         },
         "type":"button",
         "theme":"primary",
         "disableOnInvalid":true,
         "action":"submit",
         "block":false,
         "rightIcon":"",
         "leftIcon":"",
         "size":"md",
         "key":"submit",
         "tableView":false,
         "label":"Submit",
         "input":true
      }
   ],
   "owner":"56df54d0acb1fa0100471847",
   "submissionAccess":[
      {
         "type":"create_all",
         "roles":[
            "57741e776eb8a901003f63f0"
         ]
      },
      {
         "type":"read_all",
         "roles":[

         ]
      },
      {
         "type":"update_all",
         "roles":[

         ]
      },
      {
         "type":"delete_all",
         "roles":[

         ]
      },
      {
         "type":"create_own",
         "roles":[

         ]
      },
      {
         "type":"read_own",
         "roles":[

         ]
      },
      {
         "type":"update_own",
         "roles":[

         ]
      },
      {
         "type":"delete_own",
         "roles":[

         ]
      }
   ],
   "access":[
      {
         "type":"read_all",
         "roles":[
            "57741e776eb8a901003f63ee",
            "57741e776eb8a901003f63ef",
            "57741e776eb8a901003f63f0"
         ]
      }
   ],
   "tags":[

   ]
}

onFormLoad event does not work

Hello,

The "onFormLoad" event is not firing. Here is how i use the "Formio" react component:

<Formio submission={this.state.entityDetailViewModel.get('entityObject').toJSON()} form={JSON.parse(this.state.entityDetailViewModel.get('form'))} onFormSubmit={this.onFormSubmit} />

Missing dependencies

Build fails, these dependencies are seem to be missing:

"react-widgets" and "formiojs"

custom action url setted in the client

Hi, right now we are exploring the possibility to add form.io into our app, but we need to set the form endpoint dynamically (based on some id) within out client side application, and we were wondering if it is posible set the form endpoint or action in the client side app using this library?

FormBuilder - Text area not working

Created an empty project using create-react-app, and added FormBuilder. Dragging Text Area throws this error:

utils.js:138 An error occured within custom function for wysiwyg TypeError: instance.wysiwygDefault is not a function

Sample code:

import React, { Component } from 'react';
import {FormBuilder} from 'react-formio';

class App extends Component {
  render() {
    return (
      <div className="App">
        <FormBuilder 
			form={{ display: 'form' }} 
      </div>
    );
  }
}

export default App;

Select Component - Cannot update during an existing state transition

A Select component using CUSTOM data + RefreshOn Anychange (data) fails with error

setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

Reproduction : Using an existing form

  1. Create Select component
  2. Set Data source of Select component as Custom.
  3. Fill data source with values=[{ label: '1', name:'one'}]
  4. Refresh React page that points to the said form and type anything on the form.

react-widgets styles

Hey, one last thing (Hopefully), how do i add the styles for the react widgets components, is there an easy way, what would be the steps there?

Unresolved promises may be related to form not updating

We are seeing warnings from bluebird about: "a promise was created in a handler but was not returned from it". We dove into the formio code a bit and it looks like the chained then() are missing returns in some cases possibly (createForm may be the main culprit, setSubmission). Then back up in react-formio, returning formio from the createForm then() before initializeFormio adds an additional then() seemed to remove the last warning. We are not familiar with the code obviously though.

The main issue though is that when we initially set the form through the form prop on the Formio component, it shows fine, but then if we assign a new form it doesn't show the updated form. If we assign a another new (3rd) form then the 2nd form shows up. Its like it ends up 1 form behind. We suspect this is related to the unresolved promises but not sure.

Grid Component for Form.IO React?

Does the React implementation support/provide a Grid component to view submisions the way that the AngularJS implementation does?

If so is there an example of how to specify/use this Grid component?

Server side code fails with window undefined

When running form.io the server side fails with following:

/home/tuomjarv/workspace/emedi/kusote/node_modules/formiojs/build/formio.pdf.js:182
window.addEventListener('message', function (event) {
^

ReferenceError: window is not defined
    at Object.<anonymous> (.../node_modules/formiojs/build/formio.pdf.js:182:1)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (.../node_modules/formiojs/build/formio.full.js:11:16)
    at Module._compile (module.js:570:32)

"Attempting to select choice already selected" in console when using Formio component

The project I'm working on is experiencing this warning. It doesn't seem to cause any actual problem except clogging up the console with warnings that don't contribute any useful information.

Preconditions:

  • A select field with a default value

This could potentially be a problem in formio.js.

If I am understanding correctly, rendering this Formio component results in a call to createForm inside of formio.js's formio.form.js. This code looks like the following:

  createForm(form) {
    /**
     * {@link BaseComponent.component}
     */
    if (this.component) {
      this.component.components = form.components;
    }
    else {
      this.component = form;
    }
    return this.onFormBuild = this.render().then(() => {
      this.formReadyResolve();
      this.onFormBuild = null;
      this.setSubmission(this._submission);
    },
      (err) => this.formReadyReject(err)
    ).catch(
      (err) => this.formReadyReject(err)
    );
  }

I think this.render() indirectly results in a call to setValue on the Select which is fine the first time since no value is selected yet. However in the callback for render there is also a call to this.setSubmission(this._submission) which also indirectly results in a call to setValue which is trying to set the selected value to something that was already selected when rendering which results in this warning showing up.

Any suggestions what the cleanest way to fix this could be? Is there anything else I should be checking?

Wizard Support?

How can I render a "wizard" with the React library? Thanks.

Select Components - Enable credentials on URL Option

Awesome jobs folks, I think it has a lot of potential as an enterprise tool.

The select component values can be retrieved from a URL, but credentials are not sent during the request and if the values are behind some authentication it fails.

Is it possible to enable a "Credentials" checkmark at the form/component level to enable the 'credentials' flag on the request?

Further in the future maybe an Authentication option to specify more properties.

Thanks!

Dynamic form creation

I want to build a quiz-maker app in which users create dynamic forms instead of developers.

Is this feasible using formio?

Multiple forms?

Hello,
I have problems integrating multiple forms on one page. I have different

s, 2 of them fetch the same source. I do not submit the form, because data should not leave the browser but be processed locally inside the browser. The code looks something like this:

<Form key={somekey1}
                  src={"https://my.form.io/myform"}
                  submission={this.props.file.submission}
                  onChange={(s) => this.onChange(s,'mainform')} />

<Form key={somekey2}
                  src={"https://my.form.io/addform"}
                  submission={this.props.file.submissionForm1}
                  onChange={(s) => this.onChange(s,'addform1')} />

<Form key={somekey3}
                  src={"https://my.form.io/addform"}
                  submission={this.props.file.submissionForm2}
                  onChange={(s) => this.onChange(s,'addform2')} />

Are multiple forms on the same page supported anyway?

Thanks
Harald

Address component don't call google maps api

Hi guys!

I am doing some tests with formio libraries. So far I was able to encapsulate the ngFormBuilder inside a react component for a react application and I am using react-formio to render the forms from the json schemas.

I noticed that the address component is not making calls to the google maps api. It is working on ngFormio though... I Download both of the examples and ran then locally.

I also noticed that the doSearch method inside the address component is responsible for the api call but it is not being called anywhere as it can be seen here:

image

Will this feature be implemented anytime soon? Would it be ok to submit a pull request?

Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.