A form construction method and form constructor

Abstract

The invention relates to the technical field of business process processing, and discloses a form construction method and a form constructor, and the method comprises the steps: taking a visual editing canvas generated according to a target scene and a corresponding overall JOSN as a reference, sequentially determining an operation event of a user on the visual editing canvas, determining a target component corresponding to the operation event, and setting the target component according to the operation event; and determining the target components and / or a component logic relationship between different target components, updating the visual editing canvas and the overall JSON in real time, and finally analyzing the overall JSON, determining a layout mode and a component type of the target components, and rendering the visual editing canvas to obtain a target form. According to the method, the JSON data can serve as a core carrier, the rendering logic and the service logic are decoupled, a developer can adjust the form function or interface without modifying template codes, the problems of repeated compiling of controls, verification and other codes are avoided, the development workload is reduced, it is ensured that the form interface styles are consistent, and the user experience is improved.

Description

(19) State Intellectual Property Office (12) Invention Patent Application (10) Application Publication Number (43) Application Publication Date (21) Application Number 202511919111.7 (22) Application Date 2025.12.18 (71) Applicant CITIC International Telecommunications (Information Technology) Limited Address 20 / F, Lincoln Tower, Taikoo Place, 979 King's Road, Quarry Bay, Hong Kong Applicant China Enterprise Network Communication Technology Co., Ltd. (72) Inventor Li Chaoqun (74) Patent Agency Beijing Sanju Sunshine Intellectual Property Agency Co., Ltd. 11250 Patent Attorney Qin Jie (51) Int.Cl. G06F 3 / 0482 (2013.01) G06F 3 / 0486 (2013.01) (54) Invention Title: A Form Construction Method and Form Constructor (57) Abstract: This invention relates to the field of business process processing technology, and discloses a form construction method and form constructor. The method includes: based on a visual editing canvas generated according to a target scenario and the corresponding overall JSON, sequentially determining user operation events on the visual editing canvas, determining the target component corresponding to the operation event, determining the component logic relationship between the target component and / or different target components, updating the visual editing canvas and the overall JSON in real time, finally parsing the overall JSON, determining the layout method and component type of the target component, rendering the visual editing canvas, and obtaining the target form. This invention can decouple rendering logic from business logic using JSON data as the core carrier. Developers can adjust form functions or interfaces without modifying template code, avoiding the problem of repeatedly writing control, validation, and other code, reducing development workload, ensuring consistent form interface style, and improving user experience. Claims (3 pages), Description (16 pages), Drawings (4 pages), CN 122044415 A, 2026.05.15, CN 1 22 04 44 15 A. 1. A form construction method, characterized in that the method includes: acquiring a target scene, and generating a visual editing canvas and corresponding overall JSON data based on the target scene; acquiring user operation events on the visual editing canvas, determining the target component corresponding to the operation event, and updating the visual editing canvas and the overall JSON data based on the target component; acquiring the component logical relationships between the target component and / or different target components set by the user based on the visual editing canvas, and updating the visual editing canvas and the overall JSON data based on the component logical relationships; parsing the overall JSON data, determining the layout method and component type of the target component, and rendering the visual editing canvas based on the layout method and component type to obtain a target form corresponding to the target scene.2. The method according to claim 1, characterized in that, the step of obtaining user operation events on the visual editing canvas, determining the target component corresponding to the operation event, and updating the visual editing canvas and the overall JSON data according to the target component includes: listening for drag events from the component panel to the visual editing canvas, and / or click events in the component panel; if the drag event or the click event is detected, determining the target component corresponding to the drag event or the click event, and obtaining the sub-JSON data of the target component, wherein the sub-JSON data of the target component includes the field model and attribute information of the target component; if the operation event is the drag event, obtaining the hover position of the drag event, inserting the sub-JSON data of the target component into the corresponding position of the overall JSON data according to the hover position, and updating the visual editing canvas; if the operation event is the click event, updating the attribute panel of the visual editing canvas according to the sub-JSON data of the target component, and updating the overall JSON data and the visual editing canvas according to the attribute panel. 3. The method according to claim 2, characterized in that, obtaining the hover position of the drag event and inserting the sub-JSON data of the target component into the corresponding position of the overall JSON data according to the hover position, includes: determining whether a preset component exists at the hover position; if not, inserting the sub-JSON data of the target component into the end of the overall JSON data; if the preset component exists and the component type is a normal component, inserting the sub-JSON data of the target component into the beginning of the sub-JSON data of the preset component in the overall JSON data; if the preset component exists and the preset component is a container component, inserting the sub-JSON data of the target component into the interior of the sub-JSON data of the preset component in the overall JSON data. 4. The method according to claim 1, characterized in that, the step of obtaining user operation events on the visual editing canvas, determining the target component corresponding to the operation event, and updating the visual editing canvas and the overall JSON data according to the target component, further includes: listening to drag events in the visual editing canvas; if the drag event is detected, determining the target component corresponding to the drag event and the preset component at the corresponding hover position; if the preset component is a normal component, swapping the positions of the target component and the preset component in the visual editing canvas, and swapping the positions of the sub-JSON data of the target component and the sub-JSON data of the preset component in the overall JSON data;If the preset component is a container component, the target component is placed inside the preset component, and the sub-JSON data of the target component is inserted into the sub-JSON data of the preset component in the overall JSON data. 5. The method according to claim 1, characterized in that, obtaining the component logical relationship between the target component and / or different target components set by the user based on the visual editing canvas, and updating the visual editing canvas and the overall JSON data according to the component logical relationship, includes: obtaining the component constraints of the target component set by the user based on the visual editing canvas, the component constraints including at least one of length constraint, size constraint, rule constraint, and required constraint; obtaining the component behavior of the target component set by the user based on the visual editing canvas, the component behavior including at least one of template placeholder, API call request, jump link, and data summation; obtaining the verification method and corresponding verification rules of the target component set by the user based on the visual editing canvas, the verification method including at least one of synchronous verification, asynchronous verification, and third-party verification, the verification rules including: null value verification rules and regular expression verification rules; obtaining the component linkage relationship between different target components set by the user based on the visual editing canvas, the component linkage relationship including: control relationship, data update relationship, dynamic verification relationship, and data linkage relationship between different target components; The method according to claim 5 is characterized in that, obtaining the template placeholder of the target component set by the user based on the visual editing canvas includes: obtaining the template placeholder set by the user, the template placeholder containing preset dynamic fields and custom text; parsing the template placeholder, and determining the field path of the target component based on the parsed preset dynamic fields, to obtain the template placeholder. 7. The method according to claim 5 is characterized in that, obtaining the control relationship between different target components set by the user based on the visual editing canvas includes: determining the control value type of the first target component as the controller among the different target components; determining the control conditions between the first target component and the second target component as the controlled party based on the control value type; if the number of components of the first target component is at least two, then determining the logical relationship between the control conditions corresponding to multiple first target components. 8. The method according to claim 1, characterized in that, in the step of parsing the overall JSON data to determine...The process involves determining the layout and component type of the target component, and rendering the visual editing canvas based on the layout and component type to obtain the target form corresponding to the target scene. This includes: parsing the overall JSON data to determine a first layout for different target components, where the first layout includes: the number of grid cells, label alignment, and label width; (Claims 2 / 3, page 3, CN 122044415 A) If the target component is a table-type component or a container-type component, then determining a second layout for the sub-components within the target component; determining the component type of the target component and determining the corresponding input component based on the component type; and rendering the visual editing canvas based on the first layout, the second layout, and the input component to obtain the target form corresponding to the target scene. 9. The method according to claim 1, characterized in that, after updating the overall JSON data, the method further includes: adding the modification operation to a pre-built history stack; listening for undo or restore operations; when the undo operation is detected, undoing the modification operation of the overall JSON data and deleting the modification operation from the history stack; when the restore operation is detected, restoring the modification operation of the overall JSON data and adding the modification operation back to the pre-built history stack. 10. A form builder, characterized in that it includes: a canvas layer, a data layer, a rendering layer, and a logic layer, wherein the canvas layer, the data layer, the rendering layer, and the logic layer work together to execute the form construction method according to any one of claims 1 to 9. Claims 3 / 3 Page 4 CN 122044415 A Form Construction Method and Form Builder Technical Field

[0001] The present invention relates to the field of business process processing technology, specifically to a form construction method and a form builder. Background Technology

[0002] With the rapid development of enterprise business systems, these systems involve the development of a large number of different forms, such as leave application forms and business trip forms. Most business systems require a high-efficiency, fast, and simple IT technology to support the rapid development of system forms. At the same time, the architecture of the business systems themselves is becoming increasingly complex, involving more and more links and related personnel. Therefore, it is particularly important to complete the form development of business systems through high-efficiency, fast, and simple technical means.

[0003] Under the above technical background, the problems currently faced by enterprise-level large-scale business system form development include: ① Repeated development of the same functional logic code: In a business system form, it is necessary to repeatedly develop form controls, such as input boxes, drop-down boxes, etc. At the same time, when the user submits, it is necessary to validate the data entered by the user, such as whether the information is empty.Verification of mobile phone numbers, etc. These identical functional logic codes exist in every form. ② Inconsistent form UI style: Due to the complexity of the business system architecture itself and the increasing number of participants, the UI style of forms developed by different people may differ, reducing the user experience. Therefore, existing form builders cannot flexibly adapt to the needs and requirements of enterprises for business system forms. Summary of the Invention

[0004] This invention provides a form construction method and form builder to solve the problem of inflexible form construction.

[0005] In a first aspect, the present invention provides a form construction method, the method comprising: acquiring a target scene, and generating a visual editing canvas and corresponding overall JSON data based on the target scene; acquiring user operation events on the visual editing canvas, determining the target component corresponding to the operation event, and updating the visual editing canvas and overall JSON data based on the target component; acquiring the target component and / or the component logical relationship between different target components set by the user based on the visual editing canvas, and updating the visual editing canvas and overall JSON data based on the component logical relationship; parsing the overall JSON data, determining the layout method and component type of the target component, and rendering the visual editing canvas based on the layout method and component type to obtain a target form corresponding to the target scene.

[0006] The form construction method provided by the present invention, based on a visual editing canvas generated according to the target scenario and the corresponding overall JSON, sequentially determines the user's operation events on the visual editing canvas, determines the target components corresponding to the operation events, determines the component logic relationships between the target components and / or different target components, and updates the visual editing canvas and the overall JSON in real time. Finally, the overall JSON is parsed to determine the layout method and component type of the target components. The target form is obtained by rendering the visual editing canvas. The present invention uses JSON data to uniformly describe the form structure during the form construction process. It can decouple the rendering logic (interface) from the business logic (rules) with JSON data as the core carrier. Developers can adjust the form functions or interface without modifying the template code, thereby avoiding the problem of repeatedly writing control, validation and other code in traditional form development, reducing the development workload, ensuring the consistency of the form interface style under different developers and different business scenarios, and improving the user experience.

[0007] In one optional embodiment, user operation events on the visual editing canvas are acquired, the target component corresponding to the operation event is determined, and the visual editing canvas and overall JSON data are updated according to the target component, including: listening for drag events from the component panel to the visual editing canvas, and / or click events in the component panel; if a drag event orIf a click event occurs, the target component corresponding to the drag or click event is determined, and the sub-JSON data of the target component is obtained. The sub-JSON data of the target component includes the field model and attribute information of the target component. If the operation event is a drag event, the hover position of the drag event is obtained, and the sub-JSON data of the target component is inserted into the corresponding position of the overall JSON data according to the hover position, and the visual editing canvas is updated. If the operation event is a click event, the attribute panel of the visual editing canvas is updated according to the sub-JSON data of the target component, and the overall JSON data and the visual editing canvas are updated according to the attribute panel.

[0008] This invention adjusts the components in the canvas through drag or click events, which can realize visual operation to adjust the components, simplify the component addition operation, reduce technical costs, and update the canvas and JSON data at the same time during the adjustment process, avoiding the situation of inconsistency between the interface and the data, and improving the accuracy and efficiency of form editing.

[0009] In an optional implementation, obtaining the hover position of the drag event and inserting the sub-JSON data of the target component into the corresponding position of the overall JSON data according to the hover position includes: determining whether a preset component exists at the hover position; if not, inserting the sub-JSON data of the target component into the end of the overall JSON data; if a preset component exists and the component type is a normal component, inserting the sub-JSON data of the target component into the beginning of the sub-JSON data of the preset component in the overall JSON data; if a preset component exists and the preset component is a container component, inserting the sub-JSON data of the target component into the interior of the sub-JSON data of the preset component in the overall JSON data.

[0010] This invention, through the listening of drag events, can complete component positioning simply by dragging the hover position, clarify the determination logic of the component insertion position, and simultaneously determine the update logic of JSON data, avoiding the problems of chaotic component insertion and inaccurate nesting in traditional form builders, and improving the accuracy of form structure construction.

[0011] In an optional embodiment, acquiring user operation events on the visual editing canvas, determining the target component corresponding to the operation event, and updating the visual editing canvas and overall JSON data according to the target component, further includes: listening for drag events in the visual editing canvas; if a drag event is detected, determining the target component corresponding to the drag event and the preset component at the corresponding hover position; if the preset component is a normal component, swapping the positions of the target component and the preset component in the visual editing canvas, and swapping the positions of the sub-JSON data of the target component and the sub-JSON data of the preset component in the overall JSON data; if the preset component is a container component, placing the target component inside the preset component, and inserting the sub-JSON data of the target component into the sub-JSON data of the preset component in the overall JSON data.

[0012] This invention supports direct drag-and-drop adjustment of components within the canvas, improving the efficiency and flexibility of layout adjustments, solving the problem of high rework costs in existing layout adjustments, and at the same time, visual drag-and-drop adjustment eliminates the need to understand JSON data structures, reducing the user's operational threshold and improving the tool's usability.

[0013] In an optional implementation, obtaining the target component and / or the component logical relationship between different target components set by the user based on the visual editing canvas, and updating the visual editing canvas and the overall JSON data according to the component logical relationship, includes: obtaining the component constraints of the target component set by the user based on the visual editing canvas, the component constraints including at least one of length constraints, size constraints, rule constraints, and required constraints; obtaining the component behavior of the target component set by the user based on the visual editing canvas, the component behavior including at least one of template placeholders, API call requests, jump links, and data summation; obtaining the verification method and corresponding verification rules of the target component set by the user based on the visual editing canvas, the verification method including at least one of synchronous verification, asynchronous verification, and third-party verification, the verification rules including: null value verification rules and regular expression verification rules; obtaining the component linkage relationship between different target components set by the user based on the visual editing canvas, the component linkage relationship including: control relationship, data update relationship, dynamic verification relationship, and data linkage relationship between different target components; updating the target component's sub-specification 2 / 16 pages 6 CN 122044415 A according to the component constraints, component behavior, verification rules, and component linkage relationship. JSON data, and update the visual editing canvas and overall JSON data based on the updated target component's sub-JSON data.

[0014] This invention, through the JSONification of component constraints, behaviors, and other configurations, can combine the internationalization fields of the data layer to achieve multilingual configuration of each field, making up for the inconvenience of multilingual configuration in the prior art, and adapting to multilingual scenarios such as multinational enterprises. At the same time, it covers four types of linkage scenarios: control relationship, data update relationship, dynamic validation relationship, and data linkage relationship, which can meet the deep needs of enterprise-level forms, and the configuration of component logical relationships is extended through JSON, without modifying the core code of the rendering layer and logic layer, solving the problem that the prior art needs to modify multiple modules to extend new rules, and improving scalability.

[0015] In an optional implementation, obtaining the template placeholder of the target component set by the user based on the visual editing canvas includes: obtaining the template placeholder set by the user, the template placeholder contains preset dynamic fields and custom text; parsing the template placeholder, and determining the field path of the target component based on the parsed preset dynamic fields to obtain the template placeholder.

[0016] This invention enables dynamic data linkage display by allowing users to customize template placeholders, avoiding the limitations of traditional methods.The present invention addresses the issues of hard-coded form text and delayed display after data changes, improves the dynamism and data correlation of forms, meets the dynamic text requirements of different scenarios, broadens the functional coverage of forms, and enhances the intuitiveness of users reading forms.

[0017] In an optional implementation, the control relationship between different target components set by the user based on the visual editing canvas is obtained, including: determining the control value type of the first target component as the controller among the different target components; determining the control conditions between the first target component and the second target component as the controlled party according to the control value type; if the number of components of the first target component is at least two, then determining the logical relationship between the control conditions corresponding to multiple first target components.

[0018] By determining the control conditions between different target components and the logical relationship between the control conditions, the present invention can accurately match the control requirements of different data types, avoid the logical failure problem caused by the single control relationship and lack of data type distinction in the prior art, improve the accuracy of control logic, and support complex control scenarios and adapt to complex business rules of enterprises.

[0019] In an optional implementation, the overall JSON data is parsed to determine the layout method and component type of the target component, and the visual editing canvas is rendered based on the layout method and component type to obtain the target form corresponding to the target scene. This includes: parsing the overall JSON data to determine the first layout method of different target components, the first layout method including: number of grids, label alignment, and label width; if the target component is a table component or a container component, then the second layout method of the child components in the target component is determined; the component type of the target component is determined, and the corresponding input component is determined according to the component type; the visual editing canvas is rendered according to the first layout method, the second layout method, and the input component to obtain the target form corresponding to the target scene.

[0020] By determining the layout method of the components, the present invention can ensure that the form can be reasonably laid out on different devices such as mobile phones, tablets, and PCs, while avoiding the display chaos caused by nested components inheriting the layout of the parent component, ensuring the rendering stability of complex forms, ensuring the uniform rendering effect of components of the same type, avoiding the problem of inconsistent component styles in traditional development, and reducing UI maintenance costs.

[0021] In an optional embodiment, after updating the overall JSON data, the method further includes: adding the modification operation to a pre-built history stack; listening for undo or restore operations; when an undo operation is detected, undoing the modification operation of the overall JSON data and deleting the modification operation from the history stack; when a restore operation is detected, restoring the modification operation of the overall JSON data and re-adding the modification operation to the pre-built history stack.

[0022] This invention, by constructing a history stack, can provide users with undo and restore operations, solving the problems of existing technologies.The lack of a rollback mechanism and the need to reconfigure the form after a misoperation reduce editing risks and the workload of repetitive configuration. This improves the usability and user satisfaction of the form builder.

[0023] In a second aspect, the present invention provides a form builder, including: a canvas layer, a data layer, a rendering layer, and a logic layer. The canvas layer, data layer, rendering layer, and logic layer work together to execute the form construction method of the first aspect or any corresponding embodiment described above. Brief Description of the Drawings

[0024] To more clearly illustrate the technical solutions in the specific embodiments of the present invention or the prior art, the drawings used in the description of the specific embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0025] Figure 1 is a structural schematic diagram of a form builder in an application scenario according to an embodiment of the present invention; Figure 2 is a schematic diagram of a first type of form construction method according to an embodiment of the present invention; Figure 3 is a schematic diagram of a second type of form construction method according to an embodiment of the present invention; Figure 4 is a schematic diagram of a third type of form construction method according to an embodiment of the present invention. Detailed Description

[0026] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the accompanying drawings. Obviously, the described embodiments are some embodiments of the present invention, but not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0027] It is understood that before using the technical solutions disclosed in the various embodiments of the present invention, the user should be informed of the type, scope of use, and usage scenarios of the personal information involved in the present invention and the user's authorization should be obtained in accordance with relevant laws and regulations through appropriate means.

[0028] The terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly indicating the number of indicated technical features. Therefore, features defined as "first" and "second" can explicitly or implicitly include one or more of these features. In the description of this invention, "multiple" means two or more, unless otherwise explicitly specified.

[0029] As an optional application scenario of an embodiment of the present invention, as shown in FIG1, an embodiment of the present invention provides a form builder, including a canvas layer 101, a data layer 102, a rendering layer 103, and a logic layer 104. Among them, the main responsibility of the canvas layer 101 is to render the components dragged by the user from the component panel into interactive form elements, and to handle the editing, moving, and...Deletion and other operations; the main responsibility of the data layer 102 is to define the data structure and specifications of JSON, store the configuration information of each component, manage the data status of the form, the validation status and linkage logic; the main responsibility of the logic layer 104 is to handle the constraint relationship of the components, the behavior of the components, the interaction relationship between the components, the data acquisition of the components, and the validation rules of the components; the main responsibility of the rendering layer 103 is to render the form on the user interface according to the configuration corresponding to the JSON data.

[0030] The general form builder provided by the related technology has simple functions and the main disadvantages are as follows: ① Insufficient internationalization support. For multilingual applications, the form builder is not convenient enough when configuring multiple languages, and cannot configure different languages ​​for each field. ② Lack of linkage relationship between components. For some common forms, there is usually linkage between components, rather than simply filling in form fields. For example, for leave, you need to select the type of leave first, and then calculate the total number of leave days according to the rules of the leave type. ③ Extensibility limitation. When expanding new field types or layouts, it may be necessary to modify multiple places (such as renderers, validation logic, attribute panels, etc.) on page 4 / 16 of the specification, resulting in high expansion costs. ④ Version compatibility. When upgrading, new forms may be incompatible with older versions, leading to upgrade difficulties. ⑤ Custom validation rules. In some special scenarios, users need to customize validation rules, such as determining whether a user exists when a user is entered. ⑥ Mobile adaptation: Insufficient support for mobile adaptation, especially in terms of responsive layout. Therefore, this embodiment of the invention provides a form construction method that uses JSON data as the core carrier to decouple rendering logic (interface) from business logic (rules) to improve the flexibility of form construction and meet the complex business needs of users.

[0031] According to an embodiment of the invention, a form construction method embodiment is provided. It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. Although the logical order is shown in the flowchart, in some cases, the steps shown or described may be executed in a different order than that shown here.

[0032] This embodiment provides a form construction method, which can be used on terminal devices such as computers to deploy the above-mentioned form builder. Figure 2 is a flowchart of the form construction method according to an embodiment of the present invention. As shown in Figure 2, the process includes the following steps: Step S201, obtain the target scenario, and generate a visual editing canvas and the overall JSON data corresponding to the visual editing canvas according to the target scenario.

[0033] Specifically, in the embodiment of the present invention, in the initial stage of the form construction process, the target scenario is first obtained through demand research and business analysis. Specifically, the application scenario type of the form can be determined by combining the actual business needs of the enterprise, such as employee request.Fake approval forms, business trip expense reimbursement forms, customer information collection forms, etc., and at the same time determine the core functional requirements of the scenario. For example, the leave approval scenario needs to support "linkage between leave type and leave days" and "remaining leave quota verification". The multinational enterprise scenario needs to enable multilingual display. The mobile office scenario needs to strengthen responsive layout adaptation and basic configuration requirements, such as the target user group of the form, the data submission method, and whether it is necessary to connect to the existing business system interface of the enterprise.

[0034] Based on the above definition of the requirements of the target scenario, the system will automatically generate a visual editing canvas. The canvas reuses the layout logic and real-time rendering capability of the rendering layer. The initial display includes a complete editing interface including the component panel entrance, the rasterized editing area, and the attribute configuration panel placeholder area. The editing area loads 24 equal-ratio grids by default. This is only an example and is not limited to this. Meanwhile, it provides five preset responsive size adaptation frameworks: xs (<576px), sm (768px > form area >= 576px), md (992px > form area >= 768px), lg (1200px > form area >= 992px), and xl (form area > 1200px). It also generates initial field group frameworks according to scenario requirements. For example, the leave application form will create field groups such as basic leave information and leave details by default. Each field group is initially configured with a 2-column grid layout, which makes it easy for users to directly perform component drag and drop and layout adjustment operations.

[0035] At the same time, the system will generate overall JSON data corresponding to the visual editing canvas according to the core structure specifications of the data layer. This JSON data contains three core modules. The first is the basic layout configuration, such as setting the label alignment to top alignment and the label width to 120px by default according to the scenario requirements. If the scenario needs to be adapted to mobile devices, the responsive rule of the component occupying 24 grids under the XS size is preset. This is only an example and is not limited to this. The second is the fieldModelList field group framework. For example, the fieldModelList of the leave application form contains the "Leave Basic Information" field group, and its layout configuration is {"type":" grid","columns":2}. The fields array is initially empty to wait for the user to add components. This is only an example and is not limited to this. The third is the global configuration field. For example, if the scenario needs to be multilingual, "i18nEnabled":true is set. If the scenario is for formal use, "formEditable":true is set. This is only an example and is not limited to this.

[0036] Step S202: Obtain user operation events on the visual editing canvas, determine the target component corresponding to the operation event, and update the visual editing canvas and the overall JSON data according to the target component. (Instruction manual 5 / 16, page 9, CN 122044415 A)

[0037] Specifically, in this embodiment of the invention, during the form visual editing stage, the canvas layer continuously monitors all user operation events on the visual editing canvas, covering three core interaction scenarios: component addition, attribute editing, and layout adjustment. This includes component drag events from the component panel to the canvas area, drag and adjust events of existing components within the canvas, component selection events, and modification events of component configurations based on the attribute panel, ensuring that every user editing action is captured without omission.

[0038] Upon detecting an operation event, the system accurately determines the target component corresponding to the operation event through preset event binding and data recognition logic. Based on the target component recognition result, the system follows the core logic of data-driven interface, synchronously updating the visual editing canvas and the overall JSON data. In the component panel drag-and-drop addition scenario, the visual editing canvas and the corresponding overall JSON data are adjusted in different ways according to the different drag hover positions; in the component click and attribute editing scenario, after the target component is selected, the system will synchronize the component to the attribute panel. After the user modifies the configuration in the attribute panel, the modified content will be updated in real time to the overall JSON data, and the canvas layer will re-render the display state of the target component according to the updated overall JSON data.

[0039] It can be seen that the above process strictly follows the data flow closed loop of operation event, target component identification, JSON data update, and real-time canvas rendering, ensuring that the interface state of the visual editing canvas and the overall JSON data are always consistent. This not only conforms to the data-driven, U and logic separation design principle of the present invention embodiment, but also avoids the editing error of interface and data being out of sync, and improves the accuracy and efficiency of form editing.

[0040] Step S203: Obtain the target component and / or the component logical relationship between different target components set by the user based on the visual editing canvas, and update the visual editing canvas and the overall JSON data according to the component logical relationship.

[0041] Specifically, in this embodiment of the invention, simply deploying components in the form cannot meet the complex business needs of enterprises. It is also necessary to further determine the component or the logical relationship between components based on business needs. Therefore, in the form visual editing process, after the user completes the component drag-and-drop and basic layout construction, they can further set the independent logical rules of the target component and the associated logical relationship between different target components through the attribute configuration panel or logical rule configuration module associated with the visual editing canvas. The system will capture the user's configuration operation in real time, accurately obtain the set component logical relationship, and synchronously update the display status of the visual editing canvas and the overall JSON data with data-driven as the core, to ensure the consistency between business logic and interface display.

[0042] Regardless of whether the user sets the independent logical rules of the target component or the linkage relationship between components, the system willFollowing a closed-loop process of logical configuration, updating sub-JSON data, integrating overall JSON data, and real-time canvas rendering, it ensures that all logical configurations are ultimately mapped to the corresponding sub-JSON data of the components in the overall JSON data, ensuring that the JSON of the data layer can fully carry the business logic; the canvas layer reuses the logic parsing capability of the rendering layer, reads the updated overall JSON data, and adjusts the display state of the components in real time, ultimately realizing the user configuration logic and JSON data recording logic. The end-to-end synchronization of the canvas display logic effect strictly conforms to the core design principles of data-driven, UI and logic separation in this embodiment of the invention.

[0043] Step S204: Parse the overall JSON data, determine the layout method and component type of the target component, and render the visual editing canvas based on the layout method and component type to obtain the target form corresponding to the target scene.

[0044] Specifically, in the embodiment of the present invention, in the final rendering stage of the form construction process, the main renderer of the rendering layer acts as the core execution unit to initiate a full parsing of the overall JSON data. This parsing process strictly follows the JSON structure specification defined by the data layer. First, it extracts the global layout configuration and fieldModelList field group data from the overall JSON data, and then delves into the layout sub-configuration and fields array (which stores the sub-JSON data of the target component) of each field group layer by layer. By parsing the layout rules first and then matching the component type, it completes the accurate extraction of the target component rendering information. Finally, it links the layout component and the component renderer to render the visual editing canvas and generate a target form that fully matches the target scenario, such as the target form in the scenarios of leave approval, business trip reimbursement, and customer information collection.

[0045] The form construction method provided by the present invention, based on the visual editing canvas generated according to the target scene and the corresponding overall JSON, sequentially determines the user's operation events on the visual editing canvas, determines the target components corresponding to the operation events, determines the component logic relationships between the target components and / or different target components, and updates the visual editing canvas and the overall JSON in real time. Finally, the overall JSON is parsed to determine the layout method and component type of the target components. The target form is obtained by rendering the visual editing canvas. The present invention uses JSON data to uniformly describe the form structure during the form construction process. It can decouple the rendering logic (interface) from the business logic (rules) with JSON data as the core carrier. Developers can adjust the form functions or interface without modifying the template code, thereby avoiding the problem of repeatedly writing control, validation and other code in traditional form development, reducing the development workload, ensuring the consistency of the form interface style under different developers and different business scenarios, and improving the user experience.

[0046] This embodiment provides a form construction method that can be used on terminal devices, such as computers, to deploy the above-mentioned form builder. Figure 3 is a flowchart of the form construction method according to an embodiment of the present invention. As shown in Figure 3, the process includes the following steps: Step S301: Obtain the target scene and generate a visual editing canvas and the overall JSON data corresponding to the visual editing canvas according to the target scene. For details, please refer to step S201 of the embodiment shown in Figure 2, which will not be repeated here.

[0047] Step S302: Obtain the user's operation event on the visual editing canvas, determine the target component corresponding to the operation event, and update the visual editing canvas and the overall JSON data according to the target component.

[0048] Specifically, the above step S302 includes: Step S3021: Listen for drag events from the component panel to the visual editing canvas, and / or click events in the component panel.

[0049] Specifically, in the embodiment of the present invention, in the initial stage, the canvas layer needs to maintain an overall JSON data of the currently constructed form. This data and the rendering layer share a set of JSON data structures. Meanwhile, the canvas layer also needs to maintain some initial display states, such as the currently selected component, the canvas scaling ratio, the currently hovered component, and the component being dragged. This embodiment of the invention provides users with two component adjustment methods: dragging and clicking. To implement these two component adjustment methods, three data flows are designed, including: ① User drag operation -> Update JSON data -> Canvas re-render; ② User click selection -> Update selection state -> Attribute panel synchronization; ③ Attribute panel modification -> Update JSON data -> Canvas re-render. During component adjustment, the overall JSON data is updated in real time, and the corresponding form interface is rendered in real time, achieving reuse of the rendering layer's logic.

[0050] Therefore, when a user adds a target component to the visual boundary canvas by dragging or clicking, the drag event (drop event) from the component panel to the visual editing canvas and / or the click event in the component panel are monitored in real time.

[0051] Step S3022: If a drag event or click event is detected, the target component corresponding to the drag event or click event is determined, and the sub-JSON data of the target component is obtained. The sub-JSON data of the target component includes the field model and attribute information of the target component.

[0052] Specifically, in this embodiment of the invention, the corresponding JSON data structure and specification are pre-defined for each component in the data layer, and the configuration information of each component is stored. The main core structure of the JSON data is as follows: { "Layout": { "labelPosition": "top", "labelWidth": 120 Specification 7 / 16 Page 11 CN 122044415 A}, "fieldModelList": [{ "title": "Basic Information", "Layout": { "type": "grid", "columns": 2}, "fields": [ { "name": "username", "label": "Username", "type": "singleText", "placeholder": "Please enter your username", "rules": [ { "required": true, "message": "Username is required"}, { "min": 3, "message": "Username must be at least 3 characters"} ], "props": { / / Attributes passed to the underlying UI component "size": "large", "prefixIcon": "user"}}, { "name": "gender", "label": "Gender", "type": "singleSelect", "options": [ { "label": "Male", "value": "male"}, { "label": "Female", "value": "female"} ], "hidden": "{{ formModel.age<18}}", / / Linked logic "disabled": As can be seen, this embodiment of the invention uses standardized data to describe the form's interface layout, component information, business rules, etc., to achieve data-driven forms. Developers do not need to manually write UI component code such as Input and Select, nor do they need to write separate validation / linkage logic. They only need to maintain the overall JSON data. The rendering layer will automatically parse and generate the corresponding form interface, and the logic layer will automatically execute validation and linkage. In addition, this embodiment of the invention allows developers to extend functionality through coding. Therefore, it can accommodate new field types, new layout methods, new field validation rules, interactions and linkages between new components, new component constraints and behavioral characteristics, and the addition of new components. For example, when a new component needs to be added, in the rendering logic layer, only the corresponding component mapping relationship needs to be added, while in the business logic layer, attention only needs to be paid to the data structure of the new component's behavior, linkage, validation, constraints, etc., thereby improving the scalability of the form builder.

[0053] Furthermore, each target component has independent configuration sub-JSON data, which is fieldModelList[ in the overall form JSON.The elements of the ].fields array, the data model (Form Model) in the sub-JSON data is a reactive JavaScript object used to store all form field values, with the following structure: {name:'',age:0}, mapped one-to-one with the fields of each component; the field model (FieldModel) in the sub-JSON data is an independent model for each component, including its value, value range, validation information, whether it is disabled, whether it is visible, component data, and interaction relationships with other components.

[0054] Step S3023, if the operation event is a drag event, then obtain the hover position of the drag event, and insert the sub-JSON data of the target component into the corresponding position of the overall JSON data according to the hover position, and update the visual editing canvas.

[0055] Specifically, in this embodiment of the invention, the canvas layer is set to accept components dragged from the component panel. The user selects the target component on the component panel and drags it into the visual editing canvas. Therefore, the drop event is listened to in the visual editing canvas area to obtain the component data of the target component; according to the type of the component, the sub-JSON data of the target component is generated; the sub-JSON data is inserted into the corresponding position of the overall JSON data corresponding to the visual editing canvas.

[0056] In some optional embodiments, the above step S3023 includes: Step a1, determining whether there is a preset component at the hover position. If not, the sub-JSON data of the target component is inserted into the end of the overall JSON data.

[0057] Step a2, if there is a preset component and the component type is a normal component, the sub-JSON data of the target component is inserted into the beginning of the sub-JSON data of the preset component in the overall JSON data.

[0058] Step a3, if there is a preset component and the preset component is a container component, the sub-JSON data of the target component is inserted into the inside of the sub-JSON data of the preset component in the overall JSON data.

[0059] Specifically, in this embodiment of the invention, the hovering position of the target component after dragging is obtained, and the insertion position of the sub-JSON data in the overall JSON data is determined according to the hovering position. Specifically, if a regular component exists in the area where the drag is hovered, it is inserted before the hovering component; if the drag is hovered over a container component, it is inserted inside the container component, thus becoming a child item of the container component; if the drag is hovered over a blank area, it is inserted at the end of the form.

[0060] Step S3024: If the operation event is a click event, the attribute panel of the visual editing canvas is updated according to the sub-JSON data of the target component, and the overall JSON data and the visual editing canvas are updated according to the attribute panel.

[0061] Specifically, in this embodiment of the invention, when the user clicks to select the target component, the target component's...The configuration process is as follows: a click event is added to each component in the component panel in advance. When the user clicks, it is set as the currently selected target component; the data of the selected target component is obtained and the attribute panel is updated; after the user edits and updates the data in the attribute panel, the sub-JSON data of the target component is updated synchronously.

[0062] In some optional embodiments, the present invention also provides the user with the operation of dragging existing components in the visual editing canvas to adjust their positions. The steps include: Step b1, listening to the drag event in the visual editing canvas; Step b2, if the drag event is listened to, the target component corresponding to the drag event and the preset component at the corresponding hover position are determined.

[0063] Step b3, if the preset component is a normal component, the positions of the target component and the preset component in the visual editing canvas are swapped, and the positions of the sub-JSON data of the target component and the sub-JSON data of the preset component are swapped in the overall JSON data.

[0064] Step b4: If the preset component is a container component, the target component is placed inside the preset component, and the sub-JSON data of the target component is inserted into the sub-JSON data of the preset component in the overall JSON data.

[0065] Specifically, in this embodiment of the invention, the entire form (overall JSON data) is regarded as a tree structure, each container component (table, dynamic table, etc.) is a node of the tree, and other ordinary components are leaf nodes. When dragging, it is necessary to determine the target component to be dragged and the preset component to be placed. The position where the mouse hovers is the preset component. If the preset component is a container component, the target component to be dragged is placed inside the container component as a child component of the container component. If the preset component is another ordinary component, the positions of the two components are swapped. Therefore, this embodiment of the invention can support the adjustment of the order between components and the adjustment of the nesting structure between components.

[0066] Further, this embodiment of the invention also provides users with undo and redo operations to improve user experience, facilitate rollback operations, and solve the problem of accidental operation. The steps are as follows: Step c1: Add the modification operation to the pre-built history stack.

[0067] Step c2: Listen for undo or restore operations.

[0068] Step c3: When an undo operation is detected, undo the modification operation of the entire JSON data and delete the modification operation from the history stack.

[0069] Step c4: When a restore operation is detected, restore the modification operation of the entire JSON data and add the modification operation back to the pre-built history stack.

[0070] Specifically, in this embodiment of the invention, the command pattern in the design pattern is used to record each modification operation on the entire JSON data, including add, delete, modify, and query; a history stack is built and maintained during the form construction process, and each modification operation...Each action is recorded as a command and added to the history stack, corresponding to a push operation. The keyboard Ctrl+Z event is monitored. If detected, an undo operation is performed, i.e., the current modification operation is undone, and the corresponding command is removed from the history stack, corresponding to a pop operation. Simultaneously, the keyboard Ctrl+Y event is monitored. If detected, a redo operation is performed, i.e., the undone modification operation is restored to the previous operation.

[0071] Step S303: Obtain the target components and / or component logical relationships between different target components set by the user based on the visual editing canvas, and update the visual editing canvas and overall JSON data according to the component logical relationships.

[0072] Specifically, the above step S303 includes: Step S3031: Obtain the component constraints of the target components set by the user based on the visual editing canvas. Component constraints include at least one of length constraints, size constraints, rule constraints, and required constraints.

[0073] Specifically, in this embodiment of the invention, the user can set component constraints for each target component in the attribute configuration panel, thereby presetting component behavior, including at least one of length constraints, size constraints, rule constraints, and required constraints. Among them, the length constraint is for components whose field value is a string, constraining the length of the value, such as single-line text and multi-line text, and can constrain the maximum and minimum length that the component can input; the size constraint is for components whose field value is a number, constraining the range of values ​​of the value, such as number components and amount components, and can constrain the input range of the component; the rule constraint is for some special components, such as telephone components, which need to force the input of telephone numbers that meet the requirements, such as single-line and multi-line text, and if a regular expression is configured, then the input must be a value that meets the regular expression; the required field constraint is for controls that have a required field configured in JSON data, which requires that the value of the control must be filled in and cannot be empty.

[0074] Step S3032, obtain the component behavior of the target component set by the user based on the visual editing canvas, the component behavior includes at least one of template placeholder, call interface request, jump link, and data summation. Instruction manual, pages 10 / 16, 14 CN 122044415 A

[0075] Specifically, in this embodiment of the invention, component behavior defines the functional logic inside the component, which can be configured by the user in the attribute configuration panel or logic rule configuration module, including: component behavior includes at least one of template placeholder, API call request, jump link, and data summation.

[0076] Among them, the main application scenario of template placeholder is the display of user-defined control values, which is achieved by parsing string expressions through regular expressions. The configuration steps are as follows: Step d1, obtain the template placeholder set by the user. The template placeholder contains preset dynamic fields and custom text.

[0077] Step d2, parse the template placeholder and determine the field path of the target component according to the parsed preset dynamic fields.

[0078] Specifically, in this embodiment of the invention, a template placeholder is predefined, and it is agreed that the field enclosed in {} is a preset dynamic field value, and the rest is custom text, but not limited thereto. The preset dynamic fields include: value (i.e., the value of the current control), _model (the entire data model object), and _row (in a table or dynamic table, _row represents the data model of the current row). For example, a user can define the template placeholder as: "Current amount is {_model.price} RMB", where {_model.price} indicates that the price field value in the data model object should be read, and the final content displayed to the user is "Current amount is 100 RMB". During form application, the template placeholders set by the user are parsed, and the field values ​​to be read are extracted using regular expressions. For example, if {_model.price} is used, then the field path to be read is _model.price. Then, the string is split using '.' as the delimiter. In the example above, after splitting, it becomes an array, such as [_model,price]. The array is traversed, and each time a value is read, it needs to be cached. This value is used as the data model for the next read, until the reading is complete, and then the reading result is returned. The reading result is used as a calculated attribute. When the model data changes, the calculated attribute will retrieve the value again.

[0079] For example, calling the interface request means that some components can call the interface through an HTTP request to obtain the data needed by the component, such as a single-select / multi-select dropdown component. The calling process is as follows: ① According to the apiUrl field (the address of the requested interface) and requestMethod field (the method of request, sending an HTTP request) configured in the JSON structure; ② According to the valueKey (the value field, the unique identifier of the data) and labelKey (the display field) configured in the JSON structure, parse the data returned by the interface and assemble it into the data required inside the component.

[0080] For example, the jump link represents some components set as hyperlink components, which need to be clicked to jump to the link. After being set as a hyperlink component, the process of the user implementing the jump link is as follows: listen to the click event of the component, get the URL hyperlink defined in the JSON structure, and jump to the link by opening a new browser window.

[0081] For example, the numerical summation represents some components as summation components, which can sum other numerical components. The implementation process of the summation component is as follows: get the associated summation component value, which can be for multiple different components or for a column in a table; perform the summation operation on multiple component values ​​to obtain the summation result.

[0082] Step S3033, get the verification method of the target component set by the user based on the visual editing canvas and the correspondingThe validation rules and validation methods include at least one of synchronous validation, asynchronous validation, and third-party validation. The validation rules include: null value validation rules and regular expression validation rules.

[0083] Specifically, in this embodiment of the invention, the user can select the required validation method from the validation methods provided by the attribute configuration panel or the logic rule configuration module, including: synchronous validation, asynchronous validation, and third-party validation. Among them, synchronous validation is directly defined in the rules field, such as required (the field value must be filled in and cannot be empty), min (the minimum length of the field value), max (the maximum length of the field value), and pattern (validating the field value through regular expressions); asynchronous validation supports user-defined validator functions for some specific validation scenarios, such as validating whether the username exists; it integrates third-party validation libraries, such as async-validator, to implement more field validations, such as whether the numeric input is valid, whether the array is empty, and whether the object is empty.

[0084] Further, the specific validation rules are determined according to the selected validation method. The null value validation rule determines whether the value is empty based on the required and type fields in the validation rule. For text type, if the value is an empty string, undefined, or null, it is empty and the validation fails. For array type, if the value is an empty array (array length is 0), undefined, or null, it is empty and the validation fails. For number type, if the value is undefined or null, it is empty and the validation fails. For object type, if the value is an empty string, undefined, or null, it is empty and the validation fails.

[0085] The regular expression validation rule determines whether the value conforms to the regular expression requirements based on the pattern and type in the validation rule. The pattern only supports type as string (text type) and number (number type). For text type, regular expression can be used directly for validation. If the validation result returns false, the validation fails. For number type, the number type needs to be converted to text type first. This can be done by concatenating an empty string to convert it to text type. Then, regular expression is used for validation. If the validation result returns false, the validation fails. For other types, since they cannot be converted to strings, the default validation result returns false, and the validation fails.

[0086] Further, if the validation fails, the corresponding error message and component ID (unique identifier) ​​are obtained. Each component matches the corresponding error message based on the ID and displays the validation failure message.

[0087] Step S3034: Obtain the component linkage relationship between different target components set by the user based on the visual editing canvas. The component linkage relationship includes: control relationship, data update relationship, dynamic verification relationship, and data linkage relationship between different target components.

[0088] Specifically, in this embodiment of the invention, in order to meet complex business needs, the user can set the component linkage relationship between components in the attribute configuration panel or logic rule configuration module, including: control relationship, data update relationship, dynamic verification relationship, and data linkage relationship.

[0089] For example, the control relationship is that the first target component as the controller controls the display / hide, disable / enable of the second target component as the controlled party. The steps to determine the control relationship include: Step e1: Determine the control value type of the first target component as the controller among different target components.

[0090] Step e2: Determine the control conditions between the first target component and the second target component as the controlled party according to the control value type.

[0091] Step e3: If the number of components of the first target component is at least two, then determine the logical relationship between the control conditions corresponding to multiple first target components.

[0092] Specifically, in this embodiment of the invention, the display / hiding, disabling / enabling of the current second target component can be controlled according to the component values ​​of one or more associated first target components. Specific control conditions include selected, unselected, equal to, greater than, greater than or equal to, less than, less than or equal to, and not equal to, specifically determined according to the control value type.

[0093] For example, if the associated control value type is an array type, the control conditions only consider the selected and unselected relationships. Under the selected relationship, if one value in the array is equal to the field value, it is selected; otherwise, it is unselected. Under the unselected relationship, if none of the values ​​in the array are equal to the field value, it is unselected; otherwise, it is selected. If the associated control value type is a character type, the control conditions only consider the equal to and not equal to relationships. If the associated control value type is a number type, the control conditions only consider equal to, greater than, greater than or equal to, less than, less than or equal to, and not equal to.

[0094] Further, when multiple first target components are associated with corresponding component values, the logical conditions between each control condition can be set as an AND / OR relationship. Where multiple control conditions are in a AND relationship, the condition group is true only if all control conditions are met simultaneously. If multiple control conditions are in an OR relationship, the condition is true only if any one of the control conditions is met.

[0095] For example, the data update relationship is the dynamic update of the dropdown options of the target component. For single-select and multi-select dropdown controls, the dropdown options can be dynamically updated by associating with the values ​​of other components. For components associated with the values ​​of other components, the control should be disabled by default, and the component should be editable when the associated component value is not empty.The state. If a data update relationship is set between components, the component needs to listen to the value of the associated component. After the value of the associated component changes, the drop-down options need to be dynamically updated. The drop-down options can be set by manual filling or obtained through an interface via an HTTP request. In actual form applications, the specific logic is as follows: obtain the value of the associated component, listen to the change of the component value, and after the component value changes, first clear the selected option value and the drop-down list data; for manually set option lists, match and filter the corresponding option values ​​according to the associated component values; for option lists obtained through an interface via an HTTP request, add the associated component value to the URL by querying parameters, and call the interface in the form of a GET request to obtain the option list.

[0096] For example, the dynamic validation relationship is to dynamically add validation rules to the current component based on the associated component value. For example, when the value of the associated component is greater than 100, the current component value must be filled in and cannot be empty; when the value of the associated component is less than 100, the current component value is not required and can be empty. Therefore, different validation rules need to be configured for different relationships of each component according to the set associated component values. For example, when the associated component value is greater than 100, the current component value is required, and when it is less than 100, the current component value is not required. In actual form applications, the associated component values ​​are obtained, changes in component values ​​are monitored, and the corresponding validation relationships are matched according to the associated component values. The validation rules of the current component are dynamically deleted or added.

[0097] For example, the data linkage relationship is that for components with value types of object types, such as single / multiple selection dropdowns and single / multiple selection box components, a certain field value in the object can be used as the initial value of other controls. Therefore, select the component to be associated and select the specific field in the value of the object to be associated. In actual form applications, the changes in the current component value are monitored, and the associated field value is read. Set the value of the associated component.

[0098] Step S3035: Update the sub-JSON data of the target component according to the component constraints, component behavior, validation rules and component linkage relationship, and update the visual editing canvas and the overall JSON data based on the updated sub-JSON data of the target component.

[0099] Specifically, in this embodiment of the invention, during the process of user configuration of target components or component logical relationships between different target components, the canvas layer captures the corresponding configuration parameters in real time and writes them one by one into the sub-JSON data of the target component, completing the transformation of user configuration into data structure, and then updating the overall JSON data to ensure the integrity and consistency of the overall data. Simultaneously, the canvas layer relies on the main renderer, layout component, and component renderer of the rendering layer to re-render the form interface displayed on the visual editing canvas according to the updated overall JSON, achieving synchronization between configuration changes and the interface, allowing users to intuitively see the configuration taking effect on the visual editing canvas.

[0100] Step S304: Parse the overall JSON data, determine the layout method and component type of the target component, and render the visual editing canvas based on the layout method and component type to obtain the target form corresponding to the target scene. For details, please refer to step S204 of the embodiment shown in Figure 2, which will not be repeated here.

[0101] The form construction method provided by the present invention, based on the visual editing canvas generated according to the target scene and the corresponding overall JSON, sequentially determines the user's operation events on the visual editing canvas, determines the target component corresponding to the operation event, determines the component logical relationship between the target component and / or different target components, and updates the visual editing canvas and the overall JSON in real time. Finally, the overall JSON is parsed to determine the layout method and component type of the target component, and the target form is obtained by rendering the visual editing canvas. This invention uses JSON data to uniformly describe the form structure during the form construction process. It decouples rendering logic (interface) from business logic (rules) using JSON data as the core carrier. Developers can adjust form functions or interfaces without modifying template code, thus avoiding the problem of repeatedly writing control and validation code in traditional form development, reducing development workload, ensuring consistent form interface style across different developers and business scenarios, and improving user experience.

[0102] This embodiment provides a form construction method that can be used on terminal devices, such as computers, equipped with the above-mentioned form builder. Figure 4 is a flowchart of the form construction method according to an embodiment of the present invention. As shown in Figure 4, the process includes the following steps: Step S401: Obtain the target scene and generate a visual editing canvas and the corresponding overall JSON data based on the target scene. For details, please refer to step S301 of the embodiment shown in Figure 3, which will not be repeated here.

[0103] Step S402: Obtain user operation events on the visual editing canvas, determine the target component corresponding to the operation event, and update the visual editing canvas and overall JSON data according to the target component. For details, please refer to step S302 of the embodiment shown in Figure 3, which will not be repeated here.

[0104] Step S403: Obtain the target component set by the user based on the visual editing canvas and / or the component logical relationship between different target components, and update the visual editing canvas and overall JSON data according to the component logical relationship. For details, please refer to step S303 of the embodiment shown in Figure 3, which will not be repeated here.

[0105] Step S404: Parse the overall JSON data, determine the layout method and component type of the target component, and render the visual editing canvas based on the layout method and component type to obtain the target form corresponding to the target scene.

[0106] Specifically, step S404 includes:Step S4041: Parse the overall JSON data to determine the first layout method for different target components. The first layout method includes: number of grids, label alignment, and label width.

[0107] Specifically, in this embodiment of the invention, the main renderer of the rendering layer is responsible for parsing the overall JSON data structure, traversing the overall JSON data, and coordinating and scheduling the Layout component and component renderer according to different data. The Layout component is a layout renderer responsible for parsing the layout configuration data, including the layout method of components in the form interface and the layout method of table-type components or container-type components. Among them, the layout method of components in the form interface includes: number of grids, label alignment, and label width.

[0108] This embodiment of the invention defines a form grid and divides the entire form area into 24 equal parts (with the same width) to form a large number of form grids. Each component can freely configure the space share it needs to occupy. The form grid also supports responsive layout. The layout component has five preset response sizes: xs (<576px), sm (768px > form area >= 576px), md (992px > form area >= 768px), lg (1200px > form area >= 992px), and xl (form area > 1200px). Components can be configured to occupy different numbers of grids for different mobile device sizes. If you want to display three components per row at the xl size, you need to configure the components to occupy eight grids at the xl size. If you want to display one component per row at the xs size, you need to configure the components to occupy 24 grids at the xs size. By determining the number of grids for the target component, the form can be dynamically adjusted according to the mobile device size to make the form suitable for different mobile devices.

[0109] Further, the label refers to the title of the target component. There are three label alignment methods: left alignment, right alignment, and top alignment. In the left-aligned and right-aligned modes, the label and component are on the same line, horizontally aligned, and the label content of the component is vertically aligned to the left or right. In the top-aligned mode, the label and component are arranged vertically, each occupying one line, and the label content is vertically aligned to the left. The label width specifies the view width occupied by the form.

[0110] Step S4042: If the target component is a table component or a container component, then determine the second layout mode of the sub-components in the target component.

[0111] Specifically, in the embodiments of the present invention, table components and container components can nest different sub-components, and the layout of the sub-components follows the constraints of the Layout component.

[0112] Step S4043: Determine the component type of the target component, and determine the corresponding input component according to the component type. Specification 14 / 16 pages 18 CN 122044415 A

[0113] Specifically, in this embodiment of the invention, the component renderer pre-defines different input components according to different component types. The mapping relationship between component types and input components is shown in the table below:

[0114] Step S4044: Render the visual editing canvas according to the first layout method, the second layout method, and the input component to obtain the target form corresponding to the target scene.

[0115] Specifically, in this embodiment of the invention, the component renderer extracts the props field (UI attributes) and business configuration (such as placeholder "rules" options) from the component sub-JSON and passes them to the input component to ensure that the style and function of the component conform to the configuration. Then, the configured input component is rendered into the position and size area allocated to it by the Layout component through DOM creation or virtual DOM mounting. After completing the calculation of the first layout and the second layout and the rendering of the input component, the main renderer performs the final integration to ensure the integrity, interactivity, and responsive adaptation of the form, and finally generates the target form.

[0116] The form construction method provided by the present invention, based on the visual editing canvas generated according to the target scene and the corresponding overall JSON, sequentially determines the user's operation events on the visual editing canvas, determines the target components corresponding to the operation events, determines the component logic relationships between the target components and / or different target components, and updates the visual editing canvas and the overall JSON in real time. Finally, the overall JSON is parsed to determine the layout method and component type of the target components. The target form is obtained by rendering the visual editing canvas. The present invention uses JSON data to uniformly describe the form structure during the form construction process. It can decouple the rendering logic (interface) from the business logic (rules) with JSON data as the core carrier. Developers can adjust the form functions or interface without modifying the template code, thereby avoiding the problem of repeatedly writing control, validation and other code in traditional form development, reducing the development workload, ensuring the consistency of the form interface style under different developers and different business scenarios, and improving the user experience.

[0117] This embodiment of the invention also provides a computer-readable storage medium. The methods described above according to embodiments of the invention can be implemented in hardware or firmware, or implemented as recordable on a storage medium, or implemented as computer code downloaded via a network and originally stored on a remote storage medium or a non-transitory machine-readable storage medium and to be stored on a local storage medium, so that the methods described herein can be processed by software stored on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. The storage medium can be a magnetic disk, optical disk, read-only memory, machine-readable memory, flash memory, hard disk, or solid-state drive, etc.; furthermore, the storage medium may also include the above-mentioned types.The combination of memories. It is understood that computers, processors, microprocessor controllers, or programmable hardware include storage components capable of storing or receiving software or computer code, which, when accessed and executed by the computer, processor, or hardware, implement the form construction method shown in the above embodiments.

[0118] A part of the present invention can be applied as a computer program product, such as computer program instructions, which, when executed by a computer, can invoke or provide the methods and / or technical solutions according to the present invention through the operation of the computer. Those skilled in the art should understand that the forms in which computer program instructions exist in computer-readable media include, but are not limited to, source files, executable files, installation package files, etc. Accordingly, the ways in which computer program instructions are executed by a computer include, but are not limited to: the computer directly executes the instructions, or the computer compiles the instructions and then executes the corresponding compiled program, or the computer reads and executes the instructions, or the computer reads and installs the instructions and then executes the corresponding installed program. Here, the computer-readable medium can be any available computer-readable storage medium or communication medium accessible to a computer.

[0119] Although embodiments of the invention have been described in conjunction with the accompanying drawings, those skilled in the art can make various modifications and variations without departing from the spirit and scope of the invention, and all such modifications and variations fall within the scope defined by the appended claims. Specification 16 / 16 pages 20 CN 122044415 A Figure 1 Specification Drawing 1 / 4 pages 21 CN 122044415 A Figure 2 Specification Drawing 2 / 4 pages 22 CN 122044415 A Figure 3 Specification Drawing 3 / 4 pages 23 CN 122044415 A Figure 4 Specification Drawing 4 / 4 pages 24 CN 122044415 A Abstract The invention relates to the technical field of business process processing. A form constructing method and a form constructor are disclosed. Methods include: Based on the visual editing canvas generated based on the target scene and the corresponding overall JOSN, determine the user's operation events on the visual editing...canvas in turn Determine the target component corresponding to the operation event, determine the target component and / or the component logical relationship between different target components, update the visual editing canvas and the overall JSON in real time, and finally analyze the overall JSON to determine the layout of the target component and Component type, render the visual editing canvas to obtain the target form. According to the invention, the JSON data can be used as a core carrier, the rendering logic and the business logic are decoupled, a developer can adjust the form function or interface without modifying a template code, the code problems of repeatedly writing a control, verifying and the like are avoided, the development workload is reduced, the form interface style is ensured to be consistent, and the user experience is improved.

Claims

1. A form construction method, characterized in that, The method includes: Obtain the target scene, and generate a visual editing canvas and the overall JSON data corresponding to the visual editing canvas based on the target scene; Obtain user operation events on the visual editing canvas, determine the target component corresponding to the operation event, and update the visual editing canvas and the overall JSON data according to the target component; Obtain the target component and / or the component logical relationship between different target components set by the user based on the visual editing canvas, and update the visual editing canvas and the overall JSON data according to the component logical relationship; The overall JSON data is parsed to determine the layout method and component type of the target component. Based on the layout method and component type, the visual editing canvas is rendered to obtain the target form corresponding to the target scene.

2. The method according to claim 1, characterized in that, The process of acquiring user operation events on the visual editing canvas, determining the target component corresponding to the operation event, and updating the visual editing canvas and the overall JSON data based on the target component includes: Listen for drag events from the component panel to the visual editing canvas, and / or click events in the component panel; If the drag event or the click event is detected, the target component corresponding to the drag event or the click event is determined, and the sub-JSON data of the target component is obtained. The sub-JSON data of the target component includes the field model and attribute information of the target component. If the operation event is the drag event, then obtain the hover position of the drag event, insert the sub-JSON data of the target component into the corresponding position of the overall JSON data according to the hover position, and update the visual editing canvas; If the operation event is the click event, then the attribute panel of the visual editing canvas is updated according to the sub-JSON data of the target component, and the overall JSON data and the visual editing canvas are updated according to the attribute panel.

3. The method according to claim 2, characterized in that, The step of obtaining the hover position of the drag event and inserting the sub-JSON data of the target component into the corresponding position of the overall JSON data according to the hover position includes: Determine whether a preset component exists at the hover position. If not, insert the sub-JSON data of the target component at the end of the overall JSON data. If the preset component exists and the component type is a normal component, then the sub-JSON data of the target component is inserted at the front of the sub-JSON data of the preset component in the overall JSON data; If the preset component exists, and the preset component is a container component, then the sub-JSON data of the target component is inserted into the sub-JSON data of the preset component in the overall JSON data.

4. The method according to claim 1, characterized in that, The step of obtaining user operation events on the visual editing canvas, determining the target component corresponding to the operation event, and updating the visual editing canvas and the overall JSON data according to the target component further includes: Listen for drag events in the visual editing canvas; If the drag event is detected, the target component corresponding to the drag event and the preset component at the corresponding hover position are determined. If the preset component is a normal component, then swap the positions of the target component and the preset component in the visual editing canvas, and swap the positions of the sub-JSON data of the target component and the sub-JSON data of the preset component in the overall JSON data; If the preset component is a container component, then the target component is placed inside the preset component, and the sub-JSON data of the target component is inserted into the sub-JSON data of the preset component in the overall JSON data.

5. The method according to claim 1, characterized in that, The step of obtaining the target component and / or the component logical relationship between different target components set by the user based on the visual editing canvas, and updating the visual editing canvas and the overall JSON data according to the component logical relationship, includes: Obtain the component constraints of the target component set by the user based on the visual editing canvas, wherein the component constraints include at least one of length constraints, size constraints, rule constraints, and required constraints; Obtain the component behavior of the target component set by the user based on the visual editing canvas, wherein the component behavior includes at least one of template placeholder, API call request, jump link, and data summation; Obtain the verification method and corresponding verification rules of the target component set by the user based on the visual editing canvas. The verification method includes at least one of synchronous verification, asynchronous verification, and third-party verification. The verification rules include: null value verification rules and regular expression verification rules. The component linkage relationship between different target components set by the user based on the visual editing canvas is obtained. The component linkage relationship includes: control relationship, data update relationship, dynamic verification relationship, and data linkage relationship between different target components. The sub-JSON data of the target component is updated based on the component constraints, component behaviors, validation rules, and component linkage relationships. The visual editing canvas and the overall JSON data are then updated based on the updated sub-JSON data of the target component.

6. The method according to claim 5, characterized in that, The step of obtaining the template placeholder for the target component set by the user based on the visual editing canvas includes: Obtain the template placeholder set by the user, wherein the template placeholder contains a preset dynamic field and custom text; The template placeholder is parsed, and the field path of the target component is determined based on the parsed preset dynamic fields to obtain the template placeholder.

7. The method according to claim 5, characterized in that, The step of obtaining the control relationships between different target components set by the user based on the visual editing canvas includes: Determine the control value type of the first target component that acts as the controller among the different target components; The control conditions between the first target component and the second target component, which is the controlled party, are determined based on the control value type. If the number of components in the first target component is at least two, then the logical relationship between the control conditions corresponding to the multiple first target components is determined.

8. The method according to claim 1, characterized in that, The process of parsing the overall JSON data to determine the layout and component type of the target component, and rendering the visual editing canvas based on the layout and component type to obtain the target form corresponding to the target scene, includes: The overall JSON data is parsed to determine the first layout method for different target components. The first layout method includes: the number of grids, the label alignment method, and the label width. If the target component is a table-type component or a container-type component, then determine the second layout method of the sub-components in the target component; Determine the component type of the target component, and determine the corresponding input component based on the component type; The visual editing canvas is rendered according to the first layout method, the second layout method, and the input component to obtain the target form corresponding to the target scene.

9. The method according to claim 1, characterized in that, After updating the overall JSON data, the method further includes: Add the modification to the pre-built history stack; Listen for undo or redo operations; Upon detecting the undo operation, the modification operation on the entire JSON data is undone, and the modification operation is deleted from the history stack; Upon detecting the restore operation, restore the modification operation of the entire JSON data and re-add the modification operation to the pre-built history stack.

10. A form builder, characterized in that, include: A canvas layer, a data layer, a rendering layer, and a logic layer, wherein the canvas layer, the data layer, the rendering layer, and the logic layer work together to execute the form construction method according to any one of claims 1 to 9.

Images