Form configuration development method and system

Abstract

The invention provides a form configuration development method and system, and the method comprises the following steps: S1, form configuration: employing a visualization technology to provide a form configuration interface for a user; s2, constructing a dynamic form model; s3, obtaining platform support; s4, creating a form, namely creating a form form instance; s5, creating a container; s6, creating a form item: creating a form item, and configuring the form item; the invention provides a set of complete form customization solution which comprises the functions of a form configuration interface, generation and display of a dynamic form model, data storage and management and the like, so that a user can perform form customization and management conveniently; based on the design of the dynamic form model, the support for the complex form is realized, the flexibility and expandability of form customization are improved, and the software-as-a-service (SaaS)-platform-oriented form configuration development scheme solves the problems of inflexibility and high cost of a form customization tool.

Description

Technical Field

[0001] The present invention relates to a form configuration development method, in particular to a form configuration development method for a SaaS platform, and belongs to the technical field of form configuration. Background Art

[0002] SaaS platform is a service model that provides software applications through the Internet. In this service model, the software applications are hosted and maintained by a third-party provider and run in the cloud. Users use these software services through network connections without having to install or run software applications on local computers.

[0003] The form is mainly responsible for data collection in a web page. A form has three basic components: Form tag: This contains the URL of the CGI program used to process form data and the method of submitting data to the server. Form field: Contains text boxes, password boxes, hidden fields, multi-line text boxes, check boxes, radio buttons, drop-down selection boxes and file upload boxes. Form buttons: Includes submit buttons, reset buttons and general buttons; used to transmit data to the CGI script on the server or cancel input. Form buttons can also be used to control other processing tasks that define processing scripts.

[0004] Form customization tools refer to a type of software or service that allows developers or designers to create and customize forms through a visual interface or configurable settings. These tools provide rich functionality so that users can design unique and feature-rich forms according to their needs.

[0005] Traditional form customization tools usually have problems such as insufficient flexibility in form customization, insufficient support for complex forms, high development and maintenance costs, which affect the user experience and cannot meet the needs of different users. Therefore, a form configuration development method and system are proposed. Summary of the invention

[0006] In view of this, the present invention provides a form configuration development method and system to solve or alleviate the technical problems existing in the prior art, and at least provide a beneficial choice.

[0007] The technical solution of the embodiment of the present invention is implemented as follows: a form configuration development method comprises the following steps:

[0008] S1. Form configuration - using visualization technology to provide users with a form configuration interface;

[0009] S2. Build a dynamic form model;

[0010] S3. Obtain platform support;

[0011] S4. Create form - create a formily form instance;

[0012] S5. Create a container;

[0013] S6. Create form items - create formily form items and configure the form items;

[0014] S7. Render the formily form.

[0015] Further preferably, in S1, a form configuration interface is established by using visualization technology, so that the user can customize the form according to needs;

[0016] The customized content includes but is not limited to the form's fields, layout, checkboxes, lists, and validation rules.

[0017] Further preferably, the establishment of the form configuration interface includes: demand analysis, interface design, function configuration, element attribute configuration, data binding and verification, preview and export, interaction optimization and testing and feedback.

[0018] Further preferably, in S2, the dynamic form model is established based on the front-end HTML, CSS or JavaScript framework, and is used to dynamically generate the data structure and interface display of the form according to the configuration information;

[0019] The construction of the dynamic form model includes: defining the form model structure, introducing the form configuration interface, dynamic parsing of configuration information, building the form data structure, generating interface display, form interaction processing, testing and verification, optimization and expansion.

[0020] Further preferably, in S3, by obtaining the support of the SaaS platform, the dynamic form model is deployed on the SaaS platform, so that the form configuration interface, generation and display of the dynamic form model, and storage and management of data are combined with the SaaS platform.

[0021] Further preferably, in said S4, the formily form instance is created using the Form component, and each form item is defined using the FormItem component;

[0022] The definition content includes but is not limited to: life cycle function, visible state and read-only state.

[0023] Further preferably, in S5, the container is a multi-form rendering container, which is used to render components of multiple forms simultaneously.

[0024] Further preferably, in S6, a Formilly form item definition Formltem component is created, the form item is configured through the Formltem component, and a Formilly schema object is dynamically generated according to the form item configuration result through the Formltem component.

[0025] Further preferably, in S7, by rendering the formily form, Formily becomes a tool for building complex form applications.

[0026] A form configuration development system comprises a processor and a register coupled to the processor, wherein the register stores program instructions, and when the program instructions are executed by the processor, the processor executes the form configuration development method.

[0027] The embodiment of the present invention has the following advantages due to the adoption of the above technical solution:

[0028] 1. The present invention provides a complete form customization solution, including a form configuration interface, generation and display of dynamic form models, data storage and management, etc., to facilitate users to customize and manage forms.

[0029] 2. The present invention is based on the design of a dynamic form model, which supports complex forms, improves the flexibility and scalability of form customization, and is a form configuration development solution for the SaaS platform, solving the inflexibility and high cost problems of form customization tools.

[0030] The above summary is for illustrative purposes only and is not intended to be limiting in any way. In addition to the illustrative aspects, embodiments and features described above, further aspects, embodiments and features of the present invention will be readily apparent by reference to the accompanying drawings and the following detailed description. BRIEF DESCRIPTION OF THE DRAWINGS

[0031] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0032] Figure 1 is a step diagram of the present invention;

[0033] Figure 2 It is a schematic diagram of the process of the present invention;

[0034] Figure 3 It is a schematic diagram of the core concept of the present invention. DETAILED DESCRIPTION

[0035] In the following, only some exemplary embodiments are briefly described. As those skilled in the art will appreciate, the described embodiments may be modified in various ways without departing from the spirit or scope of the present invention. Therefore, the drawings and descriptions are considered to be exemplary and non-restrictive in nature.

[0036] It should be noted that the terms "first", "second", "symmetrical", "array", etc. are only used to distinguish between description and position description purposes, and cannot be understood as indicating or implying relative importance or implicitly indicating the number of the indicated technical features. Therefore, the definition of "first", "symmetrical", etc. can explicitly or implicitly include one or more of these features; similarly, when the number of certain features is not limited in the form of words such as "two" or "three", it should be noted that this feature also explicitly or implicitly includes one or more feature quantities.

[0037] The embodiments of the present invention are described in detail below with reference to the accompanying drawings.

[0038] Embodiment 1

[0039] like Figure 1-3 As shown, an embodiment of the present invention provides a form configuration development method, comprising the following steps:

[0040] S1. Form configuration - using visualization technology to provide users with a form configuration interface;

[0041] S2. Build a dynamic form model;

[0042] S3. Obtain platform support;

[0043] S4. Create form - create a formily form instance;

[0044] S5. Create a container;

[0045] S6. Create form items - create formily form items and configure the form items;

[0046] S7. Render the formily form.

[0047] In one embodiment, in S1, a form configuration interface is established by using visualization technology to enable the user to customize the form according to needs;

[0048] Custom content includes but is not limited to form fields, layouts, checkboxes, lists, and validation rules;

[0049] By providing users with a form configuration interface, users can customize the form's fields, layout, validation rules and other properties according to their needs, thus achieving flexible customization of the form.

[0050] In one embodiment, the establishment of the form configuration interface includes: demand analysis, interface design, function configuration, element attribute configuration, data binding and verification, preview and export, interaction optimization, and testing and feedback;

[0051] Demand analysis is used to clarify the types of information that the form needs to collect, such as text, numbers, dates, radio buttons, multiple-choice boxes, drop-down lists, etc., and analyze the business logic of the form, such as mandatory verification, length restrictions, data formats, etc.;

[0052] Interface design: By designing an intuitive interface, including a canvas or workspace where users can drag form elements, and providing icons and property setting panels for various form elements, users can configure the properties of form elements, such as default values, validation rules, option content, etc.;

[0053] Function configuration: The drag-and-drop function is implemented by using the HTML5 drag-and-drop API, allowing users to drag form components from the element library to the canvas;

[0054] Element attribute configuration: Provide an attribute configuration interface for each form element, such as the prompt text of an input box, the option content of a radio button, etc., and allow users to configure it through a pop-up window or sidebar;

[0055] Data binding and validation: enables form elements to be dynamically updated according to the data model, and then ensures the accuracy of form data by designing validation rules;

[0056] Preview and export: provides a preview function so that users can view the configured form effect; allows users to export the form configuration as code or configuration file for use in other environments;

[0057] Interaction optimization: used to optimize the interactive experience of user operations, such as undo and redo functions; provide help documents and interactive prompts to guide users to complete configuration;

[0058] Testing and feedback: Test the form configuration interface to ensure that all functions operate normally; collect user feedback and continuously optimize the interface design and function implementation.

[0059] HTML5 is a markup language specification. It is an evolution of HTML (Hypertext Markup Language) and is developed by the World Wide Web Consortium (W3C). The main goal of HTML5 is to create a standard web design language that works on all devices, platforms, and browsers.

[0060] API is the abbreviation of "Application Programming Interface", which is a set of predefined rules and protocols for building and interacting interfaces between software applications.

[0061] In one embodiment, in S2, the dynamic form model is established based on the front-end JavaScript framework and is used to dynamically generate the data structure and interface display of the form according to the configuration information;

[0062] The construction of dynamic form model includes: defining form model structure, introducing form configuration interface, dynamic parsing of configuration information, building form data structure, generating interface display, form interaction processing, testing and verification, optimization and expansion;

[0063] Define the form model structure: By designing a flexible form model structure that can accommodate various types of form elements and their attributes, the model represents the layout and logic of the form, such as grouping, paging, conditional display, etc.

[0064] Introduce form configuration interface: import the form configuration interface into the dynamic form model;

[0065] Dynamic parsing of configuration information: After the user completes the form design in the configuration interface, a parser is needed to process the configuration information and convert it into a structure that the model can understand. The parser is used to process the configuration JSON format.

[0066] Form data structure construction: Based on the user's configuration information, dynamically construct the form data to create a JSON object or similar structure, which contains the definition of all form elements and their attributes;

[0067] Generate interface display: Use front-end JavaScript technology to generate the form interface according to the data structure, and use the front-end Angular framework to more efficiently realize the dynamic generation of the interface;

[0068] Form interaction processing: implement the interaction logic of form elements, such as input validation, submission processing, etc., to ensure that the dynamically generated part of the form can correctly handle user input and event response;

[0069] Testing and validation: Test the dynamically generated form to ensure that it works as expected, verifying that the form's layout, behavior, and functionality are consistent with the user's configuration.

[0070] Optimization and expansion: Optimize based on test feedback, improve form performance and user experience, and consider future scalability so that the model can support more complex form structures and functions.

[0071] JSON (JavaScript Object Notation) is a lightweight data exchange format. It is based on a subset of ECMAScript (a scripting standard specified by the European Computer Manufacturers Association) and uses text to represent complex data structures.

[0072] JavaScript is a programming language used to enable interactivity and dynamic content on web pages.

[0073] In one embodiment, in S3, by obtaining support from the SaaS platform, the dynamic form model is deployed on the SaaS platform, so that the form configuration interface, generation and display of the dynamic form model, and storage and management of data are combined with the SaaS platform;

[0074] Based on the SaaS platform, a complete form customization solution is provided using the dynamic form model, including form configuration interface, generation and display of dynamic form models, data storage and management, etc., to meet the needs of different users.

[0075] In one embodiment, in S4, a formily form instance is created using a Form component, and each form item is defined using a FormItem component;

[0076] The definitions include but are not limited to: lifecycle functions, visible state, and read-only state;

[0077] In Formily, you create a form instance by using the components and hooks it provides, and define lifecycle functions, visible states, and read-only states.

[0078] In one embodiment, in S5, the container is a multi-form rendering container, which is used to render components of multiple forms at the same time;

[0079] By creating a multi-form rendering container, you can manage the status of multiple forms and provide a consistent user interface and interactive experience.

[0080] In one embodiment, in S6, a Formilly form item definition Formltem component is created, the form item is configured through the Formltem component, and a Formilly schema object is dynamically generated through the Formltem component according to the form item configuration result;

[0081] Define the Formltem component by creating a formily form item, and then configure the Formltem component individually, where the individual items include field attributes (display status, UI form, optional items, responder, validator, whether required), component attributes, component style, container attributes (Formltem) and container style (Formltem), and then generate the formily schema object.

[0082] In one embodiment, in S7, by rendering the formily form, Formily becomes a tool for building complex form applications;

[0083] The rendering method is:

[0084] <FormProvider form={form}>

[0085] <SchemaFiel dschema=(schema.schema)>

[0086]

[0087] .

[0088] Embodiment 2

[0089] like Figure 1-3 As shown, the embodiment of the present invention also provides a form configuration development method, comprising the following steps:

[0090] S1. Form configuration - using visualization technology to provide users with a form configuration interface;

[0091] S2. Build a dynamic form model;

[0092] S3. Obtain platform support;

[0093] S4. Create form - create a formily form instance;

[0094] S5. Create a container;

[0095] S6. Create form items - create formily form items and configure the form items;

[0096] S7. Render the formily form.

[0097] In one embodiment, in S1, a form configuration interface is established by using visualization technology to enable the user to customize the form according to needs;

[0098] Custom content includes but is not limited to form fields, layouts, checkboxes, lists, and validation rules;

[0099] By providing users with a form configuration interface, users can customize the form's fields, layout, validation rules and other properties according to their needs, thus achieving flexible customization of the form.

[0100] In one embodiment, the establishment of the form configuration interface includes: demand analysis, interface design, function configuration, element attribute configuration, data binding and verification, preview and export, interaction optimization, and testing and feedback;

[0101] Demand analysis is used to clarify the types of information that the form needs to collect, such as text, numbers, dates, radio buttons, multiple-choice boxes, drop-down lists, etc., and analyze the business logic of the form, such as mandatory verification, length restrictions, data formats, etc.;

[0102] Interface design: By designing an intuitive interface, including a canvas or workspace where users can drag form elements, and providing icons and property setting panels for various form elements, users can configure the properties of form elements, such as default values, validation rules, option content, etc.;

[0103] Function configuration: The drag-and-drop function is implemented by using the HTML5 drag-and-drop API, allowing users to drag form components from the element library to the canvas;

[0104] Element attribute configuration: Provide an attribute configuration interface for each form element, such as the prompt text of an input box, the option content of a radio button, etc., and allow users to configure it through a pop-up window or sidebar;

[0105] Data binding and validation: enables form elements to be dynamically updated according to the data model, and then ensures the accuracy of form data by designing validation rules;

[0106] Preview and export: provides a preview function so that users can view the configured form effect; allows users to export the form configuration as code or configuration file for use in other environments;

[0107] Interaction optimization: used to optimize the interactive experience of user operations, such as undo and redo functions; provide help documents and interactive prompts to guide users to complete configuration;

[0108] Testing and feedback: Test the form configuration interface to ensure that all functions operate normally; collect user feedback and continuously optimize the interface design and function implementation.

[0109] In one embodiment, in S2, the dynamic form model is established based on the front-end CSS framework, and is used to dynamically generate the data structure and interface display of the form according to the configuration information;

[0110] The construction of dynamic form model includes: defining form model structure, introducing form configuration interface, dynamic parsing of configuration information, building form data structure, generating interface display, form interaction processing, testing and verification, optimization and expansion;

[0111] Define the form model structure: By designing a flexible form model structure that can accommodate various types of form elements and their attributes, the model represents the layout and logic of the form, such as grouping, paging, conditional display, etc.

[0112] Introduce form configuration interface: import the form configuration interface into the dynamic form model;

[0113] Dynamic parsing of configuration information: After the user completes the form design in the configuration interface, a parser is needed to process the configuration information and convert it into a structure that the model can understand. The parser is used to process the configuration XML format.

[0114] Form data structure construction: Based on the user's configuration information, dynamically construct the form data to create a JSON object or similar structure, which contains the definition of all form elements and their attributes;

[0115] Generate interface display: Use front-end CSS technology to generate the form interface according to the data structure, and use the front-end Vue.js framework to more efficiently realize the dynamic generation of the interface;

[0116] Form interaction processing: implement the interaction logic of form elements, such as input validation, submission processing, etc., to ensure that the dynamically generated part of the form can correctly handle user input and event response;

[0117] Testing and validation: Test the dynamically generated form to ensure that it works as expected, verifying that the form's layout, behavior, and functionality are consistent with the user's configuration.

[0118] Optimization and expansion: Optimize based on test feedback, improve form performance and user experience, and consider future scalability so that the model can support more complex form structures and functions.

[0119] JSON (JavaScript Object Notation) is a lightweight data exchange format. It is based on a subset of ECMAScript (a scripting standard specified by the European Computer Manufacturers Association) and uses text to represent complex data structures.

[0120] XML (eXtensible Markup Language) is a markup language used to store and transmit data. It is one of the commonly used formats for data exchange on the Internet and is used in parallel with JSON.

[0121] CSS (Cascading Style Sheets) is mainly used to set the layout, design and style of web pages.

[0122] In one embodiment, in S3, by obtaining support from the SaaS platform, the dynamic form model is deployed on the SaaS platform, so that the form configuration interface, generation and display of the dynamic form model, and storage and management of data are combined with the SaaS platform;

[0123] Based on the SaaS platform, a complete form customization solution is provided using the dynamic form model, including form configuration interface, generation and display of dynamic form models, data storage and management, etc., to meet the needs of different users.

[0124] In one embodiment, in S4, a formily form instance is created using a Form component, and each form item is defined using a FormItem component;

[0125] The definitions include but are not limited to: lifecycle functions, visible state, and read-only state;

[0126] In Formily, you create a form instance by using the components and hooks it provides, and define lifecycle functions, visible states, and read-only states.

[0127] In one embodiment, in S5, the container is a multi-form rendering container, which is used to render components of multiple forms at the same time;

[0128] By creating a multi-form rendering container, you can manage the status of multiple forms and provide a consistent user interface and interactive experience.

[0129] In one embodiment, in S6, a Formilly form item definition Formltem component is created, the form item is configured through the Formltem component, and a Formilly schema object is dynamically generated through the Formltem component according to the form item configuration result;

[0130] Define the Formltem component by creating a formily form item, and then configure the Formltem component individually, where the individual items include field attributes (display status, UI form, optional items, responder, validator, whether required), component attributes, component style, container attributes (Formltem) and container style (Formltem), and then generate the formily schema object.

[0131] In one embodiment, in S7, by rendering the formily form, Formily becomes a tool for building complex form applications;

[0132] The rendering method is:

[0133] <FormProvider form={form}>

[0134] <SchemaFiel dschema=(schema.schema)>

[0135]

[0136] .

[0137] Embodiment 3

[0138] like Figure 1-3 As shown, the embodiment of the present invention also provides a form configuration development method, comprising the following steps:

[0139] S1. Form configuration - using visualization technology to provide users with a form configuration interface;

[0140] S2. Build a dynamic form model;

[0141] S3. Obtain platform support;

[0142] S4. Create form - create a formily form instance;

[0143] S5. Create a container;

[0144] S6. Create form items - create formily form items and configure the form items;

[0145] S7. Render the formily form.

[0146] In one embodiment, in S1, a form configuration interface is established by using visualization technology to enable the user to customize the form according to needs;

[0147] Custom content includes but is not limited to form fields, layouts, checkboxes, lists, and validation rules;

[0148] By providing users with a form configuration interface, users can customize the form's fields, layout, validation rules and other properties according to their needs, thus achieving flexible customization of the form.

[0149] In one embodiment, the establishment of the form configuration interface includes: demand analysis, interface design, function configuration, element attribute configuration, data binding and verification, preview and export, interaction optimization, and testing and feedback;

[0150] Demand analysis is used to clarify the types of information that the form needs to collect, such as text, numbers, dates, radio buttons, multiple-choice boxes, drop-down lists, etc., and analyze the business logic of the form, such as mandatory verification, length restrictions, data formats, etc.;

[0151] Interface design: By designing an intuitive interface, including a canvas or workspace where users can drag form elements, and providing icons and property setting panels for various form elements, users can configure the properties of form elements, such as default values, validation rules, option content, etc.;

[0152] Function configuration: The drag-and-drop function is implemented by using the HTML5 drag-and-drop API, allowing users to drag form components from the element library to the canvas;

[0153] Element attribute configuration: Provide an attribute configuration interface for each form element, such as the prompt text of an input box, the option content of a radio button, etc., and allow users to configure it through a pop-up window or sidebar;

[0154] Data binding and validation: enables form elements to be dynamically updated according to the data model, and then ensures the accuracy of form data by designing validation rules;

[0155] Preview and export: provides a preview function so that users can view the configured form effect; allows users to export the form configuration as code or configuration file for use in other environments;

[0156] Interaction optimization: used to optimize the interactive experience of user operations, such as undo and redo functions; provide help documents and interactive prompts to guide users to complete configuration;

[0157] Testing and feedback: Test the form configuration interface to ensure that all functions operate normally; collect user feedback and continuously optimize the interface design and function implementation.

[0158] In one embodiment, in S2, the dynamic form model is established based on the front-end HTML framework and is used to dynamically generate the data structure and interface display of the form according to the configuration information;

[0159] The construction of dynamic form model includes: defining form model structure, introducing form configuration interface, dynamic parsing of configuration information, building form data structure, generating interface display, form interaction processing, testing and verification, optimization and expansion;

[0160] Define the form model structure: By designing a flexible form model structure that can accommodate various types of form elements and their attributes, the model represents the layout and logic of the form, such as grouping, paging, conditional display, etc.

[0161] Introduce form configuration interface: import the form configuration interface into the dynamic form model;

[0162] Dynamic parsing of configuration information: After the user completes the form design in the configuration interface, a parser is needed to process the configuration information and convert it into a structure that the model can understand. The parser is used to process the configuration JSON and XML formats;

[0163] Form data structure construction: Based on the user's configuration information, dynamically construct the form data to create a JSON object or similar structure, which contains the definition of all form elements and their attributes;

[0164] Generate interface display: Use front-end HTML technology to generate the form interface according to the data structure, and use the front-end React framework to more efficiently realize the dynamic generation of the interface;

[0165] Form interaction processing: implement the interaction logic of form elements, such as input validation, submission processing, etc., to ensure that the dynamically generated part of the form can correctly handle user input and event response;

[0166] Testing and validation: Test the dynamically generated form to ensure that it works as expected, verifying that the form's layout, behavior, and functionality are consistent with the user's configuration.

[0167] Optimization and expansion: Optimize based on test feedback, improve form performance and user experience, and consider future scalability so that the model can support more complex form structures and functions.

[0168] JSON (JavaScript Object Notation) is a lightweight data exchange format. It is based on a subset of ECMAScript (a scripting standard specified by the European Computer Manufacturers Association) and uses text to represent complex data structures.

[0169] XML (eXtensible Markup Language) is a markup language used to store and transmit data. It is one of the commonly used formats for data exchange on the Internet and is used in parallel with JSON.

[0170] HTML (HyperText Markup Language) is a markup language used to create structured content on web pages.

[0171] In one embodiment, in S3, by obtaining support from the SaaS platform, the dynamic form model is deployed on the SaaS platform, so that the form configuration interface, generation and display of the dynamic form model, and storage and management of data are combined with the SaaS platform;

[0172] Based on the SaaS platform, a complete form customization solution is provided using the dynamic form model, including form configuration interface, generation and display of dynamic form models, data storage and management, etc., to meet the needs of different users.

[0173] In one embodiment, in S4, a formily form instance is created using a Form component, and each form item is defined using a FormItem component;

[0174] The definitions include but are not limited to: lifecycle functions, visible state, and read-only state;

[0175] In Formily, you create a form instance by using the components and hooks it provides, and define lifecycle functions, visible states, and read-only states.

[0176] In one embodiment, in S5, the container is a multi-form rendering container, which is used to render components of multiple forms at the same time;

[0177] By creating a multi-form rendering container, you can manage the status of multiple forms and provide a consistent user interface and interactive experience.

[0178] In one embodiment, in S6, a Formilly form item definition Formltem component is created, the form item is configured through the Formltem component, and a Formilly schema object is dynamically generated through the Formltem component according to the form item configuration result;

[0179] Define the Formltem component by creating a formily form item, and then configure the Formltem component individually, where the individual items include field attributes (display status, UI form, optional items, responder, validator, whether required), component attributes, component style, container attributes (Formltem) and container style (Formltem), and then generate the formily schema object.

[0180] In one embodiment, in S7, by rendering the formily form, Formily becomes a tool for building complex form applications;

[0181] The rendering method is:

[0182] <FormProvider form={form}>

[0183] <SchemaFiel dschema=(schema.schema)>

[0184]

[0185] .

[0186] Embodiment 4

[0187] An embodiment of the present invention also provides a form configuration development system, the system includes a processor and a register coupled to the processor, the register stores program instructions, and when the program instructions are executed by the processor, the processor executes the form configuration development method such as embodiment one, embodiment two or embodiment three.

[0188] The core concept of the present invention is as follows Figure 3 As shown,

[0189] Formily: is a data + protocol driven form framework for complex scenarios in the middle and back-end.

[0190] formItem: form item component;

[0191] Schema: is a JSON data structure that describes the form;

[0192] Configuration: configuration item;

[0193] Metadata: A field used to express a specific business meaning;

[0194] a. Includes: unique key, type, description, validation rule, dictionary, default value, etc.;

[0195] b. Such as: ID number, surname, given name, etc.;

[0196] Entity: A data model used to express a specific business concept;

[0197] a. Rules: Entities can be composed of entities or metadata;

[0198] b. For example, an ID card is an entity, which consists of metadata such as name and ID card number;

[0199] c. For example, a driver is an entity, which is composed of entities such as ID card, driver's license, and health certificate;

[0200] Form: It is composed of metadata from several entities and is used to implement functions such as editing, storing, and reviewing entity data. A form consists of a set of form items, which contain metadata and configuration.

[0201] List: It is composed of metadata from several entities and is used to display entity data. During the display process, a series of operations are provided, such as adding, editing, importing, exporting, and multiple selection.

[0202] The above are only specific embodiments of the present invention, but the protection scope of the present invention is not limited thereto. Any person skilled in the art can easily think of various changes or substitutions within the technical scope disclosed by the present invention, which should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention should be based on the protection scope of the claims.

Claims

1. A form configuration development method, characterized in that: The following steps are involved: S1. Form configuration - using visualization technology to provide users with a form configuration interface; S2. Build a dynamic form model; S3. Obtain platform support; S4. Create form - create a formily form instance; S5. Create a container; S6. Create form items - create formily form items and configure the form items; S7. Render the formily form.

2. The form configuration development method according to claim 1, characterized in that: In S1, a form configuration interface is established by using visualization technology, so that the user can customize the form according to the needs; The customized content includes but is not limited to the form's fields, layout, checkboxes, lists, and validation rules.

3. The form configuration development method according to claim 2, characterized in that: The establishment of the form configuration interface includes: demand analysis, interface design, function configuration, element attribute configuration, data binding and verification, preview and export, interaction optimization and testing and feedback.

4. The form configuration development method according to claim 1, characterized in that: In S2, the dynamic form model is established based on the front-end HTML, CSS or JavaScript framework, and is used to dynamically generate the data structure and interface display of the form according to the configuration information; The construction of the dynamic form model includes: defining the form model structure, introducing the form configuration interface, dynamic parsing of configuration information, building the form data structure, generating interface display, form interaction processing, testing and verification, optimization and expansion.

5. The form configuration development method according to claim 1, characterized in that: In the S3, by obtaining the support of the SaaS platform, the dynamic form model is deployed on the SaaS platform, so that the form configuration interface, the generation and display of the dynamic form model, and the storage and management of data are combined with the SaaS platform.

6. The form configuration development method according to claim 1, characterized in that: In S4, the formily form instance is created using the Form component, and each form item is defined using the FormItem component; The definition content includes but is not limited to: life cycle function, visible state and read-only state.

7. The form configuration development method according to claim 1, characterized in that: In S5, the container is a multi-form rendering container, which is used to render components of multiple forms at the same time.

8. The form configuration development method according to claim 1, characterized in that: In S6, a Formilly form item definition Formltem component is created, the form item is configured through the Formltem component, and a Formilly schema object is dynamically generated according to the form item configuration result through the Formltem component.

9. The form configuration development method according to claim 1, characterized in that: In the S7, by rendering the formily form, Formily becomes a tool for building complex form applications.

10. A form configuration development system, characterized in that: The system includes a processor and a register coupled to the processor, wherein the register stores program instructions, and when the program instructions are executed by the processor, the processor executes the form configuration development method as described in any one of claims 1-9.

Images