Zero-code workbench configuration system based on drag-and-drop interaction and business rule engine

Abstract

This invention discloses a zero-code workbench configuration system based on drag-and-drop interaction and a business rule engine, including a component library and management module, a drag-and-drop visual editing canvas module, a business rule engine module, a data source binding module, a dynamic rendering engine module, and a workbench preview and publishing module. Specifically, it is an intelligent office workbench system that enables zero-code configuration of the workbench through visual drag-and-drop operations and drives dynamic linkage of components through a business rule engine, thereby reducing the configuration threshold, improving business response speed, and breaking down data silos.

Description

Technical Field

[0001] This invention relates to the field of human-computer interaction technology, and in particular to a zero-code workbench configuration system based on drag-and-drop interaction and a business rule engine. Background Technology

[0002] As enterprises deepen their digital transformation, collaborative office systems have become an essential infrastructure for business operations. Different business departments and employees with different roles have significantly different needs for information display on the work platform: management needs an overview of operational data, frontline staff need tasks and to-do lists, and engineering staff need project progress tracking. However, existing technical solutions have the following prominent problems:

[0003] 1. Configuration relies heavily on the technical team, resulting in long response times. Traditional office platforms typically provide workbench modules with fixed templates, preventing employees from adjusting page layouts and content to suit their business needs. Changing displayed fields, adjusting layouts, or adding new features requires code development by the IT department, with configuration cycles often taking weeks, failing to meet the immediate needs of business personnel.

[0004] 2. Poor component reusability and high customization costs. Data display modules in existing office systems typically exist as independent pages, lacking unified abstraction and encapsulation logic between components. Adding a new type of display card often requires redevelopment, resulting in low reusability and high customization costs for enterprises.

[0005] 3. Hard-coded business rules, lacking flexibility. Although some platforms offer some page configuration capabilities, their data filtering logic, display conditions, and linkage behaviors are all implemented in a hard-coded manner. When business rules change (such as adjustments to approval processes or changes in data display conditions), developers must modify the code, resulting in high system maintenance costs and risks.

[0006] 4. Data silos across multiple systems lead to high interoperability costs. Enterprises typically run multiple business systems (OA, ERP, project management systems, etc.) simultaneously. Data between these systems is not shared, requiring employees to switch between multiple platforms, resulting in low operational efficiency. Although some platforms support page embedding, data linkage after embedding still relies on API connections between systems, which is complex to configure and has a high technical threshold. Summary of the Invention

[0007] To address the aforementioned issues, this invention provides a zero-code workbench configuration system based on drag-and-drop interaction and a business rule engine. Specifically, it is an intelligent office workbench system that enables zero-code configuration of the workbench through visual drag-and-drop operations and drives dynamic linkage of components through a business rule engine, thereby reducing the configuration threshold, improving business response speed, and breaking down data silos.

[0008] The technical solution of the present invention is as follows:

[0009] A zero-code workbench configuration system based on drag-and-drop interaction and a business rules engine includes a component library and management module, a drag-and-drop visual editing canvas module, a business rules engine module, a data source binding module, a dynamic rendering engine module, and a workbench preview and publishing module; wherein:

[0010] The component library and management module are used to organize the visualization components in a tree-like classification structure, dividing the workbench components into six categories: fixed components, news components, statistical components, data display components, and other components. Each category of components contains several specific component items.

[0011] The drag-and-drop visual editing canvas module is used to classify, edit, configure, adjust, save, and preview components. It adopts a four-section layout design, including a component selection area on the left, a central canvas editing area, a top toolbar, and a property configuration area on the right.

[0012] The business rule engine module is used to define the display logic, data filtering conditions and linkage behavior of components in a visual way. It consists of three parts: rule definition layer, rule parsing layer and rule execution layer. The rule engine supports nested rules and priority settings, and supports rules to take effect at the component level and page level.

[0013] The data source binding module is used to provide independent data source configuration capabilities for each component, supporting both static data upload and dynamic interface data modes.

[0014] The dynamic rendering engine module is used to render and output the configured workbench page in real time. It includes a style rendering layer, a data binding layer, and a rule injection layer. The three layers work together to achieve dynamic and efficient rendering of the workbench page. Configuration changes take effect immediately without the need to rebuild or restart the service.

[0015] The workbench preview and publishing module provides two main functions: saving and previewing.

[0016] In a further technical solution, the component library and management module is also responsible for component registration, version management, and the expansion of custom components, and supports saving the configured components as personal templates and reusing them on other workbench pages.

[0017] In a further technical solution, the component library and management module includes statistical components such as bar charts, line charts, pie charts, numerical charts, dual-axis charts, perspective charts, and ranking charts; and data display components such as tables, regular cards, custom cards, and regular major events.

[0018] In a further technical solution, in the drag-and-drop visual editing canvas module, the left component selection area is used to present component categories in a collapsible tree list. Users drag target components from the component library into the central canvas editing area using mouse drag operations. The central canvas editing area is based on a gridded canvas, where users can configure the number of rows, columns, grid height, and design gaps. Drag-in components are automatically arranged under grid constraints and cannot overlap. The top toolbar provides reference line switches, alignment guide line switches, interface layout display control switches, restore default, save, and preview functions. The right attribute configuration area dynamically switches between displaying global page attributes or component attribute configuration items based on the currently selected object.

[0019] In a further technical solution, within the business rule engine module, the rule definition layer provides a visual condition editor. Users define component behaviors by configuring "condition-action" rule statements. Conditions support multiple dimensions, including field comparisons (equal to, greater than, less than, contain, not empty), time ranges, user roles, and data status. Action types include showing components, hiding components, switching data views, sending notifications, and redirecting links. The rule parsing layer parses the user-configured rule statements into executable rule models and performs syntax validation and conflict detection. The rule execution layer evaluates rule conditions in real time during component rendering and automatically executes corresponding actions when trigger conditions are met, without refreshing the page.

[0020] In a further technical solution, the data source binding module is also used to provide a data filter function, which supports users to configure data filtering conditions in a visual manner. The data is filtered before being passed into the component and then drives the component content to update dynamically.

[0021] In a further technical solution, in the data source binding module, under static data mode, users can directly upload Excel files or paste structured data, and the system automatically parses the fields and binds them to the display dimensions of the component; under dynamic interface data mode, users select the target data table and configure the X-axis field, Y-axis field and statistical method, and the system automatically generates data query statements and refreshes the data periodically.

[0022] In a further technical solution, within the dynamic rendering engine module, the style rendering layer is used to visually render the component according to the style parameters (size, position, color, animation, transparency) set by the user in the attribute configuration area; the data binding layer is used to inject data from the data source binding module into the component's display dimension according to the configured mapping relationship, triggering component content updates; and the rule injection layer is used to attach the rules from the business rule engine module to the rendering process of the corresponding component during the rendering process, dynamically controlling the component's display state, data range, and interactive behavior according to the rule conditions.

[0023] In a further technical solution, the workbench preview and release module includes a save function that persistently stores all component configuration information, layout parameters, business rules, and data source binding information of the current workbench to the server or local machine, supporting version management; the preview function renders the final display effect in an independent tab or modal window, automatically hides all editing auxiliary elements, realistically simulates the runtime environment, and allows for one-click release to the designated terminal after user confirmation.

[0024] The beneficial effects of this invention are:

[0025] 1. Zero-code configuration, lowering the barrier to entry. Users do not need software development skills; they can build the workbench by dragging and dropping components and using visual configuration. The configuration takes effect immediately after completion, without waiting for IT support, significantly shortening the response cycle for business needs.

[0026] 2. Driven by a business rules engine, flexible and controllable. The display logic and data linkage rules of components are defined through a visual condition editor, eliminating the need for hard coding. When business rules change, business personnel can directly adjust the rule configuration, which takes effect in real time, significantly reducing system maintenance costs.

[0027] 3. Component-based architecture, high reusability and low redundancy. A unified component abstraction and encapsulation system enables various visual components to be developed, registered and reused independently. Workbench configurations can be saved as templates and reused in other scenarios. The component library can be continuously expanded, significantly improving development efficiency.

[0028] 4. Unified access to multiple data sources, breaking down data silos. The data source binding module supports both static data and dynamic interface modes, and can connect to the data interfaces of multiple business systems within the enterprise, enabling cross-system data display in a unified workbench and eliminating the efficiency loss of switching between multiple platforms;

[0029] 5. Gridded canvas and intelligent alignment ensure precise and efficient layout. The gridded canvas design, combined with dynamic magnetic alignment guides, allows users to achieve pixel-level precision layout without precise measurements, ensuring both configuration efficiency and layout quality. Attached Figure Description

[0030] Figure 1 This is an architecture diagram of the zero-code workbench configuration system based on drag-and-drop interaction and a business rules engine, as described in an embodiment of the present invention. Detailed Implementation

[0031] The embodiments of the present invention will be further described below with reference to the accompanying drawings.

[0032] Example:

[0033] A zero-code workbench configuration system based on drag-and-drop interaction and a business rules engine includes a component library and management module, a drag-and-drop visual editing canvas module, a business rules engine module, a data source binding module, a dynamic rendering engine module, and a workbench preview and publishing module; wherein:

[0034] The component library and management module organizes visualization components in a tree-like structure, dividing the workbench components into six categories: fixed components, news components, statistical components, data display components, and other components. Each category contains several specific component items. For example, statistical components include bar charts, line charts, pie charts, numerical charts, dual-axis charts, pivot charts, and ranking charts; data display components include tables, regular cards, custom cards, and regular major events.

[0035] The drag-and-drop visual editing canvas module is used to categorize, edit, configure, adjust, save, and preview components. It employs a four-part layout: a left-side component selection area, a central canvas editing area, a top toolbar, and a right-side attribute configuration area. The left-side component selection area presents component categories in a collapsible tree list; users drag and drop target components from the component library into the central canvas editing area. The central canvas editing area uses a gridded canvas as its base, allowing users to configure the number of rows, columns, grid height, and design gaps. Drag-in components are automatically arranged under grid constraints and cannot overlap. The top toolbar provides toggles for reference lines, alignment guides, interface layout display, restore default settings, save, and preview functions. The right-side attribute configuration area dynamically switches between displaying global page attributes or component attribute configuration items based on the currently selected object.

[0036] The business rules engine module is used to visually define the display logic, data filtering conditions, and linked behaviors of components. It consists of three parts: a rule definition layer, a rule parsing layer, and a rule execution layer. The rule definition layer provides a visual condition editor, allowing users to define component behavior by configuring "condition-action" rule statements. Conditions support multiple dimensions, including field comparisons (equal to, greater than, less than, contain, not empty), time ranges, user roles, and data status. Action types include showing components, hiding components, switching data views, sending notifications, and redirecting links. The rule parsing layer parses user-configured rule statements into executable rule models and performs syntax validation and conflict detection. The rule execution layer evaluates rule conditions in real time during component rendering and automatically executes the corresponding action when the trigger condition is met, without refreshing the page. The rule engine supports nested rules and priority settings, and rules can take effect at both the component and page levels.

[0037] The data source binding module provides independent data source configuration capabilities for each component, supporting both static data upload and dynamic interface data modes. Specifically, in static data mode, users can directly upload Excel files or paste structured data, and the system automatically parses the fields and binds them to the component's display dimensions; in dynamic interface data mode, users select the target data table and configure the X-axis fields, Y-axis fields, and statistical methods, and the system automatically generates data query statements and refreshes the data periodically.

[0038] The dynamic rendering engine module is used to render the configured workbench page in real time. It includes a style rendering layer, a data binding layer, and a rule injection layer. The style rendering layer is used to visually render components according to the style parameters (size, position, color, animation, transparency) set by the user in the attribute configuration area. The data binding layer is used to inject data from the data source binding module into the display dimension of the component according to the configured mapping relationship, triggering component content updates. The rule injection layer is used to attach the rules of the business rule engine module to the rendering process of the corresponding component during the rendering process, and dynamically control the display state, data range, and interactive behavior of the component according to the rule conditions. The three layers work together to achieve dynamic and efficient rendering of the workbench page. Configuration changes take effect immediately without rebuilding or restarting the service.

[0039] The workbench preview and publish module provides two main functions: save and preview. The save function persistently stores all component configuration information, layout parameters, business rules, and data source binding information of the current workbench to the server or local machine, supporting version management. The preview function renders the final display effect in a separate tab or modal window, automatically hiding all editing auxiliary elements to realistically simulate the runtime environment. After user confirmation, it can be published to the specified terminal with one click.

[0040] In another embodiment, the component library and management module is also responsible for component registration, version management, and the expansion of custom components, and supports saving the configured components as personal templates and reusing them on other workbench pages.

[0041] In another embodiment, the data source binding module is also used to provide a data filter function, which allows users to configure data filtering conditions in a visual manner. The data is filtered before being passed to the component and then drives the component content to update dynamically.

[0042] The architecture diagram of the zero-code workbench configuration system based on drag-and-drop interaction and a business rule engine described in the above embodiments is as follows. Figure 1 As shown, the database, browser, and engine configurations used are as follows:

[0043] MySQL database: a persistent repository for all structured configuration data, ensuring the atomicity and consistency of batch writes of component configurations, rule definitions, permission data, etc. through transaction mechanisms;

[0044] Redis database: a three-layer caching center—accelerating rule evaluation, authenticating sessions, and caching HTML fragments, while also providing real-time push notifications for configuration changes through publish-subscribe.

[0045] MinIO: Unifies the storage of all binary resources (background images, component icons, thumbnails) on the workbench and returns them directly to the browser, bypassing the application server;

[0046] Elasticsearch: Provides full-text search capabilities for news components and dashboards, while also collecting system-wide operation logs for maintenance personnel to troubleshoot and analyze;

[0047] Kafka: An asynchronous event bus that decouples front-end save requests from multiple back-end processing services, and timed refresh tasks are also sent out asynchronously through it;

[0048] Drag-and-drop editor: Use mouse drag and drop instead of code, user operations are serialized into JSON in real time and saved, and the canvas is automatically aligned and prevented from overlapping;

[0049] The rules engine transforms business logic such as "IF role = public account administrator THEN display report component" from code into visual configuration, with real-time evaluation and effectiveness.

[0050] Dynamic rendering engine: It receives three inputs: configuration, data, and rules. After merging these three layers, it outputs a webpage. Local changes are updated in milliseconds through the virtual DOM.

[0051] Component-based architecture: Each chart / card is encapsulated as an independent module with a unified interface, reusable to any workbench, and supports user-defined templates;

[0052] Data source binding: Visually configure data sources, static uploads or dynamic interfaces, timed refreshes, and fully automated data filtering and field mapping.

[0053] The embodiments described above are merely illustrative of specific implementations of the present invention, and while the descriptions are detailed, they should not be construed as limiting the scope of the present invention. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of the present invention, and these modifications and improvements all fall within the scope of protection of the present invention.

Claims

1. A zero-code workbench configuration system based on drag-and-drop interaction and a business rules engine, characterized in that, It includes a component library and management module, a drag-and-drop visual editing canvas module, a business rules engine module, a data source binding module, a dynamic rendering engine module, and a workbench preview and publishing module; among which: The component library and management module are used to organize the visualization components in a tree-like classification structure, dividing the workbench components into six categories: fixed components, news components, statistical components, data display components, and other components. Each category of components contains several specific component items. The drag-and-drop visual editing canvas module is used to classify, edit, configure, adjust, save, and preview components. It adopts a four-part layout design, including a component selection area on the left, a central canvas editing area, a top toolbar, and a property configuration area on the right. The business rule engine module is used to define the display logic, data filtering conditions and linkage behavior of components in a visual way. It consists of three parts: rule definition layer, rule parsing layer and rule execution layer. The rule engine supports nested rules and priority settings, and supports rules to take effect at the component level and page level. The data source binding module is used to provide independent data source configuration capabilities for each component, supporting both static data upload and dynamic interface data modes. The dynamic rendering engine module is used to render and output the configured workbench page in real time. It includes a style rendering layer, a data binding layer, and a rule injection layer. The three layers work together to achieve dynamic and efficient rendering of the workbench page. Configuration changes take effect immediately without the need to rebuild or restart the service. The workbench preview and publishing module provides two main functions: saving and previewing.

2. The zero-code workbench configuration system based on drag-and-drop interaction and a business rule engine as described in claim 1, characterized in that, The component library and management module is also responsible for component registration, version management, and the expansion of custom components. It supports saving configured components as personal templates and reusing them on other workbench pages.

3. The zero-code workbench configuration system based on drag-and-drop interaction and a business rule engine as described in claim 1, characterized in that, In the component library and management module, the statistical components include bar charts, line charts, pie charts, numerical charts, dual-axis charts, perspective charts, and ranking charts; the data display components include tables, regular cards, custom cards, and regular major events.

4. The zero-code workbench configuration system based on drag-and-drop interaction and a business rule engine as described in claim 1, characterized in that, In the drag-and-drop visual editing canvas module, the left component selection area is used to present component categories in a collapsible tree list. Users can drag target components from the component library into the central canvas editing area using the mouse. The central canvas editing area is based on a gridded canvas, where users can configure the number of rows, columns, grid height, and design gaps. Drag-in components are automatically arranged under grid constraints and cannot overlap. The top toolbar provides reference line toggles, alignment guide toggles, interface layout display control toggles, restore default settings, save, and preview functions. The right attribute configuration area dynamically switches between displaying global page attributes or component attribute configuration items based on the currently selected object.

5. The zero-code workbench configuration system based on drag-and-drop interaction and a business rule engine as described in claim 1, characterized in that, In the business rule engine module, the rule definition layer provides a visual condition editor, allowing users to define component behaviors by configuring corresponding rule statements. Conditions support multiple dimensions such as field comparison, time range, user role, and data status. Action types include showing components, hiding components, switching data views, sending notifications, and redirecting links. The rule parsing layer parses the user-configured rule statements into executable rule models and performs syntax validation and conflict detection. The rule execution layer evaluates rule conditions in real time during component rendering and automatically executes corresponding actions when trigger conditions are met, without refreshing the page.

6. The zero-code workbench configuration system based on drag-and-drop interaction and a business rule engine as described in claim 1, characterized in that, The data source binding module is also used to provide a data filter function, which allows users to configure data filtering conditions in a visual way. The data is filtered before being passed into the component and then drives the component content to update dynamically.

7. The zero-code workbench configuration system based on drag-and-drop interaction and a business rule engine as described in claim 1, characterized in that, In the data source binding module, under static data mode, users can directly upload Excel files or paste structured data, and the system automatically parses the fields and binds them to the display dimensions of the component; under dynamic interface data mode, users select the target data table and configure the X-axis field, Y-axis field, and statistical method, and the system automatically generates data query statements and refreshes the data periodically.

8. The zero-code workbench configuration system based on drag-and-drop interaction and a business rule engine as described in claim 1, characterized in that, In the dynamic rendering engine module, the style rendering layer is used to visually render the component according to the style parameters set by the user in the attribute configuration area; the data binding layer is used to inject the data in the data source binding module into the display dimension of the component according to the configured mapping relationship, triggering the component content update; the rule injection layer is used to attach the rules of the business rule engine module to the rendering process of the corresponding component during the rendering process, and dynamically control the display state, data range and interactive behavior of the component according to the rule conditions.

9. The zero-code workbench configuration system based on drag-and-drop interaction and a business rule engine as described in claim 1, characterized in that, In the workbench preview and publish module, the save function persistently stores all component configuration information, layout parameters, business rules, and data source binding information of the current workbench to the server or local machine, supporting version management; the preview function renders the final display effect in an independent tab or modal box, automatically hides all editing auxiliary elements, realistically simulates the runtime environment, and publishes to the specified terminal with one click after user confirmation.

Images