Custom Component FAQs

1. Cannot Find the Delete Function

The Delete function is not available during the beta period and may remain unavailable after the official launch. Deletion introduces complex dependency issues and is not currently essential. The overall approach will follow a model similar to https://www.npmjs.com/.

2. How to Understand Business Components?

Refer to this guide.

3. Component Structure

A component consists of a view and its attributes. On the consumer side, change the component’s attributes to make it render different views. Views fall into two categories: design views and runtime views. In most cases, design views and runtime views can be reused. On the producer side, you need to build both the view and the attributes separately.

4. Can an App with Custom Components Be Distributed to Other Organizations and Opened Normally?

Yes. After an app with custom components is distributed to another organization, that organization can use the component normally but cannot update it. To update the component, the service provider must reinstall the new version in the distributed app through remote maintenance. If the component is well abstracted, this partially addresses the need to update apps after distribution.

5. How to Access Custom Component Attributes in a Page?

Custom components work the same as Basic components. Use this.$('fieldId').get('propName') to retrieve the corresponding component’s attribute.

6. How to Update Custom Component Attributes in a Page?

Custom components work the same as Basic components. Use this.$('fieldId').set('propName', propValue) to update the corresponding component’s attribute. Alternatively, use the Data Source variable binding approach.

7. How to Get Page Components in a Component and Link with Components in the Page?

Add a Function-type attribute to the custom component to serve as an event callback. On the page, use this event callback to link with other components on the page. Inside the component, invoke this callback at the appropriate time by calling this.props.xxx(), for example during a component event or in the component’s DidMount. Tip: Function-type attributes can have default values and can be set to hidden.

8. How to Delete a Custom Component?

Deleting components is not currently supported, because deletion introduces complex dependency issues. The overall approach will follow a model similar to https://www.npmjs.com/.

9. How to Uninstall a Custom Component?

Uninstalling components is not currently supported, as it would affect existing apps. This feature will be considered in future iterations.

10. Do Custom Components Support Installing Third-Party NPM Packages?

Not at this time. Use dynamic CDN resource loading instead.

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. Cannot See the Component in the Panel After Installation?

A: Check the installation scope.

12. How to Submit Data in a Form Using Custom Components?

A: YiDA custom components do not currently support form components. To submit data, populate an existing form component instead. For example, declare an attribute with a unique identifier, pass in an existing form’s unique identifier when using it, and write the required data back to the existing form through events on the component side.

13. Component Version Description

Components are divided into development versions and official versions. YiDA custom component versioning follows semantic versioning with additional conventions.

0.1.0 is the default development version. The development version stays synchronized with the component designer in real time for debugging.
1.x.x is the official version after release, which locks the current version’s functionality to ensure stability in production. Production apps must therefore install the official version 1.x.x after release.

14. I Defined an Attribute. When This Attribute Changes, How Does the Component Change Accordingly?

In the component designer, locate the component that needs to change, find the relevant attribute, bind a variable or a custom handler function to it, and use this.props.xxx to handle the different cases. For example:

15. Can I Dynamically Set Styles in a Component?

Yes. Use a container component, add a “custom style class” to it, and control the style by binding a variable.

Getting Started

Developer Guide

API

Tutorials

Components

1. Cannot Find the Delete Function

2. How to Understand Business Components?

3. Component Structure

4. Can an App with Custom Components Be Distributed to Other Organizations and Opened Normally?

5. How to Access Custom Component Attributes in a Page?

6. How to Update Custom Component Attributes in a Page?

7. How to Get Page Components in a Component and Link with Components in the Page?

8. How to Delete a Custom Component?

9. How to Uninstall a Custom Component?

10. Do Custom Components Support Installing Third-Party NPM Packages?

11. Cannot See the Component in the Panel After Installation?

12. How to Submit Data in a Form Using Custom Components?

13. Component Version Description

14. I Defined an Attribute. When This Attribute Changes, How Does the Component Change Accordingly?

15. Can I Dynamically Set Styles in a Component?

​1. Cannot Find the Delete Function

​2. How to Understand Business Components?

​3. Component Structure

​4. Can an App with Custom Components Be Distributed to Other Organizations and Opened Normally?

​5. How to Access Custom Component Attributes in a Page?

​6. How to Update Custom Component Attributes in a Page?

​7. How to Get Page Components in a Component and Link with Components in the Page?

​8. How to Delete a Custom Component?

​9. How to Uninstall a Custom Component?

​10. Do Custom Components Support Installing Third-Party NPM Packages?

​11. Cannot See the Component in the Panel After Installation?

​12. How to Submit Data in a Form Using Custom Components?

​13. Component Version Description

​14. I Defined an Attribute. When This Attribute Changes, How Does the Component Change Accordingly?

​15. Can I Dynamically Set Styles in a Component?

1. Cannot Find the Delete Function

2. How to Understand Business Components?

3. Component Structure

4. Can an App with Custom Components Be Distributed to Other Organizations and Opened Normally?

5. How to Access Custom Component Attributes in a Page?

6. How to Update Custom Component Attributes in a Page?

7. How to Get Page Components in a Component and Link with Components in the Page?

8. How to Delete a Custom Component?

9. How to Uninstall a Custom Component?

10. Do Custom Components Support Installing Third-Party NPM Packages?

11. Cannot See the Component in the Panel After Installation?

12. How to Submit Data in a Form Using Custom Components?

13. Component Version Description

14. I Defined an Attribute. When This Attribute Changes, How Does the Component Change Accordingly?

15. Can I Dynamically Set Styles in a Component?