Closed tulusibrahim closed 1 month ago
Hi @tulusibrahim! Please share JSON of the form.
here is the JSON
{
"version": "1",
"form": {
"key": "Screen",
"type": "Screen",
"props": {},
"css": {
"any": {
"object": {},
"string": " text-align: left;"
}
},
"children": [
{
"key": "status",
"type": "RsDropdown",
"props": {
"label": {
"value": "Status"
}
},
"wrapperCss": {
"any": {
"object": {}
}
},
"htmlAttributes": []
},
{
"key": "unit",
"type": "RsDropdown",
"props": {
"label": {
"value": "Unit"
},
"readOnly": {
"computeType": "function",
"value": false
}
}
},
{
"key": "remark",
"type": "RsTextArea",
"props": {
"label": {
"value": "Remark"
},
"size": {
"value": "md"
}
}
},
{
"key": "feedback",
"type": "RsTextArea",
"props": {
"label": {
"value": "Feedback"
}
}
},
{
"key": "RsButton 1",
"type": "RsButton",
"props": {
"children": {
"value": "Submit"
}
},
"events": {
"onClick": [
{
"name": "save",
"type": "custom"
}
]
}
}
]
},
"localization": {},
"languages": [
{
"code": "en",
"dialect": "US",
"name": "English",
"description": "American English",
"bidi": "ltr"
}
],
"defaultLanguage": "en-US"
}
@tulusibrahim
Hi! Provided source is not complete. So my guess you are trying to load sample data to Dropdown. Here is fixed JSON. You can test it on https://demo.formengine.io/
On minimally declared FormBuilder it also should work
<FormBuilder view={builderView} formName="SampleForm" getForm={getForm}/>
{
"version": "1",
"actions": {
"loadData": {
"body": "\n const [searchValue, loadCallback, currentDataLength] = e.args\n\n fetch ('https://gist.githubusercontent.com/rogargon/5534902/raw/434445021e155240ca78e378f10f70391dd594ea/countries.json')\n .then (data => data.json())\n .then (data => {\n const preparedData = data\n .filter(value => value.toLowerCase().includes(searchValue.toLowerCase()))\n .slice(currentDataLength, currentDataLength + 20)\n .map(value => ({value, label: value}))\n\n loadCallback(preparedData) \n })\n",
"params": {}
}
},
"form": {
"key": "Screen",
"type": "Screen",
"props": {},
"css": {
"any": {
"object": {},
"string": " text-align: left;"
}
},
"children": [
{
"key": "status",
"type": "RsDropdown",
"props": {
"label": {
"value": "Status"
}
},
"wrapperCss": {
"any": {
"object": {}
}
},
"htmlAttributes": []
},
{
"key": "unit",
"type": "RsDropdown",
"props": {
"label": {
"value": "Unit"
},
"readOnly": {
"computeType": "function",
"value": false
}
},
"events": {
"onLoadData": [
{
"name": "loadData",
"type": "code"
}
]
}
},
{
"key": "remark",
"type": "RsTextArea",
"props": {
"label": {
"value": "Remark"
},
"size": {
"value": "md"
}
}
},
{
"key": "feedback",
"type": "RsTextArea",
"props": {
"label": {
"value": "Feedback"
}
}
},
{
"key": "RsButton 1",
"type": "RsButton",
"props": {
"children": {
"value": "Submit"
}
},
"events": {
"onClick": []
}
}
]
},
"localization": {},
"languages": [
{
"code": "en",
"dialect": "US",
"name": "English",
"description": "American English",
"bidi": "ltr"
}
],
"defaultLanguage": "en-US"
}
can i load options to dropdown without loadCallback? if can how to do that for example like e.data['dropdown'] = [{label:'', value:''}]
@tulusibrahim
Hi! Provided source is not complete. So my guess you are trying to load sample data to Dropdown. Here is fixed JSON. You can test it on https://demo.formengine.io/
On minimally declared FormBuilder it also should work
<FormBuilder view={builderView} formName="SampleForm" getForm={getForm}/>
{ "version": "1", "actions": { "loadData": { "body": "\n const [searchValue, loadCallback, currentDataLength] = e.args\n\n fetch ('https://gist.githubusercontent.com/rogargon/5534902/raw/434445021e155240ca78e378f10f70391dd594ea/countries.json')\n .then (data => data.json())\n .then (data => {\n const preparedData = data\n .filter(value => value.toLowerCase().includes(searchValue.toLowerCase()))\n .slice(currentDataLength, currentDataLength + 20)\n .map(value => ({value, label: value}))\n\n loadCallback(preparedData) \n })\n", "params": {} } }, "form": { "key": "Screen", "type": "Screen", "props": {}, "css": { "any": { "object": {}, "string": " text-align: left;" } }, "children": [ { "key": "status", "type": "RsDropdown", "props": { "label": { "value": "Status" } }, "wrapperCss": { "any": { "object": {} } }, "htmlAttributes": [] }, { "key": "unit", "type": "RsDropdown", "props": { "label": { "value": "Unit" }, "readOnly": { "computeType": "function", "value": false } }, "events": { "onLoadData": [ { "name": "loadData", "type": "code" } ] } }, { "key": "remark", "type": "RsTextArea", "props": { "label": { "value": "Remark" }, "size": { "value": "md" } } }, { "key": "feedback", "type": "RsTextArea", "props": { "label": { "value": "Feedback" } } }, { "key": "RsButton 1", "type": "RsButton", "props": { "children": { "value": "Submit" } }, "events": { "onClick": [] } } ] }, "localization": {}, "languages": [ { "code": "en", "dialect": "US", "name": "English", "description": "American English", "bidi": "ltr" } ], "defaultLanguage": "en-US" }
yes the json you gave is work, but in local dev, when i try to edit loadData function, it gave me error Uncaught TypeError: Cannot convert undefined or null to object
in the console, even when im not change anything and just trying to save it. the same thing also happened when i try to add new code actions
@tulusibrahim At which stage would you like to load the data? Is the datasource an HTTP request?
can i load options to dropdown without loadCallback? if can how to do that for example like e.data['dropdown'] = [{label:'', value:''}]
@tulusibrahim
This should not happen. Could you please share your project or create a minimum reproducible example that we can inspect for exceptions?
yes the json you gave is work, but in local dev, when i try to edit loadData function, it gave me error
Uncaught TypeError: Cannot convert undefined or null to object
in the console, even when im not change anything and just trying to save it. the same thing also happened when i try to add new code actions
@tulusibrahim At which stage would you like to load the data? Is the datasource an HTTP request?
can i load options to dropdown without loadCallback? if can how to do that for example like e.data['dropdown'] = [{label:'', value:''}]
yes its an http request
@tulusibrahim
This should not happen. Could you please share your project or create a minimum reproducible example that we can inspect for exceptions?
yes the json you gave is work, but in local dev, when i try to edit loadData function, it gave me error
Uncaught TypeError: Cannot convert undefined or null to object
in the console, even when im not change anything and just trying to save it. the same thing also happened when i try to add new code actions
here the link of reproducible example: https://stackblitz.com/edit/vitejs-vite-cvrbue?file=src%2FApp.jsx,src%2FbuilderForm.jsx,src%2FviewerForm.jsx,package.json,src%2Fform.json&terminal=dev
there i add another select
dropdown, i wonder why is the options just keep growing eventough i only set one item in it?
@tulusibrahim
The loadCallback should be invoked only for new data items. You must check currentDataLength(current list length) to ensure whether new data should be returned.
there i add
another select
dropdown, i wonder why is the options just keep growing eventough i only set one item in it?
okay, how about the error? is there any explanation?
@tulusibrahim
I don't see any error in provided example. How to reproduce it?
just add code action to any input, and try to save it
@tulusibrahim
Now I see. It's related to an old RSuite bug. We released v1.1.0 last week for FormEngine, which brings fresh RSuite. Simply bump the FE packages to:
"@react-form-builder/components-rsuite": "^1.1.0",
"@react-form-builder/core": "^1.1.0",
"@react-form-builder/designer": "^1.1.0",
Hi, im trying to follow the example to load data from external resource, but when i do it there is this error: Uncaught TypeError: Cannot convert undefined or null to object
because i see the loadData function is created here
is there something i missing? or did i do it wrong?
the builder component:![image](https://github.com/optimajet/formengine/assets/70683601/2c8ccdec-82e6-47e0-9ccb-8f23ba9605d4)