Low-code component interaction method and system based on WEB configuration and storage medium

Abstract

The invention discloses a low-code component interaction method and system based on WEB configuration and a storage medium, and belongs to the technical field of low codes, and the method comprises the steps: carrying out condition parameter setting on a source component in a WEB configuration picture editing process, and associating the source component with a component needing to be linked; the edited WEB configuration picture is stored and browsed; triggering the condition change of the source component in a WEB configuration picture browsing process, and sending a condition change event broadcast in a WEB page; controlling each component in the WEB page to make a corresponding response according to the monitored condition change event, monitoring the condition change event by each component in the WEB page and establishing a linkage trigger mechanism according to the association relationship among the components, the problem that components drawn by an existing code-free WEB configuration system and embedded pages of different technical architectures are difficult to interact and link is solved, and linkage and dynamic refreshing of display contents of various components are achieved.

Description

Technical Field

[0001] The present invention belongs to the field of low-code technology, and in particular relates to a low-code component interaction method, system and storage medium based on WEB configuration. Background Art

[0002] In the current front-end development field, no-code platforms are gaining more and more attention. They allow non-technical users to build applications through a graphical interface without writing code. This approach greatly reduces the development threshold and allows more creativity and ideas to be realized quickly. However, no-code platforms still face some challenges in implementing complex interactions and dynamic content display.

[0003] At present, in the practice of drawing display content in a codeless way, most of the time, multiple independent display content components are used to form a complete display page through layout. The display content of each component is relatively independent and lacks a linkage mechanism. In addition, it is also difficult to link embedded page components using different technical architectures such as iframe and micro front-end. It is necessary to find a suitable interactive linkage mechanism between components as needed to achieve the requirement of dynamically refreshing and changing the display content. Summary of the invention

[0004] The present invention provides a low-code component interaction method, system and storage medium based on WEB configuration. By monitoring the condition change events of each component in the WEB page and establishing a linkage trigger mechanism according to the association relationship between the components, communication and data transmission between components are realized, which solves the problem that components drawn by the existing codeless WEB configuration system and embedded pages of different technical architectures are difficult to interact and link, and realizes the linkage and dynamic refresh of the display content of various components.

[0005] To achieve the above object, the present invention is implemented by adopting the following technical solutions: In a first aspect, the present invention provides a low-code component interaction method based on WEB configuration, comprising: During the editing process of the WEB configuration screen, conditional parameters are set for the source component and the source component is associated with the component that needs to be linked; Save and browse the edited WEB configuration screen; Trigger the condition change of the source component during the browsing process of the WEB configuration screen, and send the condition change event broadcast in the WEB page; Control each component in the WEB page to respond accordingly based on the monitored condition change events.

[0006] Optionally, the step of setting conditional parameters for the source component and associating the source component with the component that needs to be linked during the editing of the WEB configuration screen includes: In the editing mode of the WEB configuration canvas tool, conditional parameter configuration and associated component configuration are performed on the selected source component to obtain a configuration screen in the initial state, wherein the WEB configuration canvas tool provides a corresponding configuration panel for each component in the configuration canvas, and the configuration panel includes a configuration item for inputting a conditional parameter name and a configuration item for selecting other components for associated binding through a unique identifier, and the unique identifier is used to locate the unique corresponding component in the configuration canvas; The condition parameter names corresponding to each source component and the unique identification list corresponding to each associated component are saved in the configuration properties of the component in the initial state of the configuration screen.

[0007] Optionally, the step of saving and browsing the edited WEB configuration screen includes: using a specified screen name to call an interface to persistently save all components and their configuration properties in the configuration canvas; The persistently saved configuration screen is obtained by querying the screen name and the configuration screen content is loaded in the browsing mode of the WEB configuration canvas tool.

[0008] Optionally, triggering a condition change of a source component during browsing of a WEB configuration screen and sending a condition change event broadcast in a WEB page includes: Triggering a change in a conditional parameter of the source component in the configuration screen content loaded in the browsing mode of the WEB configuration canvas tool; Triggering a change in a conditional parameter of a source component in the configuration screen; A condition parameter change event is broadcasted in a WEB page, wherein the condition parameter change event includes the actual value of the condition parameter set in the previous state of each source component and a unique identifier list corresponding to each associated component.

[0009] Optionally, the controlling each component in the WEB page to make corresponding responses according to the monitored condition change event includes: Control all components in the WEB page to listen to condition change parameter change events; When a component receives a conditional parameter change event, it controls each component to determine whether it needs to respond to the conditional parameter change event based on the unique identifier list corresponding to the associated components in the conditional parameter change event. If a response is required, the corresponding conditional parameter change linkage is made; if no response is required, the current state of the component is maintained.

[0010] Optionally, making corresponding condition parameter change linkage includes: For common components that need to respond, new conditional parameters are obtained from the conditional parameter change event, and the bound interface is called using the conditional parameters to re-request the data that the component needs to display, and refresh the display content of the component; and / or, for components that have micro-frontend pages inside, notify conditional parameter changes through the micro-frontend update interface; And / or, for a component whose internal part is an iframe embedded page, the conditional parameter change content is sent to the embedded page via the postMessage cross-domain message method.

[0011] In a second aspect, the present invention provides a low-code component interaction system based on WEB configuration, comprising: Configuration screen editing module: used to set conditional parameters for source components and associate the source components with components that need to be linked during the WEB configuration screen editing process; Configuration screen saving module: used to save and browse the edited WEB configuration screen; Source component condition change broadcast module: used to trigger the condition change of the source component during the WEB configuration screen browsing process, and send the condition change event broadcast in the WEB page; Associated component condition change linkage module: used to control each component in the WEB page to respond accordingly based on the monitored condition change events.

[0012] In a third aspect, the present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the low-code component interaction method based on WEB configuration as described in the first aspect.

[0013] Compared with the prior art, the beneficial effects achieved by the present invention are as follows: by broadcasting the associated binding relationship and condition change events between components in the WEB front-end screen configuration, the associated components are triggered to re-request data and the third-party embedded components are notified of messages, the displayed content of the page is refreshed, and the interaction and linkage between various components in the screen are realized, which solves the problem that when a WEB page is drawn by dragging components based on the WEB configuration method, the components in the page can only display data statically and the components cannot interact and link with each other; by setting and associating conditional parameters for the source components during the editing process of the WEB configuration screen, the developer can quickly configure the interaction logic between the components without writing a large amount of code, thereby greatly improving the development efficiency; through the low-code solution, non-professional developers can also easily configure and publish the WEB configuration screen through the graphical interface, which reduces the technical threshold and expands the scope of developers; whether it is an ordinary component, a micro-front-end page or an iframe embedded page, the present invention can provide a corresponding interaction and update mechanism, support component interaction under a variety of technical architectures, and improve the compatibility and scalability of the system. BRIEF DESCRIPTION OF THE DRAWINGS

[0014] Figure 1 Shown is a flow chart of a low-code component interaction method based on WEB configuration in an embodiment of the present invention;

[0015] Figure 2 The figure shows an example format of a condition parameter change event in one embodiment of the present invention. DETAILED DESCRIPTION

[0016] The present invention will be further described below in conjunction with the accompanying drawings. The following embodiments are only used to more clearly illustrate the technical solution of the present invention, and cannot be used to limit the protection scope of the present invention.

[0017] Example 1

[0018] This embodiment provides a low-code component interaction method based on WEB configuration, including: During the editing process of the WEB configuration screen, conditional parameters are set for the source component and the source component is associated with the component that needs to be linked; Save and browse the edited WEB configuration screen; Trigger the condition change of the source component during the browsing process of the WEB configuration screen, and send the condition change event broadcast in the WEB page; Control each component in the WEB page to respond accordingly based on the monitored condition change events.

[0019] Example 2

[0020] Based on Example 1, this example also makes the following design.

[0021] like Figure 1 As shown, the low-code component interaction method in Example 1 is divided into the following steps, and the specific steps are as follows:

[0022] Step 1: Configure the source component during the editing process of the WEB configuration canvas, set the parameter name used for external notification when the component status condition changes, and bind the source component to other components that need to be linked to establish an association relationship.

[0023] Component configuration: On the Web configuration canvas, select the source component (such as a switch button, sensor reading, etc.) to enter the configuration mode;

[0024] Parameter setting: Set the parameter name that needs to be notified to other components when the component state changes. For example, if it is a temperature sensor, the parameter may be temperature;

[0025] Binding association: By dragging or programming, you can establish an association between the source component and the component that needs to be linked. This usually involves setting event listeners and callback functions.

[0026] Step 2: Save the edited WEB configuration screen persistently and open the screen in browsing mode.

[0027] Persistent storage: After completing the configuration, save the configuration screen to the server or database to ensure persistent storage of data.

[0028] Browsing mode: Access the configuration screen through a web browser and open it in browsing mode. At this time, the user can see the configured interface and components.

[0029] Step 3: When the user browses the WEB page, the operation triggers the change of the condition of the source component, sends a message to the front-end page message bus, and the message bus triggers the message broadcast.

[0030] Condition change: The user performs an operation on the web page, such as clicking a button or changing a setting, which triggers the state change of the source component, including but not limited to the following component operations: selecting an option in a drop-down box, checking an option in a single / multiple checkbox, clicking a tree component node, clicking a table row, clicking an object on a map, etc.;

[0031] Message sending: After the condition of the trigger source component changes, the condition change event will be broadcast, such as Figure 2 As shown, the condition change event contains the actual values ​​of the condition parameters set by the source component and a list of unique identifiers of the associated components. The message bus of the front-end page (such as the event bus of Vue or state management libraries such as Redux) receives the condition change event and broadcasts the message to all components.

[0032] Step 4: All components in the WEB page receive the condition change time message and determine whether the component needs to be linked from the association list in the event. If not, the message is ignored.

[0033] Receive messages: All components listen to the message bus and receive messages about changes in conditional parameters.

[0034] Judgment linkage: The component determines whether it needs to respond to the message based on the parameters in the message, the unique identifier list of associated components and its own configuration. If not, the conditional parameter change is ignored; if necessary, processing continues.

[0035] Step 5: For condition change messages that require a response, process them separately according to the properties of the current component.

[0036] Display component: For components that need to display data, such as charts or data display boxes, get new parameter values ​​from messages and update the display content;

[0037] Micro front-end component: For the internally embedded micro front-end page, the parameter change is notified through the API micro front-end update interface. After receiving the parameter change notification, the micro front-end page updates its own status;

[0038] Iframe component: For pages embedded in iframe, use the window.postMessage method to send the changed message to the iframe. The page in the iframe listens to the message and performs corresponding processing.

[0039] Step 6: If it is an internally integrated component, use the new condition parameters in the condition change event to initiate a backend data interface request, and use the data returned by the interface to update the displayed content.

[0040] Condition change event: For components that need to interact with the backend, use the new condition parameters in the event to initiate a request.

[0041] Data update: The backend interface returns data after processing the request. The frontend component updates the displayed content after receiving the data to ensure the consistency between the user interface and the backend data.

[0042] Example 3

[0043] This embodiment provides a low-code component interaction system based on WEB configuration, including: Configuration screen editing module: used to set conditional parameters for source components and associate the source components with components that need to be linked during the WEB configuration screen editing process; Configuration screen saving module: used to save and browse the edited WEB configuration screen; Source component condition change broadcast module: used to trigger the condition change of the source component during the WEB configuration screen browsing process, and send the condition change event broadcast in the WEB page; Associated component condition change linkage module: used to control each component in the WEB page to respond accordingly based on the monitored condition change events.

[0044] Example 4

[0045] This embodiment provides a computer-readable storage medium on which a computer program is stored. When the program is executed by a processor, it implements the low-code component interaction method based on WEB configuration as described in Example 2.

[0046] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present application may adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program codes.

[0047] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0048] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0049] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0050] The embodiments of the present invention are described above in conjunction with the accompanying drawings, but the present invention is not limited to the above-mentioned specific implementation methods. The above-mentioned specific implementation methods are merely illustrative and not restrictive. Under the enlightenment of the present invention, ordinary technicians in this field can also make many forms without departing from the scope of protection of the purpose of the present invention and the claims, which all fall within the protection of the present invention.

Claims

1. A low-code component interaction method based on WEB configuration, characterized in that: include: During the editing process of the WEB configuration screen, conditional parameters are set for the source component and the source component is associated with the component that needs to be linked; Save and browse the edited WEB configuration screen; Trigger the condition change of the source component during the browsing process of the WEB configuration screen, and send the condition change event broadcast in the WEB page; Control each component in the WEB page to respond accordingly based on the monitored condition change events.

2. According to the low-code component interaction method based on WEB configuration according to claim 1, it is characterized in that: The step of setting conditional parameters for the source component and associating the source component with the component to be linked during the WEB configuration screen editing process includes: In the editing mode of the WEB configuration canvas tool, conditional parameter configuration and associated component configuration are performed on the selected source component to obtain a configuration screen in the initial state, wherein the WEB configuration canvas tool provides a corresponding configuration panel for each component in the configuration canvas, and the configuration panel includes a configuration item for inputting a conditional parameter name and a configuration item for selecting other components for associated binding through a unique identifier, and the unique identifier is used to locate the unique corresponding component in the configuration canvas; The condition parameter names corresponding to each source component and the unique identification list corresponding to each associated component are saved in the configuration properties of the component in the initial state of the configuration screen.

3. According to the low-code component interaction method based on WEB configuration according to claim 2, it is characterized in that: The step of saving and browsing the edited WEB configuration screen includes: Use the specified screen name to call the interface to persist all components and their configuration properties in the configuration canvas; The persistently saved configuration screen is obtained by querying the screen name and the configuration screen content is loaded in the browsing mode of the WEB configuration canvas tool.

4. According to the low-code component interaction method based on WEB configuration according to claim 3, it is characterized in that: The triggering of the condition change of the source component during the browsing process of the WEB configuration screen and sending the condition change event broadcast in the WEB page includes: Triggering a change in a conditional parameter of the source component in the configuration screen content loaded in the browsing mode of the WEB configuration canvas tool; A condition parameter change event is broadcasted in a WEB page, wherein the condition parameter change event includes the actual value of the condition parameter set in the previous state of each source component and a unique identifier list corresponding to each associated component.

5. According to the low-code component interaction method based on WEB configuration according to claim 4, it is characterized in that: The components in the control WEB page respond accordingly to the monitored condition change events, including: Control all components in the WEB page to listen to condition change parameter change events; When a component receives a conditional parameter change event, it controls each component to determine whether it needs to respond to the conditional parameter change event based on the unique identifier list corresponding to the associated components in the conditional parameter change event. If a response is required, the corresponding conditional parameter change linkage is made; if no response is required, the current state of the component is maintained.

6. The low-code component interaction method based on WEB configuration according to claim 5 is characterized in that: The making corresponding condition parameter change linkage includes: For common components that need to respond, new conditional parameters are obtained from the conditional parameter change event, and the bound interface is called using the conditional parameters to re-request the data that the component needs to display, and refresh the display content of the component; and / or, for components that have micro-frontend pages inside, notify conditional parameter changes through the micro-frontend update interface; And / or, for a component whose internal part is an iframe embedded page, the conditional parameter change content is sent to the embedded page via the postMessage cross-domain message method.

7. A low-code component interaction system based on WEB configuration, characterized in that: include: Configuration screen editing module: used to set conditional parameters for source components and associate the source components with components that need to be linked during the WEB configuration screen editing process; Configuration screen saving module: used to save and browse the edited WEB configuration screen; Source component condition change broadcast module: used to trigger the condition change of the source component during the WEB configuration screen browsing process, and send the condition change event broadcast in the WEB page; Associated component condition change linkage module: used to control each component in the WEB page to respond accordingly based on the monitored condition change events.

8. A computer-readable storage medium, characterized in that: A computer program is stored thereon, which, when executed by a processor, implements a low-code component interaction method based on WEB configuration as described in any one of claims 1-6.

Images