formio / react Goto Github PK
View Code? Open in Web Editor NEWJSON powered forms for React.js
Home Page: https://form.io
License: MIT License
JSON powered forms for React.js
Home Page: https://form.io
License: MIT License
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:
Will this feature be implemented anytime soon? Would it be ok to submit a pull request?
Thanks!
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?
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:
Anybody can help me, thank you so much!
I couldn't find any information for react on how to use the custom component, any hint?
Hello,
I have problems integrating multiple forms on one page. I have different
<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
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} />
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?
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;
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!
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
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)
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
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?
Im getting following error when I execute npm run serve
ERROR in .//react-formio/lib/modules/auth/containers/Login.js/react-formio/lib/modules/auth/containers/Login.js 11:14-51
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/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/react-formio/lib/modules/auth/containers/Register.js 11:14-51
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/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/react-formio/lib/modules/resource/containers/Edit.js 11:14-51
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/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/react-formio/lib/modules/resource/containers/View.js 11:14-51
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/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/react-formio/lib/modules/resource/containers/Create.js 11:14-51
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/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
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
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
How can I render a "wizard" with the React library? Thanks.
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
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:
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?
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.
Build fails, these dependencies are seem to be missing:
"react-widgets" and "formiojs"
I want to build a quiz-maker app in which users create dynamic forms instead of developers.
Is this feasible using formio?
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.
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!
./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() {
Hey team,
As per my requirement, I need to add headers in my post request. How can I do it?
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
values=[{ label: '1', name:'one'}]
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/react-formio/dist/build/Formio.js 1:479-486
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.
@ ./
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)
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;
Reset action does not clear any field.
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;
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
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.
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)
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.
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.
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?
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 ?
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.
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.
more info in PR #92
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!
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":[
]
}
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
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
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
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).
If use layout component, when edit component inner the layout. Parent object don't has editComponent method.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.