Skip to main content
  • This component can serve as a reference for building a form component from a general component.
  • Note: This component is for learning purposes only and is not an officially provided standard component.

1. Use Case

  • YiDA released a Custom component feature that supports building components in a low-code way. However, it does not support form components — only display-oriented components can be built.
  • That said, the documentation notes that existing forms can be used for storage. Based on this approach, an image crop upload component was implemented by generating a new form to store data, simulating a pseudo form component.

3. Steps

2. Turn on the schema Import feature — the same approach as the YiDA form designer. For details, refer to:
  • Open the component designer, open the console, and run the following code:
3. Paste the following schema into the schema console of the component designer, then click Import schema

4. Principles Involved

  1. This approach primarily binds an existing form component for data storage, so that data can be submitted.
  2. The downside is a certain usage cost — you must control the visibility of the bound component yourself.
  3. Image cropping uses the open-source react-cropper: https://www.npmjs.com/package/react-cropper. Since installing NPM dependencies is not yet supported, the only option is to load it dynamically via CDN.