CN118519622B - Low-code flow chart dynamic configuration and self-defined interaction system - Google Patents
Low-code flow chart dynamic configuration and self-defined interaction system Download PDFInfo
- Publication number
- CN118519622B CN118519622B CN202410980343.2A CN202410980343A CN118519622B CN 118519622 B CN118519622 B CN 118519622B CN 202410980343 A CN202410980343 A CN 202410980343A CN 118519622 B CN118519622 B CN 118519622B
- Authority
- CN
- China
- Prior art keywords
- flow chart
- page
- low
- data
- module
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Security & Cryptography (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
Abstract
The invention discloses a system for dynamically configuring and customizing interaction of a low-coding flow chart, which comprises a low-code page rendering module, a data structure definition module, a flow chart rendering module and a low-code page designer module; the low-code page rendering module is used for rendering the low-code page; the data structure definition module is used for defining a data structure required by the flow chart; the flow chart rendering module is used for initializing the chart configuration of the flow chart and rendering the visualization module of the data of the flow chart; the low code page designer module, which is a designer, the user edits the page by dragging. The invention unifies the data structure and the realization mode, and is beneficial to reducing the development cost for realizing various flow chart-like schemes; meanwhile, the design of the low-code page is combined in an event mode, so that different interaction logics can be realized for different nodes; in addition, the configuration is provided in a low code mode, and the configuration is used after being unpacked, so that code development work of repeated parts is reduced.
Description
Technical Field
The invention relates to the field of visual modeling, in particular to a system for dynamic configuration and custom interaction of a low-coding flow chart.
Background
Modern enterprises are increasingly focusing on digital transformation, and many information systems begin to adopt business flow diagrams for visual modeling. The flow chart can clearly show the service circulation steps and decision nodes, and effectively helps to manage and optimize the service processing flow.
Although there are some excellent flow chart rendering works in the market at present, the application of the flow charts is in different vertical fields, so that the event, node expansion mode, structural design and functional pertinence defined by different software developers on the flow charts are different, the integration work of different related flow charts is different, and may be introduced into different flow chart implementation modes and codes, and most of the implementation modes may be logic repetition, but the implementation modes are only developed and implemented separately because the implementation modes are difficult to unify from different industries or technical fields, and the development modes are often waste cost and have low efficiency. The reason exposes the following problems to be solved:
(1) The defining modes of the flow charts are different, and the flows of different systems in the same enterprise are difficult to integrate and reuse;
(2) The process nodes have single interaction function, and are inconvenient to customize according to the specific business industry or technical field;
(3) The data format and structure of the flow chart have no standard, and the expansibility and compatibility are poor;
(4) For flow modification, redevelopment of deployment is required to achieve, which is inefficient.
For example, "202111351513.3, a method for implementing a customized visual topological graph based on Antv, the technical scheme of Jiangsu province future network innovation institute" is an implementation method only aiming at the topological graph, when a user introduces the method to implement an implementation page aiming at the topological graph, if the user has new requirements at the moment, a scene of a workflow needs to be implemented, the method may not be implemented, because the method is only applicable to the layout mode, connection line and the like of the topological graph and the manner of the workflow.
Disclosure of Invention
The invention aims to overcome the defects and shortcomings of the prior art and provide a low-coding flow chart dynamic configuration and custom interaction system.
The aim of the invention is achieved by the following technical scheme:
the system for dynamically configuring and customizing interaction of the low-code flow chart comprises a low-code page rendering module, a data structure definition module, a flow chart rendering module and a low-code page designer module; wherein,
The low-code page rendering module is used for rendering the low-code page;
the data structure definition module is used for defining a data structure required by the flow chart;
The flow chart rendering module is used for initializing the chart configuration of the flow chart and rendering the visualization module of the data of the flow chart;
the low code page designer module, which is a designer, the user edits the page by dragging.
The low-code page rendering module has the following working processes:
step 1, when entering a page, starting to load a page renderer;
step 2, after loading the page renderer, reading JSONs corresponding to the pages from the database through the interface;
step 3, transmitting the page JSON to a page renderer, and rendering a page effect through the renderer;
Step 4, if the page has binding events in the design process, the rendered page monitors the corresponding events, and event processing is carried out according to the event processing function bound by the design; if no trigger event exists, the page rendering is completed.
The data structure definition module is used for defining configuration information required by the rendering of the flow chart, the whole configuration information is a JSON object, and the data structure definition module comprises: two main configurations of the initialization configuration data object and the flow chart entity data are provided, wherein the initialization configuration data object comprises a layout configuration, a state list and a node style configuration.
The data structure definition module operates in the following manner when the display of an RPA flow chart is realized and when the RPA flow chart can be started by clicking the starting node on the flow chart:
1) Adding components of the flow chart rendering module into a page, wherein the data structure of the page is an iframe of which the page contains a flow chart renderer;
2) Configuration initialization configuration data:
a. the nodes that need to initialize several data types to correspond to the task node types of RPA, assuming that there are 3 nodes: a start node, an end node and a task node;
b. respectively configuring green, gray and blue for a starting node, an ending node and a task node;
c. defining a node state list, namely defining 3 states to be done, being done and being done respectively, and configuring corresponding colors for the 3 states, namely blue, red and green respectively;
3) Configuration flow diagram data source interface: the data returned by the interface needs to be object data, 2 arrays exist in the object, namely a node array and a connection array, and in the node data, a node state which can correspond to the state name configured above is needed;
4) Configuration start event: adding a monitoring node adding event in the low-code page designer module, judging that if the node is a 'start node', initiating a request to start an RPA flow, refreshing data of a 'flow chart data source interface' configured in 3 every 5 seconds after initiation to refresh the flow chart rendering module, and judging that if the end node is in an 'ended' state, stopping refreshing;
5) The node array in the data returned by the flow chart data source interface has 3 data, namely a start node, an end node and a task node, the connection array has 2 data, and if the returned node data has the following sequential states from the start to the end: when completed, in progress, or to be done, the graphics on the flow chart rendering module will be displayed in blue, red, and green; if the sequential state is: when completed, that indicates the color will be green, green.
After the user obtains the flow chart data and the initialization configuration information, the flow chart rendering module embeds the flow chart data and the initialization configuration information into a page of the flow chart rendering module in an iframe mode through the low-code page rendering module, and the flow chart data and the initialization configuration information interact with the flow chart rendering module in the iframe through a window message sending mechanism.
When initializing a page, the flow chart rendering module receives flow chart data and initialization parameters, the flow chart rendering module renders the flow chart data and the initialization parameters into a flow chart, when clicking a node in the flow chart, a node clicking event is triggered, at the moment, the data of an event response is sent to the low-code page rendering module through a window message sending method, the low-code page rendering module serves as a father page to monitor the event, and when triggered, the low-code page rendering module correspondingly processes related services.
The monitoring mechanism of the flow chart rendering module is in deep binding butt joint with the event of the low code page designer module, and the monitoring mechanism is as follows: in the interaction process of event definition and driving, a flow chart rendering module defines that an event is open to the outside through internal encapsulation, wherein the event comprises node clicking and saving; when the events are triggered, the events are communicated in a window message sending mode, data are sent to an external low-code page rendering module for interaction, and after the external low-code page rendering module monitors the events, the events are configured to execute corresponding actions based on the low-code page designer module for the event processing configured in advance for the page, wherein the actions comprise requesting an interface and opening a popup window.
The interaction process between the low-code page rendering module and the flow chart rendering module in the iframe is as follows:
(1) Entering a page, and acquiring flow chart initialization information from a server;
(2) After the initialization information is obtained, loading the iframe is started, and initialization data is transmitted to the inside of the iframe through a window message sending method;
(3) After entering the inside of the iframe, starting a flow chart renderer module to start rendering;
(4) After the flow chart is rendered, opening the event to the internal binding of the iframe, and opening the event to a low-code page rendering module of the parent page through a window message sending method;
(5) The low-code page rendering module of the parent page monitors an open event in the iframe and waits for a user operation triggering event;
(6) After the user operates, triggering an event, and immediately transmitting the event to a flow chart rendering module in the iframe;
(7) After responding to the event operation, the flow chart rendering module sends the corresponding event and data to the iframe;
(8) The iframe layer transmits the event and the data to the low-code page rendering module, and the service processing function corresponding to the page rendering allocation event responds to the user.
The working process of the low-code page designer module is as follows:
S1, creating a new page in a page information table, and initializing the new page into a low-code page designer module;
S2, dragging an iframe component from the component area in the low-code page designer module, and putting the iframe component into the effect area;
s3, setting the attribute of the iframe as a page where the flow chart rendering module is located;
S4, adding monitoring of the events opened by the flow chart in an event panel of the iframe, and selecting a processing mode;
and S5, after the design is completed, page storage and receiving can be called, and the current page is stored in the page information table.
Compared with the prior art, the invention has the following advantages and beneficial effects:
1. The invention unifies the data structure and the realization mode, and is beneficial to reducing the development cost for realizing various flow chart-like schemes.
2. The invention combines the design of the low-code page in an event mode, and can realize different interaction logics aiming at different nodes.
3. The invention provides configuration in a low code mode, is used after unpacking, and reduces code development work of repeated parts.
4. The invention stores the flow chart structure, configuration, event and page configuration in a data mode, and can realize different service customization functions without packing and deploying again.
Drawings
FIG. 1 is a flow chart of a design-state business of a system for dynamic configuration and custom interaction of a low-coding flow chart according to the present invention.
FIG. 2 is a flow chart of an executable business of the system for dynamic configuration and custom interaction of the low-coding flow chart of the invention.
FIG. 3 is a workflow diagram of a low code page rendering module in a run state.
FIG. 4 is a workflow diagram of a data structure definition module.
FIG. 5 is a business logic diagram of the low code page rendering module and the flowchart rendering module described in the iframe.
FIG. 6 is a page design effect diagram of the low code page designer module.
Fig. 7 is a diagram of a page information table structure.
Detailed Description
The present invention will be described in further detail with reference to examples and drawings, but embodiments of the present invention are not limited thereto.
As shown in fig. 1 to 6, the system for dynamically configuring and customizing interaction of the low-coding flow chart is a solution for realizing the dynamic configuration and the customization interaction of the flow chart based on the data driving and low-coding technology. The method adopts the standard JSON data format to define common elements of the flow, such as nodes, wires and attributes thereof, so that the flow diagram definition is independent of a specific system, and has good expansibility and reusability. Meanwhile, the scheme supports the rapid construction of the binding of various flow chart interaction behaviors through the low-code page designer, such as the opening of a custom attribute form by binding node events. In addition, the method adopts a modularized design, divides flow definition from rendering, and realizes loose coupling interaction among modules through an event-driven mechanism. The proposal integrally adopts the thought of data driving, and unifies and stores the information of the related elements of the flow, such as definition, forms and the like, in a database, thereby realizing the function of dynamic configuration
In this solution, four modules are mutually matched, which are respectively:
Module one: the low-code page rendering module is used for rendering the low-code page;
And a second module: the data structure definition module is used for defining a data structure required by the flow chart;
And a third module: the flow chart rendering module is used for initializing the chart configuration of the flow chart and rendering the visualization module of the data of the flow chart;
And a fourth module: a low code page designer module, which is a designer that a user can edit a page by dragging;
through the four modules, the corresponding functions of the design state and the execution state are respectively completed to realize the core functions in the invention.
In the design state, the low-code page designer module configures page layout, reference components, data configuration (configuration is defined according to the data structure standard), interface configuration, event operation configuration and the like to complete the design of a flow chart page, and issues the flow chart page into a low-code page so that the low-code page designer module can be used for rendering in a code page rendering module, and the service flow of the low-code page designer module is as shown in figure 1.
In the execution state, during the process of loading the published flow chart page, the low-code page rendering module respectively reads configuration, flow chart data, events and the like, monitors related events, realizes the functions of rendering, operation and the like of the flow chart, and the business flow is as shown in fig. 2.
In the invention, four modules are used to realize the whole function in a matched way, and in the four modules, a unified data modeling module and an event driving mechanism are defined, wherein the decoupling of flow definition and operation is realized through the definition of a unified data structure, and the flow dynamic capability is supported:
1. Flow common elements, such as structural elements of nodes, wires and the like, are defined by using a JSON data format in a data structure definition module (module two).
2. The flow definition is abstracted into two parts of configuration information and entity data in a data structure definition module (a second module) and is respectively used for storing and calling.
(1) The configuration information defines relevant configuration information of styles, state lists and layout methods.
(2) The data module defines a data model of the nodes and the wires.
3. By means of the low code page designer module (module four), a page executable based on the low code page renderer (module one) is designed and stored, the flow chart renderer module (module three) is embedded in the manner of an iframe component, and event processing is configured (see below for details "page renderer and flow chart renderer interaction procedure in iframe").
4. When the page is accessed, a low-code page renderer (module I) reads out the page designed and stored by the low-code page designer module to render the page, acquires interaction behavior and event configuration, and monitors the configured events in the page
5. The flow chart rendering module performs dynamic rendering based on the read configuration and the entity data.
6. All flow related definitions are unified as data for management and invocation herein.
7. The automatic validation of the flow modification is supported, the restarting is not needed, and the hot updating capability is realized.
The interaction modes mentioned above are interaction communication mechanisms which are decoupled and loosely coupled among modules through event definition and driving, and the interaction modes of the modules are as follows:
1. Standard events need to be implemented in the flow chart rendering module and opened to the outside, and event lists are shown in the event table encapsulated by the flow chart rendering module.
2. The low code renderer module processes the logic by retrieving events or interactions that the low code designer binds for different events.
3. The two modules are in loose coupling interaction through free binding event driving.
The key logic for each module is described as follows:
1. Module one, low code page rendering module: the module is realized by using the existing mature low-code page renderer, and describes information such as page elements, layout, event processing and the like in a JSONSchema standard JSON (JavaScript Object Notation, JS object numbered musical notation, a lightweight data exchange format) data mode, and has two use states in total: in the design state, page elements can be laid out in a dragging mode by using a page designer (editor), attribute values and event processing functions are bound through attribute panels, all operations in the editor can be finally converted into a JSONSchema-standard JSON, and the unified data structures can be stored, and the editing and storing process is described in a fourth module; in the running state, the renderer can render JSON conversion generated in the design state into a standard Web HTML page, and the rendering is realized as 3, and the realization steps are as follows:
Step 1: when we enter the page, start loading the page renderer;
Step 2: after loading the page renderer, reading JSONs corresponding to the pages from the database through the interface;
Step 3: transmitting the page JSON to a page renderer, and rendering a page effect through the renderer;
Step 4: if the page has binding events in the design process, the rendered page monitors the corresponding events, and event processing is carried out according to the event processing function bound by the design; if no trigger event exists, the page rendering is completed.
2. And a second module, a data structure definition module: the module mainly defines configuration information required by the rendering of the flow chart, and the whole configuration information is a JSON object and comprises: the initialization configuration data object and the flow chart entity data are mainly configured, and the initialization configuration data object comprises layout configuration, a state list and node style configuration.
By defining a set of data structures, the style (icon, color and style) of the node can be flexibly expanded, and the self-defined data attribute of the user can be arbitrarily expanded in the node data object.
Such as: when a user needs to implement a topological graph and a workflow flow chart in the system, if a traditional development mode is used, two different corresponding professional graph tools may be respectively introduced, and corresponding functions are respectively developed on different pages to implement, and because the two different professional graph tools are developed by different people, the data structures, names and the like are likely to be different, the developers can respectively store the two professional graph tools, and thus if the requirement adjustment is later carried out, the maintenance cost may be higher. However, if the present invention is used, since the configuration such as layout and style is defined in the data structure definition module, the user can freely select what layout form and style the flow chart is currently intended to realize in the design stage, and the interface data structure realized by the user can be rendered according to the configuration as long as the interface data structure meets the data structure requirement of the present invention, so the present invention can be uniformly managed.
In addition, if the user wants to realize that the attribute of each node is self-defined and the attribute editing page can be self-adjusted, then the traditional development mode is used, even if the user designs the attribute into a dynamic data table mode, the attribute editing page generally needs to be developed in advance, and the self-adjustment space for the user is not large. The low-code renderer is used for combining, that is, the advantage of low-code design can be fully exerted, when a user needs to design an attribute page, the user can open a design state to design the attribute window, bind the attribute window with a node in an attribute page mode, and then configure a trigger event of the node to open the page for rendering, so that the purpose of giving the option to the user is achieved.
The data structures are shown in tables 1, 2 and 3.
TABLE 1
TABLE 2
TABLE 3 Table 3
As can be seen from table 1, table 2 and table 3, the data core mainly lies in the initialization configuration and the flow data, the initialization configuration is mainly characterized in that the style and configuration of the node can be predefined, the flow data adopts the same data structure as the industry, and the custom data attribute, style attribute and the like are added on that basis, so that the development habit of people is ensured, and the functions of some active configurations are expanded.
Examples: for example, we want to implement a display of RPA flowchart, and clicking on the start node on the flowchart can start the RPA flowchart, as in fig. 4, then we should operate as follows when designing:
1) After entering the design module: we add the flow renderer component to the page where the data structure of the page is the iframe of the page containing a flow renderer
2) Configuration initialization configuration data:
a. The nodes needing to initialize several data types are corresponding to the task node types of the RPA, and 3 kinds of nodes respectively including a start node, an end node and a task node are assumed to be arranged;
b. The above 3 nodes are respectively provided with a green, a gray and a blue;
c. defining a node state list, namely defining 3 states to be done, being done and being done respectively, and configuring the 3 states with corresponding colors of blue, red and green respectively;
3) Configuration flow diagram data source interface: the data returned by the interface needs to be object data, 2 arrays exist in the object, namely a node array and a connection array, and in the node data, a node state which can correspond to the state name configured above is needed;
4) Configuration start event: adding a monitoring node adding event in the page designer, judging that if the node is a 'start node', initiating a request to start an RPA flow, refreshing data of a 'flow chart data source interface' configured in 3 every 5 seconds after initiation to refresh the flow chart renderer, and judging that if the end node is in an 'ended' state, stopping refreshing;
5) The node array in the data returned by the flow chart data source interface has 3 data, namely a start node, an end node and a task node, the connection array has 2 data, and if the data of the returned nodes is in the sequence from the start to the end, the states are as follows: when completed, in progress, or about to do, the graphics on the flow chart renderer will be displayed in blue, red, and green; if the sequential state is: when completed, that indicates the color will be green, green.
3. And thirdly, a flow chart rendering module: after the user obtains the flow chart data and the initialization configuration information, the page renderer embeds the flow chart data and the initialization configuration information into the page of the flow chart rendering module in an iframe (HTML floating frame) mode, and the flow chart data and the initialization configuration information interact with the flow chart rendering module in the iframe through a window message sending mechanism. For example: when initializing a page, the data of the flow chart and the initialization parameters are transmitted to a flow chart renderer, the flow chart is rendered into the flow chart, but when clicking a node in the flow chart, the node clicking event is triggered, at the moment, the data of the event response is transmitted to a parent page of the page renderer through a window message transmitting method, the parent page monitors the event, and when triggered, related services are correspondingly processed.
In the module, the events such as clicking, selecting and the like of common interaction events in the flow chart are opened through the flow chart renderer, and unlike the traditional implementation, on the listening processing mechanism of the events, the events are deeply bound and butted with the events of the low-code page designer, so that the events can be directly accessed in the low-code page and processed, a developer can completely use a low-code mode to access when interacting, task codes do not need to be written, and only the data structure is ensured to be defined according to the standard defined by the developer.
1) Listening mechanism
In the interaction process of event definition and driving, the flow chart rendering module defines that events such as node clicking, saving and the like are opened to the outside through internal encapsulation, when the events are triggered, the events are communicated in a window message sending mode, data are sent to an external page renderer module for interaction, and after the external page rendering module monitors the events, the external page rendering module performs corresponding actions (such as requesting interfaces, opening popup windows and the like) based on event processing configuration which is preconfigured by the designer module for the page.
2) The interaction process of the page renderer and the flow chart renderer in the iframe is shown in fig. 5, which shows how to render, monitor, trigger and process the interaction process of the corresponding events between the low-code page rendering module and the flow chart rendering module in the iframe.
Logic description:
step 1: entering a page, and acquiring flow chart initialization information from a server;
Step 2: after the initialization information is obtained, loading the iframe is started, and initialization data is transmitted to the inside of the iframe through a window message sending method;
step 3: after entering the inside of the iframe, starting a flow chart renderer to start rendering;
step 4: after the flow chart is rendered, opening the event to the internal binding of the iframe, and opening the event to a page renderer of the father page through a window message sending method;
step 5: the page renderer monitors an event opened in the iframe and waits for a user operation triggering event;
step 6: after the user operates, triggering an event, and immediately transmitting the event to a flow chart renderer in the iframe;
Step 7: after responding to the event operation, the flow chart renderer sends the corresponding event and data to the iframe;
Step 8: the iframe layer transmits the event and the data to the page renderer, and the service processing function corresponding to the page rendering distribution event responds to the user.
3) The events encapsulated by the flow chart rendering module are as in table 4.
TABLE 4 Table 4
4. The low code page designer module, we can design page layout, form, interface docking and event docking effects on top as in fig. 6, and to ensure that low code pages can be modified, read, rendered in real time, they need to be persisted to the server, storing the table structure (key fields) as in fig. 7.
1) Page design key logic description:
step 1: creating a new page in the page information table, and initializing the new page into a page designer (the effect is blank);
Step 2: in the designer, dragging an iframe component from the component area and dropping the component into the effect area;
step 3: setting the attribute of the iframe as a page where the flow chart renderer is located;
step 4: adding interception of the events opened by the flow chart to an event panel of the iframe, and selecting a processing mode, wherein the processing mode is as follows:
jump linking;
refreshing the page;
Rollback pages;
Opening/closing popup window (if popup window, the popup window content can be designed for 2 times, and the editing mode is the same as the page designer mode and can be designed in a nested way);
Popping up a message reminder;
Sending an HTTP request;
Downloading a file;
Setting the visibility and usability of some other component;
transmitting parameters and variable assignment to a certain component;
Submitting, emptying, enclosing and checking the form;
Flexibly expanding JavaScript processing;
Step 5: after the design is completed, page save and receive can be invoked to save the current page to dev_page (page information table).
The key technical points of the invention are as follows:
1. a standard flow element system is defined based on a JSON data model. This enables configurability and multiplexing of the flow.
2. An event driven mechanism is used to implement flow interactions across modules. The flow chart rendering module and the low code page are in loose coupling interaction through the event, so that the two modules can be independently and iteratively upgraded.
3. And performing flow interactive binding based on the low-code page designer. The designer supports binding different processing logics for the flow chart events, and realizes the rapid configuration of the flow interaction behavior.
4. And storing the related elements of the flow in a data driving mode. And the flow chart definition, page definition and other information are stored in the database, so that the capability of dynamic configuration is realized.
The above examples are preferred embodiments of the present invention, but the embodiments of the present invention are not limited to the above examples, and any other changes, modifications, substitutions, combinations, and simplifications that do not depart from the spirit and principle of the present invention should be made in the equivalent manner, and the embodiments are included in the protection scope of the present invention.
Claims (7)
1. The system for dynamically configuring and customizing interaction of the low-code flow chart is characterized by comprising a low-code page rendering module, a data structure definition module, a flow chart rendering module and a low-code page designer module; wherein,
The low-code page rendering module is used for rendering the low-code page;
the data structure definition module is used for defining a data structure required by the flow chart;
The data structure definition module operates in the following manner when the display of an RPA flow chart is realized and when the RPA flow chart can be started by clicking the starting node on the flow chart:
1) Adding components of the flow chart rendering module into a page, wherein the data structure of the page is an iframe of which the page contains a flow chart renderer;
2) Configuration initialization configuration data:
a. The nodes needing to initialize a plurality of data types are corresponding to the task node types of the RPA, and 3 nodes are provided: a start node, an end node and a task node;
b. respectively configuring green, gray and blue for a starting node, an ending node and a task node;
c. defining a node state list, namely defining 3 states to be done, being done and being done respectively, and configuring corresponding colors for the 3 states, namely blue, red and green respectively;
3) Configuration flow diagram data source interface: the data returned by the interface needs to be object data, 2 arrays exist in the object, namely a node array and a connection array, and in the node data, a node state which can correspond to the state name configured above is needed;
4) Configuration start event: adding a monitoring node adding event in the low-code page designer module, judging that if the node is a 'start node', initiating a request to start an RPA flow, refreshing data of a 'flow chart data source interface' configured in 3 every 5 seconds after initiation to refresh the flow chart rendering module, and judging that if the end node is in an 'ended' state, stopping refreshing;
5) The node array in the data returned by the flow chart data source interface has 3 data, namely a start node, an end node and a task node, the connection array has 2 data, and if the returned node data has the following sequential states from the start to the end: when completed, in progress, or to be done, the graphics on the flow chart rendering module will be displayed in blue, red, and green; if the sequential state is: when completed, that shows the color will be green, green;
The flow chart rendering module is used for initializing the chart configuration of the flow chart and rendering the visualization module of the data of the flow chart;
When initializing a page, the flow chart rendering module receives flow chart data and initialization parameters, the flow chart rendering module renders the flow chart data and the initialization parameters into a flow chart, when clicking a node in the flow chart, a node clicking event is triggered, at the moment, the data of an event response is sent to the low-code page rendering module through a window message sending method, the low-code page rendering module serves as a father page to monitor the event, and when triggered, the low-code page rendering module correspondingly processes related services;
the low code page designer module, which is a designer, the user edits the page by dragging.
2. The system for dynamically configuring and customizing interactions in a low-code-rate flowchart as recited in claim 1, wherein the low-code page rendering module comprises the following working procedures:
step 1, when entering a page, starting to load a page renderer;
step 2, after loading the page renderer, reading JSONs corresponding to the pages from the database through the interface;
step 3, transmitting the page JSON to a page renderer, and rendering a page effect through the renderer;
Step 4, if the page has binding events in the design process, the rendered page monitors the corresponding events, and event processing is carried out according to the event processing function bound by the design; if no trigger event exists, the page rendering is completed.
3. The system for dynamically configuring and customizing interactions in a low-coding flow chart according to claim 1, wherein the data structure defining module is configured to define configuration information required for rendering the flow chart, and the entire configuration information is a JSON object, and includes: two main configurations of the initialization configuration data object and the flow chart entity data are provided, wherein the initialization configuration data object comprises a layout configuration, a state list and a node style configuration.
4. The system for dynamically configuring and customizing low-coding flow chart interaction according to claim 1, wherein after the user obtains the flow chart data and the initialization configuration information, the flow chart rendering module embeds the flow chart data and the initialization configuration information into a page of the flow chart rendering module in an iframe mode through the low-coding page rendering module, and the flow chart data and the initialization configuration information interact with the flow chart rendering module in the iframe through a window message sending mechanism.
5. The system for dynamically configuring and customizing interactions of a low-code-rate flowchart according to claim 1, wherein a listening mechanism of said flowchart rendering module is in deep binding interfacing with an event of a low-code page designer module, and the listening mechanism is as follows: in the interaction process of event definition and driving, a flow chart rendering module defines that an event is open to the outside through internal encapsulation, wherein the event comprises node clicking and saving; when the events are triggered, the events are communicated in a window message sending mode, data are sent to an external low-code page rendering module for interaction, and after the external low-code page rendering module monitors the events, the events are configured to execute corresponding actions based on the low-code page designer module for the event processing configured in advance for the page, wherein the actions comprise requesting an interface and opening a popup window.
6. The system for dynamically configuring and customizing low-coding flow chart interactions according to claim 1, wherein the interaction process between the low-coding page rendering module and the flow chart rendering module in the iframe is as follows:
(1) Entering a page, and acquiring flow chart initialization information from a server;
(2) After the initialization information is obtained, loading the iframe is started, and initialization data is transmitted to the inside of the iframe through a window message sending method;
(3) After entering the inside of the iframe, starting a flow chart renderer module to start rendering;
(4) After the flow chart is rendered, opening the event to the internal binding of the iframe, and opening the event to a low-code page rendering module of the parent page through a window message sending method;
(5) The low-code page rendering module of the parent page monitors an open event in the iframe and waits for a user operation triggering event;
(6) After the user operates, triggering an event, and immediately transmitting the event to a flow chart rendering module in the iframe;
(7) After responding to the event operation, the flow chart rendering module sends the corresponding event and data to the iframe;
(8) The iframe layer transmits the event and the data to the low-code page rendering module, and the service processing function corresponding to the page rendering allocation event responds to the user.
7. The system for dynamic configuration and custom interaction of low-coding flow chart according to claim 1, wherein the working procedure of the low-code page designer module is as follows:
S1, creating a new page in a page information table, and initializing the new page into a low-code page designer module;
S2, dragging an iframe component from the component area in the low-code page designer module, and putting the iframe component into the effect area;
s3, setting the attribute of the iframe as a page where the flow chart rendering module is located;
S4, adding monitoring of the events opened by the flow chart in an event panel of the iframe, and selecting a processing mode;
S5, after the design is completed, page storage and receiving are called, and the current page is stored in the page information table.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410980343.2A CN118519622B (en) | 2024-07-22 | 2024-07-22 | Low-code flow chart dynamic configuration and self-defined interaction system |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410980343.2A CN118519622B (en) | 2024-07-22 | 2024-07-22 | Low-code flow chart dynamic configuration and self-defined interaction system |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN118519622A CN118519622A (en) | 2024-08-20 |
| CN118519622B true CN118519622B (en) | 2024-10-11 |
Family
ID=92284296
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202410980343.2A Active CN118519622B (en) | 2024-07-22 | 2024-07-22 | Low-code flow chart dynamic configuration and self-defined interaction system |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN118519622B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN118860397B (en) * | 2024-09-23 | 2025-01-28 | 南京万米信息技术有限公司 | A system and method for generating static pages |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113094037A (en) * | 2021-04-20 | 2021-07-09 | 上海携宁计算机科技股份有限公司 | Interaction method, development platform, equipment and storage medium for forms and workflows |
| CN116775013A (en) * | 2023-05-23 | 2023-09-19 | 北京邮电大学 | Development system of visual low-code platform |
Family Cites Families (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10031730B2 (en) * | 2015-04-22 | 2018-07-24 | Salesforce.Com, Inc. | Systems and methods of implementing extensible browser executable components |
| JP6433468B2 (en) * | 2016-09-28 | 2018-12-05 | 本田技研工業株式会社 | Program creation support method |
| US20200110792A1 (en) * | 2018-10-04 | 2020-04-09 | Binyamin Tsabba | Customized customer relationship management platform method and devices |
| CN113849165A (en) * | 2021-09-28 | 2021-12-28 | 航天科工网络信息发展有限公司 | Customizable low-code front-end development framework and method based on visual dragging |
| CN114860205B (en) * | 2022-05-09 | 2024-08-23 | 维沃移动通信有限公司 | Application extension system, method and device of low-code development platform |
| CN115658041B (en) * | 2022-12-27 | 2023-08-22 | 南京国睿信维软件有限公司 | Low-code enhanced service implementation method based on online service flow arrangement |
-
2024
- 2024-07-22 CN CN202410980343.2A patent/CN118519622B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113094037A (en) * | 2021-04-20 | 2021-07-09 | 上海携宁计算机科技股份有限公司 | Interaction method, development platform, equipment and storage medium for forms and workflows |
| CN116775013A (en) * | 2023-05-23 | 2023-09-19 | 北京邮电大学 | Development system of visual low-code platform |
Also Published As
| Publication number | Publication date |
|---|---|
| CN118519622A (en) | 2024-08-20 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9442699B2 (en) | Model elements in software tools as automatons in a software customization system and method | |
| CA2604108C (en) | System and method of representing data entities of standard device applications as built-in components | |
| JP5021193B2 (en) | Declarative representation of an extensible workflow model | |
| CA2777443C (en) | Automated enterprise software development | |
| US7275096B2 (en) | Computerized system and method for web enabling and/or web management of embedded applications | |
| US20100131922A1 (en) | System and method for applying development patterns for component based applications | |
| CN109783083B (en) | WEB application development method and system | |
| CN111506304A (en) | Assembly line construction method and system based on parameter configuration | |
| EP2284698B1 (en) | Compositional modeling of integrated systems using event-based legacy applications | |
| JP2001306308A (en) | Method for defining class of data center application | |
| CN102495735A (en) | Web end UI (user interface) component application frame system | |
| CN109445323B (en) | WEB-based distributed intelligent measurement and control software platform design method | |
| CN101777004A (en) | Method and system for realizing BPEL sub-process multiplexing based on template in service-oriented environment | |
| EP1703379A1 (en) | System and method for applying development patterns for component based applications | |
| CN118519622B (en) | Low-code flow chart dynamic configuration and self-defined interaction system | |
| CN101645009A (en) | Web service integrated development system and method | |
| KR100426311B1 (en) | Method and apparatus for enterprise jababeans components assembly | |
| US12141559B2 (en) | Method for constructing, running and implementing cross-platform application, terminal, server and system | |
| CA2635172C (en) | Device for communicating in multiple modes using multi-mode applications | |
| CA2635173C (en) | System and method for creating multi-mode applications | |
| CN1980267A (en) | Method for realizing flexible-mounting-dismounting guide-type interface | |
| EP1703386A1 (en) | System and method for designing component based applications | |
| CN116011943A (en) | Robot automation flow service system, method and medium based on low codes | |
| CN118885157A (en) | Self-developed system, method and electronic device for low-code platform | |
| JP2006309697A (en) | Computer system, program for computer system, and program generating application program based on spreadsheet program among the programs |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |