Dynamic form design method fusing high and low codes and related products

Abstract

The invention discloses a dynamic form design method fusing high and low codes and a related product, which can be applied to the technical field of computers, and the method comprises the following steps: constructing a basic design form; calling a preset component and a user-defined component from a component library of the form designer supporting expansion based on a low-code mode, and adding the preset component and the user-defined component to corresponding positions of the form; the preset component is pre-developed by a developer in a high-code mode and stored in a component library; the user-defined component is designed and developed by the user by using a form designer supporting expansion and is transmitted to the component library through a high-code expansion interface in order to meet the customized business requirement of the user; configuring components; and fusing a form configured by a user into a high-code form by using a multiplex rendering engine constructed based on a high-code technology, and carrying out joint rendering to realize the design of a dynamic form fusing high and low codes. Therefore, the form is designed by adopting a method of fusing high and low codes, the design efficiency is improved, and the development cost is reduced.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a dynamic form design method integrating high and low codes and related products. Background Art

[0002] In the field of forms, the growing demand for user-defined fields and the problem that traditional static forms cannot be flexibly customized on-site in the process of meeting business needs have caused us to invest a lot of development resources in repetitive development.

[0003] Specifically, the existing form design method is generally to manually write Web code. This method is highly flexible and can meet complex business requirements, but it requires a lot of development work, which is time-consuming and leads to a long development cycle, and it is difficult to meet the flexible customization needs of users on site. In addition, as the business expands, the exponential number of modules also leads to exponential duplication, and the maintenance cost of the system in the future also increases exponentially. In other words, the existing technology has the problems of low design efficiency and high development cost.

[0004] Therefore, how to reduce development costs while ensuring the efficiency of dynamic form design is an urgent problem that technicians in this field need to solve. Summary of the invention

[0005] Based on the above problems, the present application provides a dynamic form design method and related products that integrate high and low codes. The method of integrating high and low codes is used to design dynamic forms, which solves the problems of low design efficiency and high development cost in the prior art.

[0006] In a first aspect, the present application provides a dynamic form design method integrating high and low code, including:

[0007] Get the user's login feedback;

[0008] Building a basic structure of the form based on the login feedback to obtain a basic design form;

[0009] In response to the user's dragging instruction, the corresponding preset components and custom components are retrieved from the component library of the form designer supporting extensions based on a low-code method, and the custom components and the preset components are added to the corresponding positions of the basic design form to obtain a first configuration form; the preset components are pre-developed by developers in a high-code method and stored in the component library; the custom components are independently designed and developed by the user using the form designer supporting extensions and transmitted to the component library through a high-code expansion interface in order to meet the customized business needs of the user;

[0010] In response to the configuration instruction of the user, the preset component and the custom component are configured accordingly based on the basic configuration function of the form designer to obtain a second configuration form;

[0011] The second configuration form configured by the user through the form designer is integrated into the high-code form using a reusable rendering engine built based on high-code technology, and the second configuration form is jointly rendered, thereby realizing the design of a dynamic form integrating high and low codes.

[0012] Optionally, before the step of calling corresponding preset components and custom components from a component library of a form designer supporting extensions in a low-code manner in response to the user's drag command, the step further includes:

[0013] Integrate the custom component into the component library of the form designer so that the custom component can interact with the preset components in the component library and have configurable properties and events.

[0014] Optionally, before integrating the custom component into the component library of the form designer, the method further includes:

[0015] Initialize the component design project based on the form designer scaffolding;

[0016] Based on the design project and the building function of the form designer, developing custom components and packaging them into component packages that can be recognized by the form designer;

[0017] The component package is uploaded to the component management system of the form designer.

[0018] Optionally, the basic structure of the form is constructed based on the login feedback to obtain a basic design form, including:

[0019] When the login feedback is successful login, obtaining the construction instruction of the user;

[0020] When the construction instruction is to create a new form, a new form project is created and the form project is named and page settings are performed based on the needs of the user to obtain a basic design form;

[0021] When the construction instruction is to select an existing project, a corresponding form project is selected as a basic design form based on the construction instruction.

[0022] Optionally, in response to the configuration instruction of the user, the preset component and the custom component are configured accordingly based on the basic configuration function of the form designer to obtain a second configuration form, including:

[0023] Reading the configuration instructions of the user;

[0024] Based on the business requirements corresponding to the configuration instructions, the function options of each preset component and each custom component are configured using the basic configuration function of the form designer;

[0025] Based on the business requirements corresponding to the configuration instructions, the conditional logic between each preset component and each custom component configured with function options and the interaction events between each preset component and each custom component are configured using the basic configuration function of the form designer;

[0026] Based on the business requirements corresponding to the configuration instructions, the basic configuration function of the form designer is used to bind each preset component and each custom component configured with conditional logic and interactive events to the corresponding data source to obtain a second configuration form.

[0027] Optionally, before the second configuration form configured by the user through the form designer is integrated into the high-code form by using the reusable rendering engine built based on the high-code technology, and the second configuration form is jointly rendered to realize the design of the integrated high-code and low-code dynamic form, the method further includes:

[0028] Based on the preset verification rules, test whether the second configuration form can work normally;

[0029] If yes, then render the second configuration form;

[0030] If not, the second configuration form is not rendered and a prompt indicating the test failure is fed back to the user to remind the user to modify the design of the second configuration form.

[0031] Optionally, the second configuration form is jointly rendered using a multiplexed rendering engine built based on high-code technology, thereby realizing the design of a dynamic form integrating high and low codes, including:

[0032] A reusable rendering engine built based on high-code technology is used to configure business items for the second configuration form and render the business items, thereby realizing the design of a dynamic form that integrates high and low codes.

[0033] In a second aspect, the present application provides a dynamic form design device integrating high and low code, comprising:

[0034] The acquisition module is used to obtain the user's login feedback;

[0035] A construction module, used to construct a basic structure of a form based on the login feedback to obtain a basic design form;

[0036] A calling module, for calling corresponding preset components and custom components from a component library of a form designer supporting extensions in response to a drag command of the user based on a low-code method, and adding the custom components and the preset components to corresponding positions of the basic design form to obtain a first configuration form; the preset components are pre-developed by developers in a high-code method and stored in the component library; the custom components are independently designed and developed by the user using the form designer supporting extensions and transmitted to the component library through a high-code extension interface in order to meet the customized business needs of the user;

[0037] A configuration module, configured to respond to the configuration instruction of the user and configure the preset component and the custom component accordingly based on the basic configuration function of the form designer to obtain a second configuration form;

[0038] The rendering module is used to use a reusable rendering engine built based on high-code technology to merge the second configuration form configured by the user through the form designer into the high-code form, and jointly render the second configuration form, thereby realizing the design of a dynamic form that integrates high and low codes.

[0039] In a third aspect, the present application provides a dynamic form design device integrating high and low codes, characterized in that it includes:

[0040] Memory for storing computer programs;

[0041] A processor is used to implement the steps of the dynamic form design method integrating high and low codes as described in any of the above items when executing the computer program.

[0042] In a fourth aspect, the present application provides a readable storage medium, characterized in that a computer program is stored on the readable storage medium, and when the computer program is executed by a processor, the steps of the dynamic form design method integrating high and low codes as described in any of the above items are implemented.

[0043] It can be seen from the above technical solutions that compared with the prior art, the present application has the following advantages:

[0044] The present application first obtains the user's login feedback; and builds the basic structure of the form based on the login feedback to obtain the basic design form. Then, in response to the user's drag and drop instruction, the corresponding preset components and custom components are retrieved from the component library of the form designer that supports extensions based on the low-code method, and the custom components and preset components are added to the corresponding positions of the basic design form to obtain the first configuration form. Among them, the preset components are pre-developed and stored in the component library by the developer in a high-code method; the custom components are designed and developed by the user using the form designer that supports extensions to meet the customized business needs of the user, and are transmitted to the component library through the high-code extension interface. Then, in response to the user's configuration instructions, the preset components and custom components are configured accordingly based on the basic configuration function of the form designer to obtain the second configuration form. Finally, the second configuration form configured by the user through the form designer is integrated into the high-code form using a reusable rendering engine built based on high-code technology, and the second configuration form is jointly rendered, thereby realizing the design of a dynamic form that integrates high and low codes. In this way, the design of dynamic forms is carried out by adopting a method that integrates high and low codes, which improves design efficiency and reduces development costs. BRIEF DESCRIPTION OF THE DRAWINGS

[0045] Figure 1 A flowchart of a form designer for designing a form provided in this application;

[0046] Figure 2 A flowchart of a dynamic form design method integrating high and low code provided for this application;

[0047] Figure 3 A framework diagram of a form designer provided for this application;

[0048] Figure 4 A form configuration data flow diagram provided for this application;

[0049] Figure 5 A schematic diagram of a multiplexed rendering engine that integrates high and low code provided by this application;

[0050] Figure 6 A schematic diagram of the operation of a business module rendering engine provided for this application;

[0051] Figure 7 A schematic diagram of a list page rendering provided for this application;

[0052] Figure 8 A multi-terminal adaptation schematic diagram provided for this application;

[0053] Fig. 9 A schematic diagram of a form designer extension component provided for this application;

[0054] Fig.10 A schematic diagram of a component library layered architecture provided for this application;

[0055] Fig.11 A schematic diagram of a component library workflow provided for this application;

[0056] Fig.12 A structural diagram of a dynamic form design device integrating high and low codes provided in this application;

[0057] Fig.13 A schematic diagram of the operation of a rendering engine of a dynamic form design device integrating high and low codes provided in this application. DETAILED DESCRIPTION

[0058] As mentioned above, existing dynamic form design methods have the problems of low design efficiency and high development cost.

[0059] In order to solve the above problems, the present application provides a dynamic form design method integrating high and low codes, including: first obtaining the user's login feedback; and building the basic structure of the form based on the login feedback to obtain a basic design form. Then, in response to the user's drag and drop instruction, the corresponding preset components and custom components are retrieved from the component library of the form designer supporting extensions based on the low-code method, and the custom components and preset components are added to the corresponding positions of the basic design form to obtain a first configuration form. Among them, the preset components are pre-developed and stored in the component library by the developer in a high-code method; the custom components are designed and developed by the user using the form designer supporting extensions to meet the customized business needs of the user and transmitted to the component library through the high-code extension interface. Then, in response to the user's configuration instructions, the preset components and custom components are configured accordingly based on the basic configuration function of the form designer to obtain a second configuration form. Finally, the second configuration form configured by the user through the form designer is integrated into the high-code form using a reusable rendering engine built based on high-code technology, and the second configuration form is jointly rendered, thereby realizing the design of a dynamic form integrating high and low codes.

[0060] In this way, the dynamic form design is carried out by integrating high and low code methods, which improves the design efficiency and reduces the development cost.

[0061] It should be noted that the dynamic form design method and related products provided by this application that integrate high and low codes can be applied to the field of computer technology. The above is only an example and does not limit the application field of the dynamic form design method and related products provided by this application that integrate high and low codes.

[0062] In order to make the purpose, technical solution and advantages of the embodiments of the present application clearer, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0063] This application implements form configuration based on the form designer. Specifically, Figure 1 A flowchart of a form designer for designing a form provided in this application. Figure 1 As shown, the user logs in to the form designer system and can drag components to the form designer, which then configures component properties, adjusts the interface layout, performs data binding, previews, debugs, saves, and publishes. Configuration of component properties includes option configuration, validation rule configuration, conditional logic configuration, and interactive event configuration. Figure 2 A flowchart of a dynamic form design method that integrates high and low code is provided for this application. Figure 2 As shown, a dynamic form design method integrating high and low codes provided by the present application may include:

[0064] S201: Obtain login feedback from the user.

[0065] In actual application, the user first logs in to the form designer system, and obtains login feedback from the dynamic form design device integrating high and low codes. It can be understood that the form designer provided by this application is a platform that supports expansion and integrates high and low codes. The system can be set up so that users can log in with a specific account and password or directly click to log in.

[0066] S202: constructing a basic structure of a form based on the login feedback to obtain a basic design form.

[0067] In actual application, after the user successfully logs in to the form designer system, the basic structure of the form can be constructed, specifically, the form can be named and whether the form needs to be divided into multiple pages or parts, thereby obtaining a basic design form.

[0068] In addition, since there are different ways to construct the basic structure of a form, this application can describe one possible construction method.

[0069] In one case, regarding how to construct the basic structure of a form, correspondingly, S202: constructing the basic structure of the form based on the login feedback to obtain a basic design form, which may specifically include:

[0070] When the login feedback is successful login, obtaining the construction instruction of the user;

[0071] When the construction instruction is to create a new form, a new form project is created and the form project is named and page settings are performed based on the needs of the user to obtain a basic design form;

[0072] When the construction instruction is to select an existing project, a corresponding form project is selected as a basic design form based on the construction instruction.

[0073] In actual applications, assuming that the form designer system needs to log in through a specific account and password, when the user enters the correct account and password, the login feedback obtained by the dynamic form design device integrating high and low codes should be a successful login, then the dynamic form design device integrating high and low codes begins to wait for the user's build instructions. When the user's build instruction is to create a new form, a new form project is created, that is, a blank form, and the form is named based on the user's needs. And determine whether the form needs to be divided into multiple pages or parts. When the user's build instruction is to select an existing project, the dynamic form design device integrating high and low codes will select the user-specified historical form project as the basic design form based on a series of operations such as user clicks and perform subsequent design.

[0074] S203: In response to the user's dragging instruction, the corresponding preset components and custom components are retrieved from the component library of the form designer that supports extensions based on a low-code method, and the custom components and the preset components are added to the corresponding positions of the basic design form to obtain a first configuration form; the preset components are pre-developed by developers in a high-code method and stored in the component library; the custom components are independently designed and developed by the user using the form designer that supports extensions to meet the user's customized business needs, and are transmitted to the component library through a high-code extension interface.

[0075] In actual applications, the basic design form generally only includes naming and basic structure, and further design is required. Figure 3 A framework diagram of a form designer provided for this application. Figure 3As shown, the form designer includes two functional modules, Schema Generator and Form Viewer, input controls, non-input controls (layout) and other component modules. Each module has its corresponding function, and the design of the dynamic form can be realized through the user's dragging, clicking and other actions. Specifically, when the user drags a control to a certain position in the basic design form, the dynamic form design device integrating high and low codes will recognize the user's drag command, and retrieve the corresponding preset components and custom components, such as text boxes, drop-down boxes, radio buttons, etc., from the component library of the form designer that supports extensions based on the low code method, and add them to the corresponding position of the basic design form to obtain the first configuration form. It should be noted that each preset component and custom component added to the basic design form should be configured with basic properties such as name, label, default value, etc. The preset components are pre-developed by developers in a high code method and stored in the component library. Custom components are designed and developed by users independently using the form designer that supports extensions and transmitted to the component library through the high code extension interface to meet the customized business needs of users. Specifically, based on the customized business needs of users, users can use the extended interface provided by the form designer to develop custom components. These components can be customized UI elements for specific business needs, or interactive modules that perform specific functions. For example, for dynamic forms, customized complex input controls, data processing modules, etc. can be developed. When actually designing a form, the dynamic form design device that integrates high and low codes can obtain custom components corresponding to customized business needs from the component library based on the customized business needs of users, and then implement the design of dynamic forms based on the custom components and the corresponding preset components retrieved from the component library according to the dynamic form design method that integrates high and low codes provided above.

[0076] S204: In response to the configuration instruction of the user, the preset components and the custom components are configured accordingly based on the basic configuration function of the form designer to obtain a second configuration form.

[0077] In actual applications, after the preset components and the custom components are laid out and the first configuration form is obtained, the preset components and the custom components need to be configured accordingly. Specifically, the user uses the basic configuration function of the form designer to issue configuration instructions through a series of actions such as clicking and inputting. The dynamic form design device integrating high and low codes will configure component options, conditional logic, and define interactive events for the preset components and the custom components according to the user's configuration instructions, thereby obtaining a second configuration form. In addition, the user can also adjust the page layout of the form, such as setting the number of columns, row height, and spacing.

[0078] In addition, since the configuration methods of the preset components are not the same, the present application can describe one possible configuration method.

[0079] In one case, regarding how to configure the preset component, correspondingly, S204: in response to the configuration instruction of the user, the preset component and the custom component are configured accordingly based on the basic configuration function of the form designer to obtain a second configuration form, which may specifically include:

[0080] Reading the configuration instructions of the user;

[0081] Based on the business requirements corresponding to the configuration instructions, the function options of each preset component and each custom component are configured using the basic configuration function of the form designer;

[0082] Based on the business requirements corresponding to the configuration instructions, the conditional logic between each preset component and each custom component configured with function options and the interaction events between each preset component and each custom component are configured using the basic configuration function of the form designer;

[0083] Based on the business requirements corresponding to the configuration instructions, the basic configuration function of the form designer is used to bind each preset component and each custom component configured with conditional logic and interactive events to the corresponding data source to obtain a second configuration form.

[0084] In actual applications, users can issue configuration instructions by clicking, dragging, and inputting. The dynamic form design device integrating high and low codes interprets the configuration instructions and determines the business needs of users. For example, business needs include configuring component options, configuring conditional logic, and defining interactive events. Then the dynamic form design device integrating high and low codes uses the basic configuration function of the form configurator to first further configure specific options for each preset component and each custom component, such as the option list of the drop-down box, the options of the radio button, etc., so as to realize the configuration of functional options. For complex components, such as date pickers, file uploads, etc., more options and functions need to be set. Then configure the conditional logic between each field, that is, the display, hiding, and disabling of certain preset components and custom components are affected by the values ​​of other fields. In addition, the dynamic form design device integrating high and low codes also needs to configure the interactive events of each preset component and each custom component, such as button clicks and option selections, to trigger corresponding actions, such as displaying / hiding components, calling APIs, running logic, and executing workflows. Finally, the dynamic form design device integrating high and low codes needs to perform two-way or one-way binding of the preset components and custom components in the first configuration form with the data source to ensure that the input and data remain synchronized, thereby obtaining the second configuration form.

[0085] Figure 4 A schematic diagram of the data flow of a form configuration provided for this application. Figure 4 As shown, it can be understood that the preset components and the custom components include two parts: component logic and component configuration. After the components in the component library are registered in the form designer, they are displayed to the user in the form of draggable components. The user drags the components to generate a form, and then completes the form design through component attribute configuration, field attribute configuration, and container attribute configuration, and finally saves and publishes the form. It should be noted that a field is a business unit in the form, corresponding to a value in the form.

[0086] S205: Utilize a reusable rendering engine built based on high-code technology to merge the second configuration form configured by the user through the form designer into the high-code form, and jointly render the second configuration form, thereby realizing the design of a dynamic form integrating high and low codes.

[0087] In actual applications, when building a business module using a low-code platform, in addition to configuring the form page, it is also necessary to build a list page, a detail page, an edit page, and other business pages, etc., and the logic of these pages is common between each module. Therefore, the present invention integrates high-code technology, uses high code to abstract the common logic of each page, and develops it into a rendering engine that can be reused between business modules, so that building a business module only requires configuring the form page, which greatly saves the cost of building. Figure 5 A schematic diagram of a multiplexed rendering engine that combines high and low code provided by this application. Figure 5 As shown, for the form developed with high code, the joint rendering technology of the reusable engine is used to jointly render the second configuration form built with low code, thereby realizing the design of dynamic forms that integrate high and low code, reducing development costs and improving design efficiency.

[0088] In addition, since the methods of rendering the second configuration form are different, the present application may describe a possible rendering method.

[0089] In one case, regarding how to render the second configuration form, the method of using a multiplexed rendering engine built based on high-code technology to jointly render the second configuration form, thereby realizing the design of a dynamic form integrating high and low code, may specifically include:

[0090] A reusable rendering engine built based on high-code technology is used to configure business items for the second configuration form and render the business items, thereby realizing the design of a dynamic form that integrates high and low codes.

[0091] In actual applications, if the configured second configuration form wants to render the add, delete, modify, and query pages of the business module, it is necessary to configure some business attributes, such as the interface address for submitting the form, the authority to view the form data, and so on. Figure 6 A schematic diagram of the operation of a business module rendering engine provided by this application. Figure 6 As shown, the configured form will be rendered synchronously as the add page, edit page, detail page and list page. Specifically, users can also configure different forms for the computer or mobile terminal. The designed second configuration form also needs to configure the add, edit and list task items, and render the task items, such as configuring the list to parse, search escape, search rendering and list rendering, so as to realize the design of dynamic forms.

[0092] Figure 7 A schematic diagram of a list page rendering provided for this application. Figure 7 As shown, after the form configuration is parsed, metadata is generated based on QueryList, QueryTable, and QueryForm, and the list page is rendered.

[0093] Figure 8 A multi-terminal adaptation principle diagram provided in this application. Figure 8 As shown in the figure, the core of the form designer includes FormGraph, Models, Path System, Lifecycles, Validator, Form and Json Schema. For the adaptation of different terminals, the core of the form designer should be reused. An adaptation layer is added between the core of the form designer and the form application to adapt to different terminals. The adaptation layer is connected to the component library, and is connected to the PC component library and the Mobile component library according to the type of terminal. The PC component library includes Input, Select, InputNumber, Swich, DatePicker, Checkbox, Radio and TreeSelect, etc. The Mobile component library includes Input, Select, Picker, Switch, CheckList, Popup, Toast and Badge, etc. The functions that can be realized by the adaptation layer include canvas support for mobile terminal component display, support for screen type switching, specified screen type and mobile terminal simulation debugger. The form configuration is completed through the graphical form designer, and then the business module corresponding to the form is rendered using the reused rendering engine. After completing the above operations, you can launch a typical form business module. Configuring a business module can bring multi-terminal application effects, avoid the problem of repeated development on multiple terminals, and greatly improve the efficiency of developing forms.

[0094] In addition, since the second configuration form needs to be tested before rendering and the testing methods are different, the present application can describe a possible testing method.

[0095] In one case, regarding how to test the second configuration form, the method further includes:

[0096] Based on the preset verification rules, test whether the second configuration form can work normally;

[0097] If yes, then render the second configuration form;

[0098] If not, the second configuration form is not rendered and a prompt indicating the test failure is fed back to the user to remind the user to modify the design of the second configuration form.

[0099] In actual applications, users need to set validation rules for preset components in advance, such as required fields, format verification, maximum or minimum length, etc. In addition, custom validation rules can be set for numerical ranges, date ranges, etc. In this way, after obtaining the second configuration form, the user can click the preview function button in the form designer, and the dynamic form design device integrating high and low codes can feedback the actually generated form page to the user based on this action and enter the test. Specifically, the user can choose to input data, and the dynamic form design device integrating high and low codes tests the second configuration form based on the input data and validation rules to verify whether the second configuration form can work properly. If it can, the process of rendering the second configuration form is started; if it cannot, the process of rendering the second configuration form is not started and the user is fed back a prompt of test failure, reminding the user to modify the design of the second configuration form. In addition, the user can also save the above-mentioned second configuration form by clicking the save button in the form designer, store it in a database or configuration file, and if necessary, publish the form at an appropriate time so that it can be accessed and filled in by other users.

[0100] In addition, since the processing methods of developed custom components are different, this application can illustrate one possible processing method.

[0101] In one case, regarding how to handle custom components, the method further includes:

[0102] Integrate the custom component into the component library of the form designer so that the custom component can interact with the preset components in the component library and have configurable properties and events.

[0103] In actual applications, a centralized component library management system is provided in the form designer, allowing users to integrate custom components into the form designer. Users can upload developed components to the component library of the form designer for use by other developers. Specifically, the user can issue instructions, and the dynamic form design device that integrates high and low codes can perform the integration action. It should be noted that custom components should be able to interact with the built-in components of the form designer to achieve complex functions. To achieve this, the form designer needs to provide the necessary APIs and events to communicate with the form designer inside the custom component. In addition, the custom component should also have the ability to interact with the built-in data model and services of the form designer, as well as configurable properties and events, allowing users to flexibly configure it when using it. In this way, users can adjust the appearance, behavior, and data interaction of the component according to different usage scenarios. Finally, in order to support users to quickly get started and use custom components correctly, the form designer provides clear documentation and examples. These resources can help users understand how to develop, integrate, and use custom components.

[0104] In addition, since there are different ways to construct custom components, the embodiments of the present application can illustrate one possible construction method.

[0105] In one embodiment, before integrating the custom component into the component library of the form designer, the method further includes:

[0106] Initialize the component design project based on the scaffolding provided by the form designer;

[0107] Based on the design project and the building function of the form designer, developing custom components and packaging them into component packages that can be recognized by the form designer;

[0108] The component package is uploaded to the component management system of the form designer.

[0109] Fig. 9 A schematic diagram of a form designer extension component provided for this application. Fig. 9As shown, the existing components may not be sufficient to meet user requirements, so it is necessary to expand the components. The user first determines whether the components need to be expanded. If necessary, enter the custom component development process. Custom components can be developed by users based on the form designer to achieve component expansion. Specifically, first use the scaffolding provided by the form designer to initialize the component project, that is, initialize the project. The scaffolding provides component templates, dependency package management, and debugging preview capabilities out of the box. After initializing the project, users can build custom components based on the built-in building functions of the scaffolding, that is, develop components, develop component configuration properties, and debug preview. After the custom component is developed, it can be packaged into a component package that can be recognized by the form designer platform, that is, build packaging. Finally, upload the component package to the form designer component management system.

[0110] Fig.10 A schematic diagram of a component library layered architecture provided for this application. Fig.10 As shown, in order to achieve specific business needs, it is inevitable to develop business components to expand the form designer. The management of these business components largely determines the ability of the form designer to expand. The component management system designed in the present invention adopts a layered architecture design scheme, including document Doc, specification Spec, sample Demo, integrated delivery CICD, AntD, X-Design and X-Design-MOM, Antd-Mobile and X-Design-Mobile, and has the following characteristics. Specifically, it includes modular organization: the layered architecture divides the component library into multiple independent modules, each module represents a class of related components. This organization method makes the functions and responsibilities of each module clear and clear; decoupling: the coupling between each level is reduced, and the modules communicate through clearly defined interfaces. This decoupling makes it possible for modifications between components to not affect other parts, thereby improving maintainability and scalability; logical separation: different levels handle different logics, such as interface rendering, data processing, business logic, etc. This logical separation helps to make the code neater and easier to understand; scalability: the layered architecture makes it easier to expand the component library. New components can be added to the layer they belong to without affecting other parts; Code reuse: Layered architecture can promote code reuse. Similar functions or logic can be reused in different modules, reducing the need for repeated code writing; and complete workflow.

[0111] Fig.11 A component library workflow diagram provided for this application. Fig.11As shown, the component library integrates eslint, stylelint, commitlint, prettier, vscode, standardjs, husky, lint-staged, commitizen, etc., to achieve full automation, which can ensure quality and improve the efficiency of component development. Developers design and publish components, and component users can obtain related components and apply them based on the component library document site and NPM private warehouse.

[0112] In summary, the present application first obtains the user's login feedback; and builds the basic structure of the form based on the login feedback to obtain a basic design form. Then, in response to the user's drag and drop instruction, the corresponding preset components and custom components are retrieved from the component library of the form designer that supports extensions based on a low-code method, and the custom components and preset components are added to the corresponding positions of the basic design form to obtain a first configuration form. Among them, the preset components are pre-developed and stored in the component library by developers in a high-code manner; the custom components are designed and developed by the user using the form designer that supports extensions to meet the customized business needs of the user and are transmitted to the component library through the high-code extension interface. Then, in response to the user's configuration instructions, the preset components and custom components are configured accordingly based on the basic configuration function of the form designer to obtain a second configuration form. Finally, the reusable rendering engine built based on high-code technology is used to integrate the user's configuration through the form designer into the high-code form, and the second configuration form is jointly rendered, thereby realizing the design of a dynamic form that integrates high and low codes. In this way, the design of dynamic forms is carried out by adopting a method of integrating high and low codes, which improves design efficiency and reduces development costs.

[0113] Based on the above embodiment, a dynamic form design method integrating high and low codes is provided, and the present application also provides a dynamic form design device integrating high and low codes. The dynamic form design device integrating high and low codes is described below in combination with the embodiments and drawings.

[0114] Fig.12 A schematic diagram of the structure of a dynamic form design device that integrates high and low code provided by this application. Fig.12 As shown, the dynamic form design device 1200 integrating high and low codes provided in the embodiment of the present application includes:

[0115] The acquisition module 1201 is used to obtain the user's login feedback;

[0116] A construction module 1202 is used to construct a basic structure of a form based on the login feedback to obtain a basic design form;

[0117] The calling module 1203 is used for calling corresponding preset components and custom components from the component library of the form designer supporting extensions in response to the dragging instruction of the user based on the low-code method, and adding the custom components and the preset components to the corresponding positions of the basic design form to obtain the first configuration form; the preset components are pre-developed by developers in a high-code method and stored in the component library; the custom components are independently designed and developed by the user using the form designer supporting extensions and transmitted to the component library through the high-code extension interface in order to meet the customized business needs of the user;

[0118] A configuration module 1204, configured to respond to the configuration instruction of the user and configure the preset component and the custom component accordingly based on the basic configuration function of the form designer to obtain a second configuration form;

[0119] The rendering module 1205 is used to use a reusable rendering engine built based on high-code technology to integrate the second configuration form configured by the user through the form designer into the high-code form, and jointly render the second configuration form, thereby realizing the design of a dynamic form that integrates high and low code.

[0120] As an implementation method, with respect to how to construct the basic structure of a form to obtain a basic design form, the construction module 1202 is specifically used for:

[0121] When the login feedback is successful login, obtaining the construction instruction of the user;

[0122] When the construction instruction is to create a new form, a new form project is created and the form project is named and page settings are performed based on the needs of the user to obtain a basic design form;

[0123] When the construction instruction is to select an existing project, a corresponding form project is selected as a basic design form based on the construction instruction.

[0124] As an implementation manner, regarding how to configure the preset components, the configuration module 1204 is specifically used to:

[0125] Reading the configuration instructions of the user;

[0126] Based on the business requirements corresponding to the configuration instructions, the function options of each preset component and each custom component are configured using the basic configuration function of the form designer;

[0127] Based on the business requirements corresponding to the configuration instructions, the conditional logic between each preset component and each custom component configured with function options and the interaction events between each preset component and each custom component are configured using the basic configuration function of the form designer;

[0128] Based on the business requirements corresponding to the configuration instructions, the basic configuration function of the form designer is used to bind each preset component and each custom component configured with conditional logic and interactive events to the corresponding data source to obtain a second configuration form.

[0129] As an implementation method, with respect to how to test the second configuration form, the above-mentioned dynamic form design device 1200 integrating high and low codes further includes: a testing module;

[0130] A testing module, used to test whether the second configuration form can work normally based on preset verification rules;

[0131] If yes, then render the second configuration form;

[0132] If not, the second configuration form is not rendered and a prompt indicating the test failure is fed back to the user to remind the user to modify the design of the second configuration form.

[0133] As an implementation manner, regarding how to render the second configuration form, the rendering module 1205 is specifically used to:

[0134] A reusable rendering engine built based on high-code technology is used to jointly render the second configuration form, thereby realizing the design of a dynamic form that integrates high and low code.

[0135] Fig.13 A schematic diagram of the operation of a rendering engine for a dynamic form design device that integrates high and low code provided by this application. Fig.13 As shown, when the platform launches the high-code form business module, it integrates the form designer to generate the second configuration form based on the high-code form configuration, and uses the reusable rendering engine built based on high-code technology to jointly render the second configuration form, thereby realizing the design of dynamic forms that integrate high and low codes.

[0136] As an implementation method, in order to realize customized design, the above-mentioned dynamic form design device 1200 integrating high and low codes further includes: an integration module;

[0137] The integration module is used to integrate the custom component into the component library of the form designer, so that the custom component can interact with the preset components in the component library and have configurable properties and events.

[0138] As an implementation method, with respect to how to construct a custom component, the above-mentioned dynamic form design device 1200 integrating high and low codes further includes: an expansion module;

[0139] Extension module, used for scaffolding based on form designer, initializing component design engineering;

[0140] Based on the design project and the building function of the form designer, developing custom components and packaging them into component packages that can be recognized by the form designer;

[0141] The component package is uploaded to the component management system of the form designer.

[0142] In summary, the present application first obtains the user's login feedback; and builds the basic structure of the form based on the login feedback to obtain the basic design form. Then, in response to the user's drag and drop instruction, the corresponding preset components and custom components are retrieved from the component library of the form designer that supports extensions based on the low-code method, and the custom components and preset components are added to the corresponding positions of the basic design form to obtain the first configuration form. Among them, the preset components are pre-developed and stored in the component library by the developer in a high-code method; the custom components are designed and developed by the user using the form designer that supports extensions to meet the customized business needs of the user, and are transmitted to the component library through the high-code extension interface. Then, in response to the user's configuration instructions, the preset components and custom components are configured accordingly based on the basic configuration function of the form designer to obtain the second configuration form. Finally, the second configuration form configured by the user through the form designer is integrated into the high-code form using a reusable rendering engine built based on high-code technology, and the second configuration form is jointly rendered, thereby realizing the design of a dynamic form that integrates high and low codes. In this way, the design of dynamic forms is carried out by adopting a method that integrates high and low codes, which improves design efficiency and reduces development costs.

[0143] In addition, the present application also provides a dynamic form design device that integrates high and low codes, including: a memory for storing a computer program; a processor for implementing the steps of the dynamic form design method that integrates high and low codes as described in any of the above items when executing the computer program.

[0144] In addition, the present application also provides a readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the steps of the dynamic form design method integrating high and low codes as described in any of the above items are implemented.

[0145] The above description of the disclosed embodiments enables those skilled in the art to implement or use the present application. Various modifications to these embodiments will be apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present application. Therefore, the present application will not be limited to the embodiments shown herein, but will conform to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A dynamic form design method integrating high and low code, characterized in that: The method comprises: Get the user's login feedback; Building a basic structure of the form based on the login feedback to obtain a basic design form; In response to the user's dragging instruction, the corresponding preset components and custom components are retrieved from the component library of the form designer supporting extensions based on a low-code method, and the custom components and the preset components are added to the corresponding positions of the basic design form to obtain a first configuration form; the preset components are pre-developed by developers in a high-code method and stored in the component library; the custom components are independently designed and developed by the user using the form designer supporting extensions and transmitted to the component library through a high-code expansion interface in order to meet the customized business needs of the user; In response to the configuration instruction of the user, the preset component and the custom component are configured accordingly based on the basic configuration function of the form designer to obtain a second configuration form; The second configuration form configured by the user through the form designer is integrated into the high-code form using a reusable rendering engine built based on high-code technology, and the second configuration form is jointly rendered, thereby realizing the design of a dynamic form integrating high and low codes.

2. The method according to claim 1, characterized in that Before the corresponding preset components and custom components are retrieved from the component library of the form designer supporting extensions based on the low-code method in response to the user's drag command, the method further includes: Integrate the custom component into the component library of the form designer so that the custom component can interact with the preset components in the component library and have configurable properties and events.

3. The method according to claim 2, characterized in that Before integrating the custom component into the component library of the form designer, the following steps are also included: Initialize the component design project based on the form designer scaffolding; Based on the design project and the building function of the form designer, developing custom components and packaging them into component packages that can be recognized by the form designer; The component package is uploaded to the component management system of the form designer.

4. The method according to claim 1, characterized in that The basic structure of the form is constructed based on the login feedback to obtain a basic design form, including: When the login feedback is successful login, obtaining the construction instruction of the user; When the construction instruction is to create a new form, a new form project is created and the form project is named and page settings are performed based on the needs of the user to obtain a basic design form; When the construction instruction is to select an existing project, a corresponding form project is selected as a basic design form based on the construction instruction.

5. The method according to claim 1, characterized in that The step of correspondingly configuring the preset component and the custom component based on the basic configuration function of the form designer in response to the configuration instruction of the user to obtain a second configuration form includes: Reading the configuration instructions of the user; Based on the business requirements corresponding to the configuration instructions, the function options of each preset component and each custom component are configured using the basic configuration function of the form designer; Based on the business requirements corresponding to the configuration instructions, the conditional logic between each preset component and each custom component configured with function options and the interaction events between each preset component and each custom component are configured using the basic configuration function of the form designer; Based on the business requirements corresponding to the configuration instructions, the basic configuration function of the form designer is used to bind each preset component and each custom component configured with conditional logic and interactive events to the corresponding data source to obtain a second configuration form.

6. The method according to claim 1, characterized in that Before the method of using the reusable rendering engine built based on high-code technology to merge the second configuration form configured by the user through the form designer into the high-code form and jointly rendering the second configuration form to achieve the design of a dynamic form integrating high and low codes, the method further includes: Based on the preset verification rules, test whether the second configuration form can work normally; If yes, then render the second configuration form; If not, the second configuration form is not rendered and a prompt indicating the test failure is fed back to the user to remind the user to modify the design of the second configuration form.

7. The method according to claim 1, characterized in that The method of using a multiplexed rendering engine built based on high-code technology to jointly render the second configuration form, thereby realizing the design of a dynamic form integrating high and low codes, includes: A reusable rendering engine built based on high-code technology is used to configure business items for the second configuration form and render the business items, thereby realizing the design of a dynamic form that integrates high and low codes.

8. A dynamic form design device integrating high and low code, characterized in that: include: The acquisition module is used to obtain the user's login feedback; A construction module, used to construct a basic structure of a form based on the login feedback to obtain a basic design form; A calling module, for calling corresponding preset components and custom components from a component library of a form designer supporting extensions based on a low-code method in response to a drag command of the user, and adding the custom components and the preset components to corresponding positions of the basic design form to obtain a first configuration form; The preset components are pre-developed by developers in a high-code manner and stored in the component library; the custom components are designed and developed independently by the user using the form designer that supports extensions and are transmitted to the component library through a high-code extension interface in order to meet the customized business needs of the user; A configuration module, configured to respond to the configuration instruction of the user and configure the preset component and the custom component accordingly based on the basic configuration function of the form designer to obtain a second configuration form; The rendering module is used to use a reusable rendering engine built based on high-code technology to merge the second configuration form configured by the user through the form designer into the high-code form, and jointly render the second configuration form, thereby realizing the design of a dynamic form that integrates high and low codes.

9. A dynamic form design device integrating high and low code, characterized in that: include: Memory for storing computer programs; A processor is used to implement the steps of the dynamic form design method integrating high and low codes as described in any one of claims 1 to 7 when executing the computer program.

10. A readable storage medium, characterized in that: The readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the dynamic form design method integrating high and low codes as claimed in any one of claims 1 to 7 are implemented.

Images