How Low‑Code Platforms Enable Code‑Free Component Interaction for Non‑Developers

Background

The map data operation platform evolves from a large‑scale WebGIS "comprehensive operation" to a human‑machine combined, WYSIWYG "simple operation" pipeline.

Pipeline operations feature simple workshop interactions, but each workshop has custom business logic, making configuration difficult and favoring low‑code solutions.

Even simple workshops involve data validation, component linking, and result conversion logic.

The low‑code goal is to enable product, process, and other non‑R&D staff to independently build workshops by visualizing logic and minimizing code.

Non‑frontend developers often lack understanding of concepts such as event‑driven architecture, immutable data principles, two‑way binding, and controlled components.

Problem and Analysis

Simple linkage example

Seven components are involved. During initialization, the second and third tasks are disabled; selecting "No" for a task activates the next one, while selecting "Yes" clears subsequent tasks.

The current low‑code engine solves this by binding event callbacks in WebIDE and writing code, which is easy for frontend developers but difficult for non‑developers who must grasp event‑driven and immutable concepts.

We need a more user‑friendly solution that requires no code or only an expression to achieve the same linkage.

Example Code

// Pseudo‑code implementation
class Main extends PurComponents {
  constructor() {
    this.state = {
      A: '',
      B: '',
      C: ''
    };
  }
  // Response logic
  handleAChange = (e) => {
    // 1. Data source filtering
    const { target: { value } } = e;
    // 2. Two‑way binding, organize data structure
    let stateOptions = { A: value };
    // 3. Data linkage
    if (value === '1') {
      stateOptions = { ...stateOptions, B: '', C: '' };
    }
    // 4. Update data
    this.setState(stateOptions);
  };
  // UI components
  render() {
    <div className="pic-wrapper"><PicPlayer ... /></div>
    <div className="task-oper">
      <Text>Is the sign a construction scenario?</Text>
      <ButtonGroup onChange={(e) => this.handleAChange(e)} />
      ...
      <ButtonGroup disabled={A !== '2'} ... />
      ...
      <ButtonGroup disabled={B !== '2'} ... />
    </div>
    ...
  }
}

Component Linkage Explanation

The implementation consists of UI + logic.

In visual building, UI and simple interactions are handled by the component itself, while cross‑component logic is implemented via event callbacks, which can be divided into four main functions:

Data filtering : extract required data from function parameters (event‑driven concept).

Two‑way binding : controlled components driven by external data; state changes update dependent data sources (controlled component, two‑way binding, immutable principle).

Data linkage : update other data, component‑to‑component communication (business logic).

Data update : frontend framework API.

Simplifying Concepts

To simplify data filtering, a data filterer allows users to declare function parameters via a tree structure and select them, achieving destructuring‑like behavior without code.

For two‑way binding, data linkage, and immutability, we defined a concise data storage syntax and built a parsing plugin.

We treat a component state change that triggers other components as a "side‑effect" called saveEffect , which consists of three parts: source data, target data, and transformation logic.

{
  // Source data
  fromPath: 'e.target.value',
  // Target data
  toPath: 'state.B',
  // Transformation logic
  formatFunc: 'function switchStoreValue(value, state) { return A == 1 ? "" : state.B; }'
}

The low‑code setter @ali/lowcode-setter-a-event-setter injects the saveEffect into the component; the component emits the value and saveEffect object, which the parsing plugin resolves and executes, achieving component linkage without writing code.

Usage Effect

In an online workshop example, updating a lane attribute originally required several lines of JavaScript to handle immutable updates and state setting.

function handleButtonGroupClick(value) {
  const { arrowList, currentIndex } = this.state;
  const currentArrow = arrowList[currentIndex];
  const newArrow = { ...currentArrow, type: value };
  const newArrowList = arrowList.slice(0, currentIndex).concat([newArrow]).concat(arrowList.slice(currentIndex + 1));
  this.setState({ arrowList: newArrowList });
}

With the saveEffect approach, the user only needs to specify the target path:

state.arrowList[state.currentIndex].type = value

The corresponding setter UI allows users to configure this expression visually.

Summary and Outlook

This article demonstrates how custom plugins, setters, and component standardization reduce the difficulty of component linkage and data handling in a low‑code operation platform, enabling non‑R&D staff to independently build fine‑grained workshops. Additional visual components such as loops, if/else, and template syntax further simplify development.

Future plans include adding logical orchestration capabilities to the low‑code platform, achieving graphical representation of logic code for more complex workshop construction.

References

Alibaba Low‑Code Engine: https://lowcode-engine.cn/docV2/intro

Setter Extension: https://lowcode-engine.cn/docV2/cl03wo_nmhznb

Setter Development Debugging: https://lowcode-engine.cn/docV2/ulvlkz

Material Specification: https://lowcode-engine.cn/material

Alibaba Low‑Code Engine Documentation: https://www.yuque.com/lce/doc