This article explains how to use the action panel in YiDA to write JS code for business logic or conditional evaluation. It covers supported editions, code input methods, action binding, retrieving callback function parameters, the API User Guide, JS debugging methods, and subform API improvements.
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.
Functions declared with export are recognized by the action panel and can be selected and invoked from it.Refer to the following code:
/** * Custom utility function; does not use context (this) */function something() { alert('something')}/** * @title Custom action A * Can use context (this) */export function custom_action_a() { alert('custom action a')}/** * @title Custom action B */export function custom_action_b() { something(); // Call the custom utility function this.custom_action_a(); // Call the custom action function}
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.
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.
const subFormInst = this.$('subformUniqueId');console.log(subFormInst.getValue()); // Get the entire list of subform data// First, get the row identifiersconst items = subFormInst.getItems(); // ["tfitem_1", "tfitem_2"]items.forEach(item => { const rowData = subFormInst.getItemValue(item); // Get the row data console.log(rowData['subformInnerComponentUniqueId']); // Get the field data for the specified row});
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.
// Subform bound eventexport function onChange({value, extra}) { const { formGroupId, from, changes = {} } = extra || {}; // Check whether the device field changed if (changes.fieldId === 'subformDeviceFieldUniqueId') { // Add the logic to execute after the subform change here };}
5.3 Update Related Row Data When Data in the Table Changes
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.
// Subform bound eventexport function onChange({value, extra}) { const { formGroupId, from, changes } = extra || {}; if (from === 'setItemValue') return; // Prevent an infinite loop when updateItemValue triggers onChange again // Handle single-row data change const tableField = this.$('subformUniqueId'); // Check whether the device field changed if (changes.fieldId === 'subformDeviceFieldUniqueId') { getDeviceInfo() // Custom API for retrieving device information .then((data) => { tableField.updateItemValue(formGroupId, { 'numberField_l00o018a': data.price, // Update the device price 'textareaField_kysd3grq': data.description, // Update the device description }); }) };}
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.
export function didMount(){ console.log('Entering the test method');- test1() // Calling this way throws the error shown above.+ this.test1() // Correct call. The principle is simple: context must be passed through this.}export function test1(){ console.log(this.$('abc').getValue());}
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: