cannot add code actions from setting section

tulusibrahim commented 4 months ago

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:

optimajet commented 4 months ago

Hi @tulusibrahim! Please share JSON of the form.

tulusibrahim commented 4 months ago

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"
}

cherepanov commented 4 months ago

@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"
}

tulusibrahim commented 4 months ago

can i load options to dropdown without loadCallback? if can how to do that for example like e.data['dropdown'] = [{label:'', value:''}]

tulusibrahim commented 4 months ago

@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

cherepanov commented 4 months ago

@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:''}]

cherepanov commented 4 months ago

@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 commented 4 months ago

@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 commented 4 months ago

@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?

cherepanov commented 4 months ago

@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?

tulusibrahim commented 4 months ago

okay, how about the error? is there any explanation?

cherepanov commented 4 months ago

@tulusibrahim

I don't see any error in provided example. How to reproduce it?

tulusibrahim commented 4 months ago

just add code action to any input, and try to save it

cherepanov commented 4 months ago

@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",

optimajet / formengine

cannot add code actions from setting section #16