Comments (14)
Hi @tulusibrahim! Please share JSON of the form.
from formengine.
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"
}
from formengine.
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"
}
from formengine.
can i load options to dropdown without loadCallback? if can how to do that
for example like e.data['dropdown'] = [{label:'', value:''}]
from formengine.
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
from formengine.
@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:''}]
from formengine.
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
from formengine.
@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
from formengine.
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?
from formengine.
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?
from formengine.
okay, how about the error? is there any explanation?
from formengine.
I don't see any error in provided example. How to reproduce it?
from formengine.
just add code action to any input, and try to save it
from formengine.
Related Issues (15)
- On production build Viewer faces an error that Anonymous components are not allowed! HOT 2
- Setting "valued" to an object type in a custom component HOT 5
- Crash when RsContainer doesn't exist "props" in the objet HOT 1
- form builder localization HOT 6
- onFormDataChange looping if there is setState inside HOT 5
- general loadCallback function on loadData options HOT 5
- Download JSON HOT 2
- Triggered custom download callback function HOT 2
- Triggering getForm and hiding toolbar items HOT 4
- Customize builder UI HOT 2
- Issue Report: Updating Component Keys in Formengine React Library HOT 1
- Formbuilder clashes in i18n library/ dropdowns seem to render elsewhere HOT 5
- Form Builder (One to one) HOT 4
- Forms Tab is Not available? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from formengine.