Quickstart

​

Case Scenario

​

Result Preview

​

Steps

​

Step 1: Create a Custom Component

1. Go to YiDA App >> App Settings >> Component Management >> Component Center (as shown below).
2. Add a Component >> fill in the component name, component type, component identifier, and other properties >> Confirm (as shown below).

​

Step 2: Develop and Debug the Custom Component

1. Component Center >> My Components >> locate the component you want to debug >> Develop (as shown below).
2. As mentioned earlier, a component is built from a view and its properties. When developing a component, first abstract the properties it requires. Let’s build the component properties first. This component needs only one property for text content. Go to Property Configuration >> Property Definition, add a text content property named content, set the property type to Text, and set the setter to textSetter.
3. After the component properties are built, construct the component view by adding the required YiDA standard components to the canvas (in this case, two Text components are needed, named “Text” and “Copy” respectively). Configure their basic properties, and use variable binding to bind the Text component’s content to the property props.content you just built. The passed-in property value is then displayed at runtime (as shown below).
4. Configure an action on the Button component to implement the text-copy effect. Select the “Copy” text >> Create Action >> onCopyText click (as shown below).
5. Write the copy logic in the JS panel (as shown below).

export function onCopyText() {
  const input = document.createElement('input');
  input.setAttribute('readonly', 'readonly');
  // Get properties via this.props.xxx
  input.setAttribute('value', this.props.content);
  document.body.appendChild(input);
  input.select();
  input.setSelectionRange(0, 9999);
  document.execCommand('copy');
  document.body.removeChild(input);
  this.utils.toast('Copied to clipboard successfully');
}

6. Save >> preview the component.
7. Publish >> fill in the version number and related notes >> Confirm (as shown below).
8. A prompt appears upon successful publishing (as shown below). In actual component development, once you save, you can install the development version (0.1.0) of the component for real-time debugging. The official version only needs to be published after component development is complete.

​

Step 3: Install the Custom Component

1. Form Design Page >> Component Library >> Custom Components >> Component Management (as shown below).
2. Component Management Page >> Component List >> select the custom component you want to install >> Install (as shown below).
3. Select the installation version and installation scope >> Install (as shown below).

​

Step 4: Use the Custom Component

1. Form Design Page >> Component Library >> Custom Components >> select the component you need >> drag it to the canvas (as shown below).

​

Step 5: View or Modify Component Information

1. App Settings >> Component Management >> Component Center (as shown below).
2. Select the component whose details you want to view or modify >> Details (as shown below).

​

Custom Component Properties

​

Entry for Custom Component Property Configuration

​

Custom Component Property Configuration Details

• Dual-end Design: A toggle. When enabled, the PC and mobile ends can be fully separated and designed independently to meet dual-end adaptation needs.
• Property Definition (propTypes): Customize basic properties of the custom component such as title, name, type (data format), and default value. You can also bind events such as Hide (whether the component is hidden) and On Change (when the displayed value changes) to meet various business needs. For details, see Component Property Configuration.
• Lifecycle: A custom component’s lifecycle has four stages: Component Rendered (componentDidMount), Component Updated (componentDidUpdate), Component Error Caught (componentDidCatch), and Before Component Unmount (componentWillUnmount). Write different logic for different lifecycle stages to meet complex business needs.
• Unique Identifier: Like YiDA standard components, custom components also have a unique identifier property that serves as the component’s unique identification code. It is automatically generated by the system and generally does not need to be changed. It is used for YiDA backend data storage, code binding, and so on.