th-react-formbuilder1
A complete react form builder that interfaces with a json endpoint to load and save generated forms.
- Upgraded to React 16.4.1
- Use react-dnd for Drag & Drop
- Show posted data on readonly form
Editing Items
Basic Usage
var React = ;var FormBuilder = ; React /// For Previe Form link ver1.2.2React
Props
var items = key: 'Header' name: 'Header Text' icon: 'fa fa-header' static: true content: 'Placeholder Text...' key: 'Paragraph' name: 'Paragraph' static: true icon: 'fa fa-paragraph' content: 'Placeholder Text...'; const existingItems = { console; return { return ; };}; // function to get field list data from form builder { this;} // function to get field list data from form builder database { return { return }} <FormBuilderReactFormBuilder url='path/to/GET/initial.json' toolbarItems=items onLoad=existingItems || this onPost= this saveUrl='path/to/POST/built/form.json' />
Form Params
Name | Type | Required? | Description |
---|---|---|---|
url | string | Optional | URL path of list of existing fields. Eg. ->path/to/GET/initial.json |
toolbarItems | string | Optional | Verb used in the form submission. |
saveUrl | string | Optional | Defines form submit button text. Defaults to "Submit" |
onLoad | function | optional | Invoke when rendering form Preview component. |
onPost | function | optional | Invoke when submit data, if exists will override form post. |
React Form Generator
Now that a form is built and saved, let's generate it from the saved json.
var React = ;var FormBuilder = ; let answerData = "text_input_DEA657C9-4404-4A16-A935-9D9E4E235D6E" : "Test Value" "text_input_DEA657C9-2345-4A16-A935-9D9E4E235D6E" : "Another Test Value"; React
Form Params
Name | Type | Required? | Description |
---|---|---|---|
form_action | string | Required | URL path to submit the form |
form_method | string | Required | Verb used in the form submission. |
action_name | string | Optional | Defines form submit button text. Defaults to "Submit" |
onSubmit | function | optional | Invoke when submit data, if exists will override form post. |
back_action | string | Optional | URL path to go back if needed. |
back_name | string | Optional | Button text for back action. Defaults to "Cancel". |
task_id | integer | Optional | User to submit a hidden variable with id to the form on the backend database. |
answer_data | array | Optional | Answer data, only used if loading a pre-existing form with values. |
authenticity_token | string | Optional | If using Rails and need an auth token to submit form. |
hide_actions | boolean | Optional | If you would like to hide the submit / cancel buttons set to true. |
skip_validations | boolean | Optional | Suppress form validations on submit, if set to true. |
read_only | boolean | Optional | Shows a read only version which has fields disabled and removes "required" labels. |
variables | object | Optional | Key/value object that can be used for Signature variable replacement. |
Read only Signatures
Read only signatures allow you to use a saved/canned signature to be placed into the form. The signature will be passed in through the variables
property to ReactFormGenerator
and ReactFormBuilder
.
To use a read only signature, choose the "Read only" option and enter the key value of the variable that will be used to pass in the signature.
The signature data should be in base 64 format.
There is a variables.js
file that contains a sample base 64 signature. This variable is passed into the demo builder and generator for testing. Use the variable key "JOHN" to test the variable replacement.
Vendor Dependencies
In order to make the form builder look pretty, there are a few dependencies other than React. See the example code in index.html for more details.
- Bootstrap
- FontAwesome
- Primereact
SASS
All relevant styles are located in css/application.css.scss.
Develop
$ npm install$ npm run build:dist$ npm run serve:api$ npm start$ npm run package
Then navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.
https://www.freecodecamp.org/news/introduction-to-npm-scripts-1dbb2ae01633/
Tests
$ npm test
Test is not working at this moment.