Variable management method based on zero code platform

Abstract

The invention relates to a variable management method based on a zero-code platform, which belongs to the technical field of zero-code platforms, and comprises the following steps of: 1, when an operation of dragging a component to a canvas occurs, analyzing JSON Schema configuration of the component, generating a dynamic variable template containing a predefined field and an extensible slot, generating an internal state variable and a user-defined variable; 2, uniformly storing internal state variables and user-defined variables in a variable agent layer, dividing the variables into local variables, server-side variables, component variables and event variables, and uniformly hosting the internal state variables and the user-defined variables of the component by the variable agent layer; 3, the variables are filed in a variable structure tree mode, the variable structure tree is displayed in a visual editor, and the function of modifying the field type and the hierarchical relation is provided in the variable structure tree; and 4, performing variable event-driven data circulation.

Description

Technical Field

[0001] This invention belongs to the field of no-code platform technology, and specifically relates to a variable management method based on a no-code platform. Background Technology

[0002] Low-code or no-code platforms are widely used in the field of rapid application development due to their ease of use and low learning curve. They mainly use drag-and-drop operations and simple operation logic settings to quickly complete the interface and logic settings of application development.

[0003] For managing various variables during development, a common no-code platform solution is a configuration system based on the Kuanghong system disclosed in Chinese patent CN117908868A. This system includes a configuration editing module and a configuration application module. The configuration editing module is used in the Kuanghong configuration editor. The editing steps are as follows: A1. Data source configuration: Configure the parameters of the hardware to be controlled by the Kuanghong application, configure the data source component properties, and create a data frame for operating the data source; A2. Variable creation, setting, and data source configuration: Create variables that need to be configured to control the equipment. When creating, select the variable type as needed, set various attributes of the variables, configure the corresponding data source information for the variables, and associate the variables with the values ​​of the data source devices; A3. Drag and drop configuration controls to draw the configuration interface: Draw the configuration interface by dragging and dropping configuration interface controls, and set the behavior of the interface controls by setting behavior parameters; A4. Associate configuration controls with variables: Set associated variables for the controls on the configuration interface; A5. Generate configuration file describing the configuration: Generate a JSON file describing various information of the components in the Kuanghong configuration editor.

[0004] The above solution includes a step of "variable creation, setup, and data source configuration" to facilitate variable definition and management during development. However, like most existing no-code development platform solutions, it uses static generation or limited variable binding. Such methods cannot automatically associate with the internal state of components (such as selected rows or dropdown values), making it difficult to implement user-defined variables. They suffer from low intuitiveness, high operational complexity, and low convenience in variable management, resulting in insufficient usability. Therefore, a variable management method based on a no-code platform is needed that offers high intuitiveness, convenience, and ease of use. Summary of the Invention

[0005] To address the aforementioned problems in the existing technology, this invention provides a variable management method based on a zero-code platform, which is highly user-friendly.

[0006] The objective of this invention can be achieved through the following technical solutions: A variable management method based on a no-code platform includes the following steps: Step 1: When a component is dragged onto the canvas, parse the component's JSON Schema configuration to generate a dynamic variable template containing predefined fields and extensible slots, and then generate internal state variables and user-defined variables. Step 2: Store internal state variables and user-defined variables in a unified variable proxy layer. Divide the variables into local variables, server-side variables, component variables, and event variables. The variable proxy layer uniformly manages the component's internal state variables and user-defined variables. Step 3: Archive the variables as a variable structure tree, display the variable structure tree in a visual editor, and provide the function of modifying field types and hierarchical relationships in the variable structure tree; Step 4: Variables are used for event-driven data flow.

[0007] As a preferred embodiment of the present invention, step one further includes the following sub-steps: Step 1a: Extract the required fields from the component's JSON Schema as predefined variables that cannot be deleted, and also extract the component fields with isReplaceableKey set to true as user-defined variables, making it convenient for users to rename the variables later.

[0008] As a preferred embodiment of the present invention, step two further includes the following sub-steps: Step 2a: The system displays the structure of component variables in the variable proxy layer and specifies that only the field names of component variables can be added, deleted, or modified, or values ​​can be assigned based on the fields; Step 2b: The system displays the variable structure of user-side and server-side variables in the variable proxy layer, and enables read / write proxy and visualization of variable values.

[0009] As a preferred embodiment of the present invention, step three further includes the following sub-steps: Step 3a: For each variable, write the underlying functionality of the variable, expose the methods of the variable, and reserve functions to provide CRUD operations; Step 3b: Develop a visual interface for the variables and connect it to the underlying functions of the variables to enable the addition, deletion, and modification of variables; As a preferred embodiment of the present invention, step threea further includes the following sub-steps: Step 3a1: Perform local variable adaptation and server-side variable adaptation. Local variable adaptation includes LocalStorage, Seeeion, and Cookies adaptation, while server-side adaptation includes database adaptation. Step 3a2: Quickly locate the specified position using the automatically generated index and perform CRUD operations; Step 3a3: Copy and generate a copy of the variable based on the variable index, providing the ability to quickly create copies of variable configurations; Step 3 a4: Restore the current value of the variable to its default value based on the variable index, and provide a method for restoring the default value; Step 3 a5: Read the variable structure of the component's JSON Schema to generate component variables and complete the initialization of component variables; Step 3a6: Enable monitoring of variable modifications and trigger dirty flags.

[0010] As a preferred embodiment of the present invention, step four further includes the following sub-steps: Step 4a: Through key-to-key binding, after the event is triggered, data is transferred through the corresponding relationships, underlying variable logic, and variable proxy methods; Step 4b: When writing component code in the event, expose the variable values ​​thrown by the event. The values ​​of the event variables are limited to the current event of the current component and can only be shared through data flow. Step 4c: Call the API through the event interaction module, and realize parameter docking and API call by selecting variables.

[0011] As a preferred technical solution of the present invention The beneficial effects of this invention are as follows: (1) By parsing the JSON Schema configuration of a component, a dynamic variable template containing predefined fields and extensible slots is generated, which can automatically generate structured variables. For example, after a component is dragged into the canvas, the platform automatically recognizes the data in the component and generates the internal variable table and the visual local variables of the component, thereby generating the component variable structure without manually defining the data structure. At the same time, this method automatically exposes the internal variables of the component, such as selectedRow or selectedValue, as user-bindable variables, which improves usability. (2) By adapting local variables and server variables, client variables, server variables and component variables can be managed in a unified manner, and the unified management of multi-scope variables can be completed, which further improves usability; (3) By setting the steps of the component to throw out specific event variables, the operation of writing variable definition, variable structure adaptation, API parameter mapping and other operations in traditional development can be replaced, which improves the convenience of operation and further improves the ease of use. Attached Figure Description

[0012] To facilitate understanding by those skilled in the art, the present invention will be further described below with reference to the accompanying drawings.

[0013] Figure 1 This is a schematic diagram of the steps of the present invention. Detailed Implementation

[0014] To further illustrate the technical means and effects of the present invention in achieving its intended purpose, the following detailed description of the specific implementation methods, structures, features, and effects of the present invention, in conjunction with the accompanying drawings and preferred embodiments, is provided.

[0015] Please see Figure 1 A variable management method based on a no-code platform includes the following steps: Step 1: When a component is dragged onto the canvas, parse the component's JSONSchema configuration to generate a dynamic variable template containing predefined fields and extensible slots, and then generate internal state variables and user-defined variables. Step 2: Store internal state variables and user-defined variables in a unified variable proxy layer. Divide the variables into local variables, server-side variables, component variables, and event variables. The variable proxy layer uniformly manages the component's internal state variables and user-defined variables. Step 3: Archive the variables as a variable structure tree, display the variable structure tree in a visual editor, and provide the function of modifying field types and hierarchical relationships in the variable structure tree; Step 4: Variables are used for event-driven data flow.

[0016] In actual use, when developing a component, the component developer configures the internal variable structure in a JSONSchema using a specific JSON format. Then, the component receives and outputs the corresponding variables through the editor's underlying API. Specifically, step one also includes the following sub-steps: Step 1a: Extract the required field from the component's JSONSchema as a predefined variable that cannot be deleted. At the same time, extract the component field where isReplaceableKey is true as a user-defined variable, so that users can rename the variable name later. At this point, the distinction between and generation of a component's internal state variables and user-defined variables is complete.

[0017] Step two also includes the following sub-steps: Step 2a: The system displays the structure of component variables in the variable proxy layer and specifies that only the field names of component variables can be added, deleted, or modified, or values ​​can be assigned based on the fields; Step 2b: The system displays the variable structure of user-side and server-side variables in the variable proxy layer, and enables read / write proxy and visualization of variable values.

[0018] Specifically, in the development interface, when editing component variables, except for adding, deleting, or modifying variable field names, or assigning values ​​based on fields, all other operations are displayed as unavailable. Step three also includes the following sub-steps: Step 3a: For each variable, write the underlying functionality of the variable, expose the methods of the variable, and reserve functions to provide CRUD operations; Step 3b: Develop a visual interface for the variables and connect it to the underlying functions of the variables to enable the addition, deletion, and modification of variables; Specifically, when a component is dragged onto the canvas, the JSONSchema configuration of that component is parsed synchronously. The processing of the parsing results also includes the following sub-steps: Step 3 a1: When the system writes the underlying variable functions in Step 3, it first performs local variable adaptation and then performs server-side variable adaptation. Local variable adaptation includes LocalStorage, Seeeion and Cookies adaptation, while server-side adaptation includes database adaptation. Step 3a2: Quickly locate the specified position using the automatically generated index and perform CRUD operations; In this embodiment, when performing CRUD operations, CRUD operations are performed as follows: CRUD operation is to add a new variable definition to the system's internal storage; CRUD operation is to remove a variable definition from the system's internal storage; CRUD operation is to modify the configuration of an existing variable definition; and CRUD operation is to query the definition information of a single variable. Step 3a3: Copy and generate a copy of the variable based on the variable index. This provides the ability to quickly create copies of variable configurations. When a user or system logic needs to create a new variable that is exactly the same as or highly similar to an existing variable configuration, the complete definition of the existing variable is quickly found based on the index in Step 3a2. A new variable is created and a suffix is ​​added to avoid conflicts. The definition of the source variable is copied to the new variable object. This new variable is then added to the storage by calling the create operation. Step 3 a4: Restore the current value of the variable to its default value based on the variable index. Provide a method to restore the default value. The variable definition contains a default value attribute. When performing the operation, find the variable definition based on the index, get the default value, and force the current runtime value of the variable to be updated to this default value. Step 3 a5: Read the variable structure of the component's JSONSchema to generate component variables and complete the initialization of component variables; Taking the order card component as an example, when a user drags the order card component into a page in the designer, the underlying engine reads the JSON schema of the component. Based on the properties definition in the schema, the engine calls the create operation to automatically generate the corresponding variable definition. At this time, the user does not need to manually create these variables used inside the component, but the platform does it automatically. Step 3a6: Enable monitoring of variable modifications and trigger dirty flags.

[0019] Step four also includes the following sub-steps: Step 4a: Through key-to-key binding, after the event is triggered, data is transferred through the corresponding relationships, underlying variable logic, and variable proxy methods; Step 4b: When writing component code in the event, expose the variable values ​​thrown by the event. The values ​​of the event variables are limited to the current event of the current component and can only be shared through data flow, thus completing the component's throwing of specific event variables; Step 4c: Call the API through the event interaction module, and realize parameter docking and API call by selecting variables.

[0020] The above description is merely a preferred embodiment of the present invention and is not intended to limit the present invention in any way. Although the present invention has been disclosed above with reference to preferred embodiments, it is not intended to limit the present invention. Any person skilled in the art can make some modifications or alterations to the above-disclosed technical content to create equivalent embodiments without departing from the scope of the present invention. Any simple modifications, equivalent changes and alterations made to the above embodiments based on the technical essence of the present invention without departing from the scope of the present invention shall still fall within the scope of the present invention.

Claims

1. A variable management method based on a no-code platform, characterized in that: Includes the following steps: Step 1: When a component is dragged onto the canvas, parse the component's JSON Schema configuration to generate a dynamic variable template containing predefined fields and extensible slots, and then generate internal state variables and user-defined variables. Step 2: Store internal state variables and user-defined variables in a unified variable proxy layer. Divide the variables into local variables, server-side variables, component variables, and event variables. The variable proxy layer uniformly manages the component's internal state variables and user-defined variables. Step 3: Archive the variables as a variable structure tree, display the variable structure tree in a visual editor, and provide the function of modifying field types and hierarchical relationships in the variable structure tree; Step 4: Variables are used for event-driven data flow.

2. The variable management method based on a no-code platform according to claim 1, characterized in that: Step one also includes the following sub-steps: Step 1a: Extract the required fields from the component's JSON Schema as predefined variables that cannot be deleted, and also extract the component fields with isReplaceableKey set to true as user-defined variables, making it convenient for users to rename the variables later.

3. The variable management method based on a no-code platform according to claim 1, characterized in that: Step two also includes the following sub-steps: Step 2a: The system displays the structure of component variables in the variable proxy layer and specifies that only the field names of component variables can be added, deleted, or modified, or values ​​can be assigned based on the fields; Step 2b: The system displays the variable structure of user-side and server-side variables in the variable proxy layer, and enables read / write proxy and visualization of variable values.

4. The variable management method based on a no-code platform according to claim 1, characterized in that: Step three also includes the following sub-steps: Step 3a: For each variable, write the underlying functionality of the variable, expose the methods of the variable, and reserve functions to provide CRUD operations; Step 3b: Create a visual interface for the variables and connect it to the underlying functions of the variables so that the functions of adding, deleting and modifying variables can be performed.

5. The variable management method based on a no-code platform according to claim 4, characterized in that: Step 3a further includes the following sub-steps: Step 3a1: Perform local variable adaptation and server-side variable adaptation. Local variable adaptation includes LocalStorage, Seeeion, and Cookies adaptation, while server-side adaptation includes database adaptation. Step 3a2: Quickly locate the specified position using the automatically generated index and perform CRUD operations; Step 3a3: Copy and generate a copy of the variable based on the variable index, providing the ability to quickly create copies of variable configurations; Step 3 a4: Restore the current value of the variable to its default value based on the variable index, and provide a method for restoring the default value; Step 3 a5: Read the variable structure of the component's JSON Schema to generate component variables and complete the initialization of component variables; Step 3a6: Enable monitoring of variable modifications and trigger dirty flags.

6. The variable management method based on a no-code platform according to claim 1, characterized in that: Step four also includes the following sub-steps: Step 4a: Through key-to-key binding, after the event is triggered, data is transferred through the corresponding relationships, underlying variable logic, and variable proxy methods; Step 4b: When writing component code in the event, expose the variable values ​​thrown by the event. The values ​​of the event variables are limited to the current event of the current component and can only be shared through data flow. Step 4c: Call the API through the event interaction module, and realize parameter docking and API call by selecting variables.

Images