formio / react-app-starterkit

A react starterkit for creating new web applications with Form.io

Form.io React Starter Application

---

This is a starter application that uses React, Bootstrap, Webpack, and Form.io to create a powerful Serverless application. This example uses Contexts and hooks to manage application state.

Installation

• Download this application within your local machine and then type the following.

npm install

Running

---

You can develop within this application by typing the following

npm start

This will launch the application locally @ https://localhost:3000. Now, whenever you make changes, those will be directly reflected within the launched application.

Building

---

Once you have your application developed, it is now time to build the application for deployment. This can be done by typing the following.

npm run build

This will generate the build folder which you can then use to install within any webserver, Github Page, an Amazon S3 bucket, etc.

Commands

---

To see all available commands type the following

npm run

react-app-starterkit's Issues

Error on Install

I am exploring that capabilities of FormIO and looking at using it in our React application, however, cloning the repo and executing npm install doesn't work.
I'll continue to work through the issue, but I would think this is something the starter application repo should resolve.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.1.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0 || ^16.3.0 || ^15.5.4" from [email protected]
npm ERR! node_modules/react-json-view
npm ERR!   react-json-view@"^1.21.3" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 

How to reset the form?

I am trying to reset the form after the form is submitted, form is not clearing.

[Doc] Readme doc misspelled 'and'

The Readme has 'and' misspelled.

Module not found: Error: Can't resolve '../../../components/Formio'

Hi,

Formio does not exist in the react-formio library. How can I fix it?

Jake

Content component with CKEditor5 (Some CKEditor 5 modules are duplicated)

I created a package for my project from https://ckeditor.com/ckeditor-5/online-builder/
Use with package.json file

"dependencies": {
    "@ckeditor/ckeditor5-react": "^5.0.2",
    "ckeditor5-custom-build": "file:./packages/ckeditor5-custom-build",
    "@formio/contrib": "^2.0.0",
    "@formio/react": "^5.3.0-rc.2"
}

Error because CKEditor has already rendered
And
Warning: ace.js:1 misspelled option "isUseWorkerDisabled"
And
Sometimes errors Uncaught NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'https://cdn.form.io/ace/1.4.12/worker-json.js' failed to load.

import './eform.scss';
import { FormBuilder, Formio } from '@formio/react';
import React, { FC } from 'react';
import FormioContrib from "@formio/contrib";

Formio.use(FormioContrib);

interface IEFormBuilderPage {
    form?: any
    onChange: (value: any) => void
}

const EFormBuilderPage: FC<IEFormBuilderPage> = ({ form, onChange }) => {

    const onFormChange = (schema: any) => {
        onChange({ ...schema, components: [...schema.components] });
    };
    return form ? <Isolate>
        <FormBuilder
            form={form}
            onChange={onFormChange} 
            options={{
                builder: {
                    resource: false,
                    advanced: false,
                    premium: false,
                    layout: {
                        components: {
                            table: true
                        }
                    },
                    data: false,
                    basic: {
                        components: {
                            checkmatrix: false
                        }
                    }
                }
            }}/>
    </Isolate> : <></>
}

class Isolate extends React.Component {
    shouldComponentUpdate() {
        return false // prevent parent state changes from re-rendering FormBuilder
    }
    render() {
        return <React.Fragment>
            {this.props.children}
        </React.Fragment>
    }
}

export default EFormBuilderPage;

[BUG] Sorting and filtering issue on Data Grid

Environment

@randallknutson @travist @wag110894 @alexandraRamanenka
How can I sort and filter the data Grid ? While I drag the data grid and dropping it to the form unable to get the sorting, filetring and pagination .

Kindly pls help.
Thanks.

this library doesnt work anymore.

When we follow the steps written in readme this particular library doesnt work as there is a mismatch of the package version.

[BUG] Please clarify where the PROJECT_URL can be found on the form.io dashboard

Please can you clarify what the project URL is referring to:

Modify the src/config.js file to point the PROJECT_URL variable to the project you created in form.io

I see:

• The URL of the page in the Chrome address bar
• A 'live' endpoint that that seems to be the API_URL value

After starting the app I don't see any forms, I'm not sure that the project has been picked up as I can't see forms

required the json data for view the submission data

Environment

required the json data for view the submission data.

Below the json data that i use in Form Grid to view the submission data. But I am unable to view the submission data as shown in fig.
Kindly please help me or send me the correct json data to view the submission. I am using react.

Thanks in advance.

Example

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

// return (

     const json = {
     "id": "52",
        "submission_data_value": {
            "data": {
                "name": "Title1",
                "address": "",
                "textArea": "",
                "submit": true
            },
            "metadata": {
                "timezone": "Asia/Calcutta",
                "offset": 330,
                "origin": "http://localhost:3000",
                "referrer": "",
                "browserName": "Netscape",
                "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) 
                 Chrome/89.0.4389.128 Safari/537.36",
                "pathName": "/",
                "onLine": true
            },
            "state": "submitted"
        },
    }

      <div>
        <h3>View {form.title} Submission</h3>
        {/* <Errors errors={errors} /> */}
        <Form
          form={json}
          //form={form.form.submission_data_value}
          submission={json}
          //getSubmission={submission}
          //submission={submissionData}
          url={url}
          hideComponents={hideComponents}
          onSubmit={onSubmit}
          options={{ ...{ template: 'bootstrap3', iconset: 'fa' }, ...options }}
        />
      </div>
    );

Command for upgrading the formio.js

I am using redux react app startupkit. I want to upgrade formio.js package of version 4.12.4-rc.2.
Kindly pls share the command to upgrade the formio.js package.

Thanks.

DataGrid Example Requested

Does the React form.io implementation support/provide a DataGrid component to view submisions the way that the AngularJS/Angular implementations do?

If so is there an example of how to specify/use this Grid component? I can see a Grid component in the source, and some usage of it inside another component, but I got a little lost trying to understand how I might use it in my own code?

Error when running npm start

Getting below error after i cloned the project and trying to run(npm start). i installed the required packages using npm install.

Failed to compile.
./node_modules/react-formio/lib/index.js
Module not found: Can't resolve 'formiojs/components/base/editForm/utils' in 'C:\Git\formio\react-app-starterkit\node_modules\react-formio\lib'

[BUG] Edit form does not save form after initial save

Environment

• Hosting type

  • Form.io
  • Local deployment
    • Version:

• React app starter kit git commit: 52ae0d4

• Formio.js version: [email protected]

• Frontend framework: [email protected]

• Browser: chrome

• Browser version: 81

Steps to Reproduce

1. Clone react-starterkit repo
2. npm install
3. Configure PROJECT_URL to your project
4. npm start
5. Login with admin user
6. Create a new form
7. Edit form and add one field
8. Save form
9. Add another field
10. Save form
11. Reload page

Expected behavior

Both fields are still present after reloading page

Observed behavior

9. Save form (the newly added field is not present in xhr call to server)
10. Reload form and the newly added field is gone

Example

Before adding second field (after step 7.)

Add second field and save it (step 8 and 9)

UI and save response

UI and save request body

getting page is undefined in Submission Grid

Environment

Formio.js version: "^4.0.0-rc.21",
Frontend framework: "react": "16.8.2",
Browser: chrome
Browser version: Version 88.0.4324.104 (Official Build) (64-bit)

I am getting page is undefined and did not get the columns value using the SubmissionGrid to view the submission data in the
form with columns and its values.

Expected behavior - Want to get the submissions data in the form with columns and its values and with the proper pagination

Observed behavior - get the form with columns but the columns shows nothing after click on View Data

                 <SubmissionGrid
                    form = {form}
                    submissions={submissions}
                    getSubmissions={getSubmissions}
                    onAction={onAction}
                  />

Under SubmissionGrid -
submissions = { submissions} where {submissions} contains as below

Here am getting pagination: {numPages: 0, page: 1, total: 0}.
So how to fix it.
Kindly pls help.

Also submissions.submissions is below -

Also form = {form} where {form} contain as below.
{id: "2", isActive: false, lastUpdated: 0, form: {…}, url: "https://reactstarter.form.io/form/2", …}

Also getSubmissions={getSubmissions} where {getSubmissions} contain as below.
(page, query) => dispatch(Object(react_formio__WEBPACK_IMPORTED_MODULE_4__["getSubmissions"])('submissions', page, query, ownProps.match.params.formId))

The Whole Code is -

            render() {
                const { match: { params: { formId } } } = this.props
                const { form, submissions, isLoading, onAction, getSubmissions, errors } = this.props
            
                if (isLoading) {
                  return (
                    <Loading />
                  );
                }
            
            
                return (
                  <div className='form-index' >
                   <Errors errors={errors} /> 
            
                      <SubmissionGrid
                        form = {form}
                        submissions={submissions}
                        getSubmissions={getSubmissions}
                        onAction={onAction}
                      />
            
                    <Link className='btn btn-primary' to={`/form/${formId}`}>
                      <i className='glyphicon glyphicon-plus fa fa-plus' aria-hidden='true'></i>
                      New
                     {form.title} 
                    </Link>
                  </div >
                );
              }
            }
            
            
            const mapStateToProps = (state, ownProps) => {
            
              const form = selectRoot('form', state);
              const submissions = selectRoot('submissions', state);
            
              return {
                form: form,
                submissions: submissions,
                getSubmissions: getSubmissions,
                isLoading: form.isActive || submissions.isActive,
                errors: [
                  selectError('submissions', state),
                  selectError('form', state)
                ]
              };
            };
            
            const mapDispatchToProps = (dispatch, ownProps) => {
              return {
                getSubmissions: (page, query) => 
                dispatch(getSubmissions('submissions', page, query, ownProps.match.params.formId    
                )),
                onAction: (submission, action) => {
                  switch (action) {
                    case 'view':
                    case 'row':
                      dispatch(push(`/form/${ownProps.match.params.formId}/submission/${submission.id}`));
                      break;
                    case 'edit':
                      dispatch(push(`/form/${ownProps.match.params.formId}/submission/${submission.id}/edit`));
                      break;
                    case 'delete':
                      dispatch(push(`/form/${ownProps.match.params.formId}/submission/${submission.id}/delete`));
                      break;
                    default:
                  }
                },
              };
            };
            
            export default connect(
              mapStateToProps,
              mapDispatchToProps
            )(List)

Kindly please help me.
Thanks in advance !

[BUG]

• Formio.js version: "^4.0.0-rc.21",
• Frontend framework: "react": "16.8.2",
• Browser: chrome
• Browser version: Version 88.0.4324.104 (Official Build) (64-bit)

Steps to Reproduce

1. click on create form link
2. A create form will open and after filling the form titile , name , display as , type and path , click on create form
3. After click on create form gives the error as - Cast to ObjectId failed for value "form" at path "_id" for model "form"

Expected behavior

should be create a new form

Observed behavior

got an error - Cast to ObjectId failed for value "form" at path "_id" for model "form"

Example

I am getting an empty string in form id .
kindly pls help....!!

This library not working with typescript project as it is throwing error for onSubmit and onChange

Custom Component works from Edit Form Enter Data, not from Form List Enter Data

Greetings!

As the title says, I created a couple of custom components, I thought everything was working fine until I realized the behavior described. When I'm on the FormGrid Component, there are 3 buttons: Enter Data, View Data, Edit Form.

If I click enter data, the form shows but only the label of the custom component shows, and I can see the input blinking out of the page.

This is easy to check when using the profiler, this is a picture of it (not sure how to get a better image out of the profiler)

And just a few moments later its gone

However, if I'm inside the Edit Form Page and click Enter Data, the component shows correctly.

Any ideas of what could be causing this?

Can't build react-app-starterkit in either development or production mode

Attempting to run both "npm run serve" and "npm run build" throw the following exception...any quick ideas on what might be wrong here? (node=8.9.4, npm=5.6.0)

ERROR in ./~/react-formio/lib/modules/submission/containers/SubmissionGrid.js
Module not found: Error: Can't resolve 'formiojs/build/components' in '/home/mfreeman/Projects/temp/react-app-starterkit/node_modules/react-formio/lib/modules/submission/containers'
 @ ./~/react-formio/lib/modules/submission/containers/SubmissionGrid.js 19:18-54
 @ ./~/react-formio/lib/modules/resource/containers/Index.js
 @ ./~/react-formio/lib/modules/resource/routes.js
 @ ./~/react-formio/lib/modules/resource/index.js
 @ ./src/app/resources/event/index.js
 @ ./src/app/resources/index.js
 @ ./src/index.js

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

[BUG] package-lock.json in .gitignore

This is probably just an oversight from 2017