formio / react

JSON powered forms for React.js
https://form.io
MIT License
304 stars 266 forks source link

how get schema "minified" from onChange method - FormBuilder #372

Closed caltamiranob closed 3 weeks ago

caltamiranob commented 3 years ago

How could get schema "minified" from onChange in FormBuilder??

I have the next code:

<FormBuilder form={{ display: "form" }} onChange={(schema) => setJson(JSON.stringify(schema, null, 4))} />

When the onChange method is executed the schema parameter get all properties of componentes. How could get schema with properties that is different than the default? Thank you for your support.

{ "display": "form", "components": [ { "legend": "Personal", "tooltip": "", "customClass": "", "tabindex": "", "hidden": false, "disabled": false, "modalEdit": false, "key": "fieldset", "tags": [], "properties": {}, "conditional": { "show": null, "when": null, "eq": "", "json": "" }, "customConditional": "", "logic": [], "attributes": {}, "overlay": { "style": "", "page": "", "left": "", "top": "", "width": "", "height": "" }, "type": "fieldset", "label": "", "input": false, "placeholder": "", "prefix": "", "suffix": "", "multiple": false, "defaultValue": null, "protected": false, "unique": false, "persistent": false, "clearOnHide": true, "refreshOn": "", "redrawOn": "", "tableView": false, "labelPosition": "top", "description": "", "errorLabel": "", "hideLabel": false, "autofocus": false, "dbIndex": false, "customDefaultValue": "", "calculateValue": "", "calculateServer": false, "widget": null, "validateOn": "change", "validate": { "required": false, "custom": "", "customPrivate": false, "strictDateValidation": false, "multiple": false, "unique": false }, "allowCalculateOverride": false, "encrypted": false, "showCharCount": false, "showWordCount": false, "allowMultipleMasks": false, "tree": false, "components": [ { "label": "Proveedor", "labelPosition": "left-left", "placeholder": "", "description": "", "tooltip": "", "prefix": "", "suffix": "", "widget": { "type": "input" }, "inputMask": "", "allowMultipleMasks": false, "customClass": "", "tabindex": "", "autocomplete": "", "hidden": false, "hideLabel": false, "showWordCount": false, "showCharCount": false, "mask": false, "autofocus": false, "spellcheck": true, "disabled": false, "tableView": true, "modalEdit": false, "multiple": false, "persistent": true, "inputFormat": "plain", "protected": false, "dbIndex": false, "case": "", "encrypted": false, "redrawOn": "", "clearOnHide": true, "customDefaultValue": "", "calculateValue": "", "calculateServer": false, "allowCalculateOverride": false, "validateOn": "change", "validate": { "required": false, "pattern": "", "customMessage": "", "custom": "", "customPrivate": false, "json": "", "minLength": "", "maxLength": "", "strictDateValidation": false, "multiple": false, "unique": false }, "unique": false, "errorLabel": "", "key": "proveedor", "tags": [], "properties": {}, "conditional": { "show": null, "when": null, "eq": "", "json": "" }, "customConditional": "", "logic": [], "attributes": {}, "overlay": { "style": "", "page": "", "left": "", "top": "", "width": "", "height": "" }, "type": "textfield", "labelWidth": 10, "input": true, "refreshOn": "", "inputType": "text", "id": "ehuc0g", "defaultValue": null } ], "id": "ezbawdv" }, { "type": "button", "label": "Submit", "key": "submit", "size": "md", "block": false, "action": "submit", "disableOnInvalid": true, "theme": "primary", "input": true, "placeholder": "", "prefix": "", "customClass": "", "suffix": "", "multiple": false, "defaultValue": null, "protected": false, "unique": false, "persistent": false, "hidden": false, "clearOnHide": true, "refreshOn": "", "redrawOn": "", "tableView": false, "modalEdit": false, "labelPosition": "top", "description": "", "errorLabel": "", "tooltip": "", "hideLabel": false, "tabindex": "", "disabled": false, "autofocus": false, "dbIndex": false, "customDefaultValue": "", "calculateValue": "", "calculateServer": false, "widget": { "type": "input" }, "attributes": {}, "validateOn": "change", "validate": { "required": false, "custom": "", "customPrivate": false, "strictDateValidation": false, "multiple": false, "unique": false }, "conditional": { "show": null, "when": null, "eq": "" }, "overlay": { "style": "", "left": "", "top": "", "width": "", "height": "" }, "allowCalculateOverride": false, "encrypted": false, "showCharCount": false, "showWordCount": false, "properties": {}, "allowMultipleMasks": false, "leftIcon": "", "rightIcon": "", "dataGridLabel": true, "id": "egbmep4" } ] }

BraneHTEC commented 1 year ago

I know this is old issue, but did someone managed to find solution for this ? @caltamiranob

SiebePeetersMagos commented 4 weeks ago

@daneformio @jeriah-formio Do you have any news on it? I also want to store the minimal json

travist commented 3 weeks ago

If you are able to get the form "instance" of the rendered form in your controller, then the following will return the "minified" form schema.

console.log(instance.schema);  // "instance" is the Webform instance.