Skip to main content

1. Background

  • YiDA components introduced a custom component feature that supports building components in a low-code manner. However, it does not support form components — only display-type components can be built.
  • The documentation notes that existing forms can be used for storage. Based on this approach, an image cropping and upload component was built by generating a new form to store data, thereby simulating a pseudo form component.

3. Steps

2. Enable the schema import feature, in the same way as the YiDA form designer. Refer to the following:
  • Open the component designer, open the console, and run the following code.
3. Paste the schema below into the schema console of the component designer, and click Import schema.

4. Principles Behind This Case

  1. Building on case 2, this case mainly leverages the ability to write code in the component’s “on value change” configuration property. The code generates a schema that automatically creates the form used to store data.
  2. Users simply click “Enable form storage” to use it.
  3. Image cropping is powered by the open-source react-cropper (https://www.npmjs.com/package/react-cropper). Since NPM dependency installation is not yet supported, dynamic loading via CDN is the only option.