Skip to main content

1. Overview

Use the action panel in YiDA to write JS code that implements your business logic or conditional checks. The action panel makes it easier to organize and reuse code, and to build complex interactions.
  • Logic written in the JS panel generally does not apply to historical data.

2. Code Input in the Action Panel

Functions declared with export are recognized by the action panel and can be selected and invoked from it. Refer to the following code:
Notes:
Only declarations matching export function xxx() {} are recognized in the component action panel. Exported method names must be unique.
To manually retrieve or invoke an action in the panel, call this.methodName(); directly.

2.1 Action Binding in the Action Panel

Most components in YiDA support action binding. Action binding links a component’s action to a function defined in the action panel.

2.2 Retrieve Callback Function Parameters

Retrieve the parameters set in the callback function.

(1) Set Parameters in the Action Settings

Create an action.

(2) Retrieve the Parameters as Shown Below:

3. API User Guide

For details, see https://developers.aliwork.com/docs/api/about.

4. How to Debug JS Code

Use Chrome DevTools to debug. If you debug frequently, we recommend accessing YiDA through a browser. The most commonly used panels are Console, Network, and Elements. YiDA display pages are built with React, so you can also install React Developer Tools to debug the YiDA UI.

4.1 Use the debugger Keyword in Code

In JS functions, use the debugger keyword to pause execution for debugging. The video below demonstrates the basic use of debugger.

4.2 How to Reference Third-Party JS Resources

Verify the security of any JS resource you reference. Refer to the following code:

4.3 How to Learn JS

  • YiDA Developer Center
  • JavaScript Garden
  • JavaScript | MDN
  • Recommended book: Professional JavaScript for Web Developers (latest edition)
  • Communities: Juejin, Stack Overflow, GitHub, and more

5. Subform API Improvements

5.1 Retrieve Subform Data

5.2 Detect Subform Changes

When subform data changes, in addition to cell-level edits, formula calculations, data linkage, and external assignments also trigger the subform’s onChange event. To help you identify the source of the change, changes.fieldId indicates which cell’s data changed.
Use the updateItemValue API to assign values to cells. For example, when a device changes, use the API to populate the remaining information in the current subform.
You no longer need to assign values one by one via getComponent().setValue as before. That approach cannot guarantee a complete form update in asynchronous scenarios.

6. Common Errors

6.1 Cannot Read Property ’$’ of Undefined.

6.2 This Request Has Been Blocked; the Content Must Be Served Over HTTPS

The YiDA domain is https://www.yidaapps.com. Due to browser security restrictions, only HTTPS endpoints can be requested; HTTP endpoints are not allowed. Local endpoints such as http://192.168.xxx are also blocked. Important: To provide an API service, your endpoint must meet the following requirements:
  1. Use the HTTPS protocol with a valid certificate.
  2. Allow cross-origin access from www.yidaapps.com. Otherwise, a cross-site policy error occurs.