formio / react Goto Github PK

View Code? Open in Web Editor NEW

289.0 25.0 254.0 13.45 MB

JSON powered forms for React.js

Home Page: https://form.io

License: MIT License

JavaScript 100.00%

reactjs formio forms json

react's Introduction

React Formio

A React library for rendering out forms based on the Form.io platform.

Example Application

To see an example application of how to implement all the components and modules in this library, see https://github.com/formio/react-app-starterkit

Install

npm

@formio/react can be used on the server, or bundled for the client using an npm-compatible packaging system such as Browserify or webpack.

npm install @formio/react --save
npm install @formio/js --save // Install @formio/js since it is a peerDependency

Components

Form

The form component is the primary component of the system. It is what takes the form definition (json) and renders the form into html. There are multiple ways to send the form definition to the Form component. The two main ways are to either pass the src prop which will make a request for the form definition or to pass a pre-loaded form prop with the form definition you specify and an optional url prop.

The src prop is a url to the form definition, usually a form.io server. When using the src prop the form will automatically submit the data to this url as well.

The form prop accepts a pre-loaded json form definition. Pair this optionally with a url prop to the location of the form. This is used for file upload, oauth and other components or actions that need to know where the server is.

Props

Name	Type	Description
`src`	url	The url of the form definition. This is commonly from a form.io server. When using src, the form will automatically submit the data to that url as well.
`url`	url	The url of the form definition. This is used for file upload, oauth and other components or actions that need to know where the server is. The form will not be loaded from this url and the submission will not be saved here either. Use this in connection with `form` .
`form`	object	Instead of loading a form from the `src` url, you can preload the form definition and pass it in with the `form` prop. You should also set `url` if you are using any advanced components like file upload or oauth.
`submission`	object	Submission data to fill the form. You can either load a previous submission or create a submission with some pre-filled data. If you do not provide a submissions the form will initialize an empty submission using default values from the form.
`options`	object	An options object that can pass options to the formio.js Form that is rendered. You can set options such as `readOnly`, `noAlerts` or `hide`. There are many options to be found in the formio.js library.

Event Props

You can respond to various events in the form. Simply pass in a prop with a function for one of these events.

Name	Parameters	Description
`onSubmit`	`submission`: object	When the submit button is pressed and the submission has started. If `src` is not provided, this will be the final submit event.
`onSubmitDone`	`submission`: object	When the submission has successfully been made to the server. This will only fire if `src` is set.
`onChange`	`submission`: object, `submission.changed`: object of what changed, `submission.isValid`: boolean - if the submission passes validations.	A value in the submission has changed.
`onError`	`errors`: array or string or boolean	Called when an error occurs during submission such as a validation issue.
`onRender`		Triggers when the form is finished rendering.
`onCustomEvent`	{ `type`: string - event type, `component`: object - triggering component, `data`: object - data for component, `event`: string - raw event }	Event that is triggered from a button configured with "Event" type.
`onPrevPage`	{ `page`: integer - new page number, `submission`: object - submission data }	Triggered for wizards when "Previous" button is pressed.
`onNextPage`	{ `page`: integer - new page number, `submission`: object - submission data }	Triggered for wizards when "Next" button is pressed.
`formReady`	`formInstance`: Webform/Wizard - form class instance	Called when the form gets ready state.

Example

Give Form a src property and render:

import React from 'react';
import ReactDOM from 'react-dom';
import { Form } from '@formio/react';

ReactDOM.render(
	<Form src="https://example.form.io/example" onSubmit={console.log} />,
	document.getElementById('example'),
);

FormBuilder

The FormBuilder class can be used to embed a form builder directly in your react application. Please note that you'll need to include the CSS for the form builder from formio.js as well.

import { FormBuilder } from '@formio/react';

Without Components:

<FormBuilder form={[]} />

With Components:

<FormBuilder
	form={{
		display: 'form',
		components: [
			{
				label: 'Email',
				tableView: true,
				key: 'email',
				type: 'email',
				input: true,
			},
			{
				label: 'Password',
				tableView: false,
				key: 'password',
				type: 'password',
				input: true,
				protected: true,
			},
		],
	}}
/>

Please note that the FormBuilder component does not load and save from/to a url. You must handle the form definition loading and saving yourself or use the FormEdit component.

Props

Name	Type	Default	Description
`form`	object		This is the form definition object. It should at least have a `display` property set to form, wizard or pdf.
`options`	object		an options object that can pass options to the formio.js Form that is rendered. There are many options to be found in the formio.js library.

Event Props

Name	Parameters	Description
`onChange`	`schema`: object	Triggered any time the form definition changes.
`onEditComponent`	`component`: object	Triggered when the component settings dialog is opened.
`onSaveComponent`	`component`: object	Triggered when the component settings dialog is saved and closed.
`onCancelComponent`	`component`: object	Triggered when the component settings dialog is cancelled.
`onDeleteComponent`	`component`: object	Triggered when a component is removed from the form.
`onUpdateComponent`	`component`: object	Triggered when a component is added or moved in the form.

Example

import React from 'react';
import ReactDOM from 'react-dom';
import { FormBuilder } from '@formio/react';

ReactDOM.render(
	<FormBuilder
		form={{ display: 'form' }}
		onChange={(schema) => console.log(schema)}
	/>,
	document.getElementById('builder'),
);

Errors

The Errors component can be used to print out errors that can be generated within an application. It can handle many types of errors that are generated by the form.io actions.

Props

Name	Type	Default	Description
`errors`	any	null	If null is passed, the component is not rendered. Otherwise it will render the errors. There are various formats (including an array of errors) that can be passed in.
`type`	string	'danger'	The bootstrap alert type to render the container.

Event Props

None

FormEdit

The FormEdit component wraps the FormBuilder component and adds the title, display, name and path fields at the top along with a save button.

Props

Name	Type	Default	Description
`form`	object	{display: 'form' \| 'wizard'}	The form definition of the exiting form that is to be modified.
`options`	object	{}	The options to be passed to FormBuilder.
`saveText`	string	''	The string that will be displayed in the save-button.

Event Props

Name	Parameters	Description
`saveForm`	form	Called when the save button is pressed. Will pass the form definition to the callback.

FormGrid

The FormGrid component can be used to render a list of forms with buttons to edit, view, delete, etc on each row.

Props

Name	Type	Default	Description
`forms`	array of forms	[]	A list of forms to be rendered in the grid.
`perms`	object	{view: true, edit: true, data: true, delete: true}	Whether or not to display buttons on the grid.
`query`	object	{}	A query filter for passing to getForms when fetching forms.
`getForms`	function	() => {}	A function to trigger getting a new set of forms. Should accept the page number and filter query object as parameters.

Event Props

Name	Parameters	Description
`onAction`	form: object, action: string	Called when the user clicks on a button on a row of the form.

SubmissionGrid

The submisison grid will render a list of submissions and allow clicking on one row to select it.

Props

Name	Type	Default	Description
`submissions`	array of submissions	[]	A list of submissions to be rendered in the grid.
`query`	object	{}	A query filter for passing to getForms when fetching submissions.
`form`	object	{}	The form definition for the submissions. This is used to render the submissions.
`getSubmissions`	function	() => {}	A function to trigger getting a new set of submissions. Should accept the page number and filter query object as parameters.

Event Props

Name	Parameters	Description
`onAction`	submission: object, action: string	Called when the user clicks on a button on a row of the submission.

Modules

Modules contain Redux actions, reducers, constants and selectors to simplify the API requests made for form.io forms. Reducers, actions and selectors all have names. This provides namespaces so the same actions and reducers can be re-used within the same redux state.

root

The root module is the container for things shared by other modules such as the selectRoot selector.

Selectors

Name	Parameters	Description
`selectRoot`	name: string, state: object	Returns the state for a namespace.
`selectError`	name: string, state: object	Returns any errors for a namespace.
`selectIsActive`	name: string, state: object	Returns isActive state for a namespace.

auth

The auth module is designed to make it easier to login, register and authenticate users within react using the form.io login system.

Reducers

Name	Parameters	Description
`auth`	config: object	Mounts the user and access information to the state tree. Config is not currently used but is a placeholder to make it consistent to the other reducers.

Actions

Name	Parameters	Description
`initAuth`		This is usually used at the start of an app code. It will check the localStorage for an existing user token and if found, log them in and fetch the needed information about the user.
`setUser`	user: object	When a user logs in, this will set the user and fetch the access information for that user. The user object is usually a submission from the login or register form.
`logout`		This action will reset everything to the default state, including removing any localStorage information.

form

The form module is for interacting with a single form.

Reducers

Name	Parameters	Description
`form`	config: object	Mounts the form to the state tree. The config object should contain a name property defining a unique name for the redux state.

Actions

Name	Parameters	Description
`getForm`	name: string, id: string, done: function	Fetch a form from the server. If no id is provided, the name is used as the path. The `done` callback will be called when the action is complete. The first parameter is any errors and the second is the form definition.
`saveForm`	name: string, form: object, done: function	Save a form to the server. It will use the _id property on the form to save it if it exists. Otherwise it will create a new form. The `done` callback will be called when the action is complete. The first parameter is any errors and the second is the form definition.
`deleteForm`	name: string, id: string, done: function	Delete the form on the server with the id.
`resetForm`	Reset this reducer back to its initial state. This is automatically called after delete but can be called other times as well.

Selectors

Name	Parameters	Description
`selectForm`	name: string, state: object	Select the form definition from the state.

forms

The forms module handles multiple forms like a list of forms.

Reducers

Name	Parameters	Description
`forms`	config: object	Mounts the forms to the state tree. The config object should contain a name property defining a unique name for the redux state. The config object can also contain a query property which is added to all requests for forms. For example: {tags: 'common'} would limit the lists of forms to only forms tagged with 'common'.

Actions

Name	Parameters	Description
`getForms`	name: string, page: integer, params: object	Fetch a list of forms from the server. `params` is a query object to filter the forms.
`resetForms`	Reset this reducer back to its initial state. This is automatically called after delete but can be called other times as well.

Selectors

Name	Parameters	Description
`selectForms`	name: string, state: object	Select the list of forms from the state.

submission

The submission module is for interacting with a single submission.

Reducers

Name	Parameters	Description
`submission`	config: object	Mounts the submission to the state tree. The config object should contain a name property defining a unique name for the redux state.

Actions

Name	Parameters	Description
`getSubmission`	name: string, id: string, formId: string, done: function	Fetch a submission from the server. The `done` callback will be called when the action is complete. The first parameter is any errors and the second is the submission.
`saveSubmission`	name: string, submission: object, formId: string, done: function	Save a submission to the server. It will use the _id property on the submission to save it if it exists. Otherwise it will create a new submission. The `done` callback will be called when the action is complete. The first parameter is any errors and the second is the submission.
`deleteSubmission`	name: string, id: string, formId: string, done: function	Delete the submission on the server with the id.
`resetSubmission`	Reset this reducer back to its initial state. This is automatically called after delete but can be called other times as well.

Selectors

Name	Parameters	Description
`selectSubmission`	name: string, state: object	Select the submission data from the state.

submissions

The submissions module handles multiple submissions within a form, like for a list of submissions.

Reducers

Name	Parameters	Description
`submissions`	config: object	Mounts the submissions to the state tree. The config object should contain a name property defining a unique name for the redux state.

Actions

Name	Parameters	Description
`getSubmissions`	name: string, page: integer, params: object, formId: string	Fetch a list of submissions from the server. `params` is a query object to filter the submissions.
`resetSubmissions`	Reset this reducer back to its initial state. This is automatically called after delete but can be called other times as well.

Selectors

Name	Parameters	Description
`selectSubmissions`	name: string, state: object	Select the list of submissions from the state.

License

Released under the MIT License.

react's People

Contributors

Stargazers

Watchers

Forkers

kenifranz aneeskhan batusai513 miguelramosfdz crimson-education sandy987 ctrldavid jazizi joxertmd codefork deshion amdirent laakarihinta demonrem maheshsundaramurthy harrowm tliber globoint karelchudej bionicvapourboy johncrisostomo gminovska trendingtechnology webawesomedev fdidron miguelguadarrama hfye aum1031 breezeworks caiming-growing lzghost dharith pkunchamwar abatish sah27513 joshuaalewis davidlni suresh44t noytse kkolstad kalsi8 cldeaton bradyrichmond yashwanth1988 darabi eole-repos anirudhagohokar m-creations ivan-pik lubovsky tonyyang9527 opensourceclub lukeburns varunvs viptech pontus-vision hoanghiep flashpaper12 romakita goat-lab unrealsolver limouren abdullahadeeb sukrit-adhikari vicharzbecher xaman-afk realbisoye ravisr sivap86 alexfe96 hanumanthraju forkedit casecommons askk manojpgupta slamj1 robertaird appcoreopc pandurd an-drew-dev sekmet matthub09 t6engineering nhohb congtrieu112 giannisdag devhang nikhiloo7 sangkyunyoon jonathanjemmic mkipcak yankande nweller-dc udayz77 cymen j-perl sinujohn91 michal-turzynski total-morons darshanksexathought

react's Issues

Lodash function are imported all at once

more info in PR #92

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.

https://github.com/formio/examples.form.io (calls maps api)
https://github.com/formio/react-example (don't call maps api)

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:

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

Thanks!

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?

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

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

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

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.

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

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

current react-formio version is now broken because of the latest react-router release

Hi there! The latest react-router release (v4.0.0-beta.2) is not exporting propTypes in index.js anymore. So now this line of code is broken, and whole react-formio library cannot be required correctly. So i guess you should fix your package.json file or migrate to the latest react router version.

Custom Component - How to use ?

I couldn't find any information for react on how to use the custom component, any hint?

How can I add custom header on post request?

Hey team,

As per my requirement, I need to add headers in my post request. How can I do it?

Can not set defaultValue for Radio and Checkbox

When I change or submit Form, it was ok

But how can I re-render value on UI for them, I try to set defaultValue, it was good for another component, but with Radio and Checkbox, it was not ok, although I try in different ways.

Screen Record:

http://recordit.co/xZqkyDXpEO

Anybody can help me, thank you so much!

Children with the same key bug

Hi, i'm using this library but i'm getting this error describe above

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

   ]
}

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?

re-render form not smooth

When I re-render form of formio, it looks:

http://g.recordit.co/ZOX9ZDsAgw.gif

How can I make it smoother, or turn off loading when re-render

Date / Time Component not working

The calendar component is not opening when we click on the calendar icon

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)

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?

Button's reset action not working

Reset action does not clear any field.

_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:

How can I fixed it ?

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

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)

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.

Survey component has a bug

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

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.

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.

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

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

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

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;

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.

I would really appreciate a quick response if at all possible

Thanks!

Running the TODO app

This is not a big issue just worth mentioning as is easy to fix
The Task app
https://portal.form.io/#/project/57fd3190581e59007c155554/local
description to run app locally is confusing (at least it was for me)
No mention of how to install gulp as for example is mentioned
https://github.com/formio/formio-app-basic
Cheers

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

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:

Sorry for my bad english.

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?

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

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

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;

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

Edit layout inner component has error.

If use layout component, when edit component inner the layout. Parent object don't has editComponent method.

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!

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?

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.

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

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

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)

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!

Wizard Support?

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

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() {

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;

Missing dependencies

Build fails, these dependencies are seem to be missing:

"react-widgets" and "formiojs"

formio / react Goto Github PK

react's Introduction

React Formio

Example Application

Install

npm

Components

Form

Props

Event Props

Example

FormBuilder

Props

Event Props

Example

Errors

Props

Event Props

FormEdit

Props

Event Props

FormGrid

Props

Event Props

SubmissionGrid

Props

Event Props

Modules

root

Selectors

auth

Reducers

Actions

form

Reducers

Actions

Selectors

forms

Reducers

Actions

Selectors

submission

Reducers

Actions

Selectors

submissions

Reducers

Actions

Selectors

License

react's People

Contributors

Stargazers

Watchers

Forkers

react's Issues

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

Recommend Projects

Recommend Topics

Recommend Org