Custom Component FAQ

1. Currently no delete function found

During the internal testing period, the delete function will not be implemented. Even when officially launched, there may not be a delete function. Deletion brings complex dependency issues and is not currently essential. For now, it will be similar to https://www.npmjs.com/.

2. How to understand business components?

You can refer to this link

3. Component Composition

Components are composed of views and properties. On the component consumption side, changing the component's properties allows the component to display different views. Views can be further divided into design views and runtime views. Generally, design views and runtime views can be reused. On the component production side, we need to build the component's view and properties separately.

4. Can applications with custom components be properly opened when distributed to other organizations through application distribution?

Yes. After applications with custom components are distributed to other organizations, the organization can also use the component normally, but cannot update the component. Updating components requires the service provider to reinstall the new version of the component for the distributed application through remote maintenance. If the component is well abstracted, it can actually solve some of the requirements for applications that cannot be updated after distribution.

5. How to access custom component properties in a page?

Custom components are the same as basic components, using this.$('fieldId').get('propName') to get the properties of the corresponding component.

6. How to update custom component properties in a page?

Custom components are the same as basic components, using this.$('fieldId').set('propName', propValue) to update the properties of the corresponding component. Or use the method of binding data source variables.

7. How to get page components in a component and make linkage with components in the page?

You can add a function-type property to the custom component, which is an event callback. In the page, you can make linkage with other components in the page through this event callback. In the component, you can execute this callback at appropriate times through this.props.xxx(), such as a certain event of the component or the component's DidMount.

8. How to delete custom components?

Deleting components is temporarily not supported as deletion brings complex dependency issues. For now, it will be similar to https://www.npmjs.com/.

9. How to uninstall custom components?

Component uninstallation is temporarily not supported, as it would affect existing applications. This feature will be considered in future iterations.

10. Do custom components support installing third-party NPM packages?

Currently not supported. You can use the method of dynamically loading CDN resources.

function loadScript(src, callback) {
  if (!src) {
    return;
  }
  const node = document.createElement('script');
  node.src = src;
  node.addEventListener('load', callback, false);
  document.head.appendChild(node);
}
function loadCss(url) {
  const linkElement = document.createElement('link');
  linkElement.rel = 'stylesheet';
  linkElement.href = url;
  document.body.appendChild(linkElement);
}
(function loadAssets() {
  loadCss('https://dev.g.alicdn.com/yida-platform/react-cropper/1.0.0/css/react-cropper.css');
  loadScript('https://dev.g.alicdn.com/yida-platform/react-cropper/1.0.0/js/react-cropper.js', () => {
    // your code
  });
})();

11. After installing the component, it's not visible in the panel?

A: Check the installation scope

12. How do custom components submit data in forms?

A: Currently, Yida's custom components do not yet open form components. If you want to submit data, you can use the method of filling into existing form components. For example: declare a unique identifier property, pass in an existing form's unique form when using, and have the component side backfill the required data to the existing form through events.

13. Component Version Description

Components are divided into development version and official version. Yida's custom component version is based on semantic versioning with additional conventions.

1. 0.1.0 is the default development version, which can be synchronized in real-time with the component designer for component debugging.
2. 1.x.x is the official version after release, which fixes the functionality of the current version and guarantees the stability of using this component online. Therefore, please be sure to install the official version after 1.x.x release for production applications.

14. I defined a property, changing this property, how does the component generate changes based on this property?

In the component designer, find the component that needs to change, find the relevant properties, bind a variable or custom processing function to the property, and use this.props.xxx to make different treatments. For example: or

15. Can styles be dynamically set in components?

You can use container components by adding a "custom style class" to the container component and binding variables for control.