Developing a LowCodeEngine Plugin for Visual Event Management and Variable Binding

Background

Low‑code platforms are often criticized for being hard to use and lacking flexibility; the author argues they should be operated by product or business staff while developers maintain the platform.

Balancing simplicity with extensibility is difficult; more flexibility usually requires writing code.

LowCodeEngine aims for flexibility, which makes it less friendly to non‑frontend developers.

Nevertheless, its plugin system is powerful, and the author shares a plugin that enables non‑technical users to develop pages quickly.

Implementing a Small Feature Without the Plugin

A step‑by‑step demonstration of adding a button and a modal using the Ant Design material demo, binding a state variable to control visibility, and handling onOk/onCancel events.

Images illustrate dragging components, binding variables, and configuring event handlers.

Summary

The manual steps are cumbersome and not friendly to non‑React front‑end developers or product staff.

The desired experience is a visual configuration where clicking a button directly shows a modal without writing code.

Implementing the Same Feature With the Plugin

Using the custom plugin, the button and modal are linked through the visual event manager: select the button, bind its onClick event to the modal’s open method, and configure onOk / onCancel to close the modal, all without writing code.

Images show the event‑management side panel, component selection, and action node configuration.

Additional Examples

Further examples include opening a user‑entered URL after validation and simple form linkage, both configured visually.

Plugin Content Explanation

Preface

The plugin modifies LowCodeEngine’s event binding and property‑binding mechanisms.

Event Management

Describes the four panels of the event manager (Component area, Event area, Action configuration area, Event nodes) and the four node types (Start, Action, Condition, Event).

Property Binding Variables

The plugin simplifies variable binding by exposing component properties and providing common utility functions.

Plugin Core Technology Sharing

Event Management Plugin

How to scaffold a plugin with npm init @alilc/element your-material-name and select the plugin type.

Code snippets show obtaining the schema, component metadata, supported events, saving flow data, and retrieving it.

Flow Orchestration

Uses AntV G6 for flow diagrams.

Component Methods

Explains retrieving exposed component methods from material metadata.

Custom BaseRenderer rewrites __parseProps to treat variable types as script.

Variable Dialog Plugin

Registers a custom variable dialog widget and listens to the common:variableBindDialog.openDialog event.

Custom Material

Guides creating a custom modal component that exposes open and close methods and a setCurPageValue function for global state.

Custom Render

Discusses design‑time and preview‑time handling of variable scripts, overriding BaseRenderer and PageRenderer , and custom createElement logic to inject context and execute scripts.

Exec Script and Event Flow

Provides implementations of execScript (using new Function ) and execEventFlow for executing action and condition nodes, including error handling and conditional branching.

Conclusion

LowCodeEngine may not be the best low‑code platform for developers, but it is a powerful engine that defines many protocols, enabling rapid creation of customized low‑code solutions.