general loadCallback function on loadData options

[tulusibrahim]

general loadCallback function on loadData options

[cherepanov]

@tulusibrahim

Yes, this is possible. Follow these steps:

• Request data on the form level, inside onDidMount
• Propagate it to the form's shared state.
• Use the calculated value for component data.

The key here is e.store.formData.state, a shared object that you can access across all components.

async function Action (e, args) {
    fetch ('https://gist.githubusercontent.com/rogargon/5534902/raw/434445021e155240ca78e378f10f70391dd594ea/countries.json')
        .then (data => data.json())
        .then (data => {
            const preparedData = data.map(value => ({value, label: value}))

            e.store.formData.state.options = preparedData 
        })
}

function Calculation (form) {
    return form.state.options
}

Here is fixed example https://stackblitz.com/edit/vitejs-vite-djtftw

And minimal form definition

{
  "version": "1",
  "actions": {
    "test": {
      "body": "    const foo = e.data['CommaValues'];\n    debugger",
      "params": {}
    },
    "preloadData": {
      "body": "    fetch ('https://gist.githubusercontent.com/rogargon/5534902/raw/434445021e155240ca78e378f10f70391dd594ea/countries.json')\n        .then (data => data.json())\n        .then (data => {\n            const preparedData = data.map(value => ({value, label: value}))\n\n            e.store.formData.state.options = preparedData       \n        })",
      "params": {
        "staticArg": "string"
      }
    },
    "dng": {
      "body": "    // debugger\n    console.log(e.data)\n    console.log(e.state)\n    console.log(e.data.state)\n    debugger",
      "params": {}
    },
    "estersr": {
      "body": "    debugger\n    // e.sender.field.componentStore = e.store.form.state",
      "params": {}
    }
  },
  "form": {
    "key": "Screen",
    "type": "Screen",
    "props": {},
    "css": {
      "any": {
        "object": {},
        "string": "    text-align: left;"
      }
    },
    "events": {
      "onDidMount": [
        {
          "name": "preloadData",
          "type": "code",
          "args": {
            "staticArg": "123"
          }
        }
      ]
    },
    "children": [
      {
        "key": "status",
        "type": "RsDropdown",
        "props": {
          "label": {
            "value": "Status"
          },
          "data": {
            "computeType": "function",
            "fnSource": "    return form.state.options"
          }
        },
        "wrapperCss": {
          "any": {
            "object": {}
          }
        },
        "htmlAttributes": [],
        "events": {
          "onSearch": []
        }
      }
    ]
  },
  "localization": {},
  "languages": [
    {
      "code": "en",
      "dialect": "US",
      "name": "English",
      "description": "American English",
      "bidi": "ltr"
    }
  ],
  "defaultLanguage": "en-US"
}

[cherepanov]

@tulusibrahim
Hi!

Please explain what you intend to implement.
What would be the end-user use case?
To create dependent form fields with various options, refer to the comment below.

[cherepanov]

You can use calculated value and get all fields data inside it.

Form code

{
  "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": "CommaValues",
        "type": "RsInput",
        "props": {}
      },
      {
        "key": "status",
        "type": "RsDropdown",
        "props": {
          "label": {
            "value": "Status"
          },
          "data": {
            "computeType": "function",
            "fnSource": "// enter your code here\n    const sourceFiledValue = form?.fields?.get('CommaValues').value;\n    const dropdownOptions = (sourceFiledValue || '').split(/(?:,| |;)+/);\n\n    return dropdownOptions.map((v) => ({label: v, value: v}));"
          }
        },
        "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"
}

[cherepanov]

And the same inside Actions callback.

Form code

```json { "version": "1", "actions": { "loadData": { "body": "\n const [searchValue, loadCallback, currentDataLength] = e.args\n const statusValue = e.data['status'];\n\n alert(`Selected status: ${statusValue}`);\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": { "staticArg": "string" } }, "test": { "body": " const foo = e.data['CommaValues'];\n debugger", "params": {} } }, "form": { "key": "Screen", "type": "Screen", "props": {}, "css": { "any": { "object": {}, "string": " text-align: left;" } }, "children": [ { "key": "CommaValues", "type": "RsInput", "props": {} }, { "key": "status", "type": "RsDropdown", "props": { "label": { "value": "Status" }, "data": { "computeType": "function", "fnSource": "// enter your code here\n const sourceFiledValue = form?.fields?.get('CommaValues').value;\n const dropdownOptions = (sourceFiledValue || '').split(/(?:,| |;)+/);\n\n return dropdownOptions.map((v) => ({label: v, value: v}));" } }, "wrapperCss": { "any": { "object": {} } }, "htmlAttributes": [], "events": { "onSearch": [] } }, { "key": "unit", "type": "RsDropdown", "props": { "label": { "value": "Unit" }, "readOnly": { "computeType": "function", "value": false } }, "events": { "onLoadData": [ { "name": "loadData", "type": "code" } ], "onSearch": [ { "name": "test", "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]

@tulusibrahim Hi!

Please explain what you intend to implement. What would be the end-user use case? To create dependent form fields with various options, refer to the comment below.

i want to have one custom action to fetch all data needed (hit multiple external API) and set it to multiple input within the form. can i do it?