CN115858690A - Dynamic form generation system - Google Patents
Dynamic form generation system Download PDFInfo
- Publication number
- CN115858690A CN115858690A CN202211437354.3A CN202211437354A CN115858690A CN 115858690 A CN115858690 A CN 115858690A CN 202211437354 A CN202211437354 A CN 202211437354A CN 115858690 A CN115858690 A CN 115858690A
- Authority
- CN
- China
- Prior art keywords
- control
- data
- layout
- check
- button
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Abstract
The invention provides a dynamic Form generation system, which does not provide a visual Form configuration page and generates a dynamic Form in a Schema Form; the method comprises the following steps: form layout module, form control module, and form controller module: the form layout module is used for providing basic layout and table layout for the form control, wherein the basic layout is realized by using a grid system; the basic control of the form control module at least comprises: the system comprises an input box, a drop-down box, a radio box and a check box, and supports interface controls and supports accessing custom controls meeting interface standards; the form controller consists of two sub-modules for form check sum condition rendering.
Description
Technical Field
The invention relates to a read-based technology, relates to a dynamic form generation technology in the field of front-end application, and particularly relates to a dynamic form generation system.
Background
With the development of computer technology, electronic systems in enterprises and public institutions are continuously developed, and the appearance of MSS, OA, ERP, BPM and various middle and background management systems greatly improves the office efficiency in enterprises and public institutions. A large number of form applications exist in the system of the B end, and most of the form applications are designed more fixedly.
For developers, independent development is still needed to develop such form applications, and although componentization technologies appear in the front-end field at present, the developers still need to consider form layout, form control selection, association display among controls, form verification, form data processing and the like, and still have a small workload in independent development.
For the users of the system, because of the business needs, it is often necessary to create self-defined forms by themselves, and if all of them are submitted to the developer, the development will require a lot of manpower and will probably not meet the needs of the users for real-time adjustment.
The prior art provides a form generator, but the form generator is only used for generating a simple form, and cannot realize condition associated rendering, form associated verification, form loading interface data configuration, form nesting and user-defined form control loading of different form controls.
Disclosure of Invention
In order to solve the problems of defects and shortcomings in the prior art, the invention provides a dynamic form generation system. The method can realize condition associated rendering, form associated checking, form loading interface data configuration, form nesting and user-defined form control loading of different form controls.
In order to achieve the purpose, the invention specifically adopts the following technical scheme:
a dynamic form generation system, characterized by: generating a dynamic Form in a Schema Form mode without providing a visual Form configuration page; the method comprises the following steps: form layout module, form control module, and form controller module:
the form layout module is used for providing basic layout and table layout for the form control, wherein the basic layout is realized by using a grid system;
the basic control of the form control module at least comprises: the system comprises an input box, a drop-down box, a radio box and a check box, and supports interface controls and supports accessing custom controls meeting interface standards;
the form controller consists of two sub-modules for form check sum condition rendering.
Further, in the form layout module, the size of the grid occupied by each form item is freely configured; when the form layout is set as a form, the form is presented in the form of a form; the form supports presentation in the form of a card, and supports right-side anchor point navigation when the form is too long.
Furthermore, the form control module comprises a basic control, an interface control and a custom control, and the binding implementation of form bottom layer input and data is provided by an open source project act-hook-form;
the base controls can include at least text entry boxes, multi-line text entry boxes, radio boxes, check boxes, switches, date selectors, file uploads, and pop-up forms.
Further, the format of Schema is as follows:
the Schema fields control the behavior of the form as follows:
propCode represents a unique identification of user binding input and data;
the propLabel represents the field name and is displayed on the left side of the control;
propeditType represents a form control type;
the propState represents the state of a form and whether the form is enabled or not;
the propMinLength/propLength represents the minimum length and the maximum length of a form, and represents the maximum uploading carding in file uploading;
the propdictType represents an option value required by the drop-down box control and is determined by the dictionary type;
proprequied indicates whether the form must be filled;
propExtendDto represents form extension information, and an interface control and a custom control are used in the field;
propDefaultValue represents a form default;
the propsuffxtext indicates that, with respect to the propLabel, this field is text displayed on the right side of the form, as a restriction on the types of files that can be uploaded when uploading a file;
propDataValid represents a form canonical check;
propulses represents form high-level check rules.
Further, when a propEditType is specified as a component, the producer is rendered as an interface component, the type of the component is additionally specified in the propExtendDto, and at least the types that should be supported include:
Select
the form is represented as a pull-down selection box, a refresh button is arranged on the right side of the pull-down selection box, and the API configuration of the propextendDto is read by clicking the refresh button to reinitiate the request;
Button
after clicking the button, displaying a user-defined control, wherein all behaviors of the form are realized by the user-defined control;
ComponentPopup
the control is displayed in a form of a table, wherein a button of an operation column is specified in the propextendDto, an operation button is clicked, a popup window appears, corresponding data is requested according to API information of the propextendDto, single selection or multiple items of popup window data are supported to be configured, and after the button for determining the popup window is clicked, selected data are bound to the selected items;
ComponentTable
the control is displayed in a form of a Table, a popup is opened after a button is clicked, single selection or multiple items of configuration popup data are supported, selected data are displayed in the Table in real time after a confirming button of the popup is clicked, and the ComponentTable configures data of the Table.
Further, the form verification sub-module includes: mandatory check, regular check and conditional mandatory check;
the conditional rendering submodule appears to be shown by the B field when the A field value is "xxx".
Further, a rule engine of the form controller identifies all fields configured with propules, classifies the fields according to conditions and results, sets subscription and publishing events for the fields, and triggers execution of rules when form controls are input, so that condition rendering and condition filling are realized.
Compared with the prior art, the method and the device for processing the form are simple to use and rich in functions, can greatly improve the development efficiency, and can realize condition-associated rendering, form-associated verification, form loading interface data configuration, form nesting and user-defined form control loading of different form controls.
Drawings
The invention is described in further detail below with reference to the following figures and detailed description:
fig. 1 is a schematic diagram of an overall architecture of a system module according to an embodiment of the present invention.
FIG. 2 is a table layout-base layout diagram according to an embodiment of the present invention.
FIG. 3 is a diagram illustrating a form layout-table layout according to an embodiment of the present invention.
FIG. 4 is a diagram illustrating form layout-card display and anchor point navigation according to an embodiment of the present invention.
Fig. 5 is a schematic diagram of Select types according to an embodiment of the present invention.
Fig. 6 is a schematic diagram 1 of a Button type according to an embodiment of the present invention.
Fig. 7 is a schematic diagram 2 of a Button type according to an embodiment of the present invention.
Fig. 8 is a schematic diagram of a ComponentPopup type 1 according to an embodiment of the present invention.
Fig. 9 is a schematic diagram of a ComponentPopup type 2 according to an embodiment of the present invention.
Fig. 10 is a schematic diagram of ComponentTable type 1 according to an embodiment of the present invention.
Fig. 11 is a schematic diagram of ComponentTable type 2 according to an embodiment of the present invention.
Fig. 12 is a schematic diagram of ComponentTable type 3 according to an embodiment of the present invention.
Detailed Description
In order to make the features and advantages of the present invention comprehensible, embodiments accompanied with figures are described in detail as follows:
as shown in fig. 1, the system design provided by the embodiment of the present invention is composed of three core function modules, which are a form layout module, a form control module, and a form controller module.
The form layout module provides grid layout and table layout for the form control;
the form control module comprises basic controls, such as input boxes, drop-down boxes, radio boxes, check boxes and other basic components, supports interface controls and simultaneously supports accessing custom controls meeting interface standards;
the form controller consists of two submodules for form check and conditional rendering.
The scheme of the embodiment does not provide a visual Form configuration page, but generates a dynamic Form in the Form of Schema Form. The Schema format is as follows:
the function and implementation of the three modules of the core are described below.
1. Form layout module
The core function of the layout module is to provide a basic layout and a table layout for the form control, wherein the basic layout is realized by using a grid system. The size of the grid occupied by each form item is freely configurable, as shown in fig. 2.
When the form layout is set as a table, the form will be presented in tabular form, as shown in FIG. 3.
In addition, the form also supports presentation in the form of cards, and also supports right side anchor point navigation when the form is too long, as shown in fig. 4.
2. Form control module
The form control module is the core content of the invention, and comprises a basic control, an interface control and a self-defined control, and the binding implementation of the form bottom layer input and data is provided by an open source project act-hook-form.
The base controls may include at least text entry boxes, multi-line text entry boxes, radio boxes, check boxes, switches, date selectors, file uploads, pop-up forms. The Schema fields control the behavior of the form as follows:
there is no special behavior for the base form controls, the above fields are sufficient to describe one base form control, the producer will render as an interface component when propEditType is specified as a component, the type of component is additionally specified in propExtendDto, at least the types that should be supported include:
·Select
the form appears as a drop-down selection box with a refresh button on the right, and clicking on the button will read the API configuration reinitiation request for propextendDto, as shown in FIG. 5.
·Button
When the button is clicked, a custom control is displayed, and all the behaviors of the form are realized by the custom control, as shown in fig. 6 and 7.
·ComponentPopup
The control is displayed in a form of a table, wherein a button of an operation column is specified in the propExtendDto, a popup appears when the operation button is clicked, corresponding data is requested according to API information of the propExtendDto, single selection or multiple items of popup data are supported to be configured, and after the button for determining the popup is clicked, the selected data is bound to the selected item, as shown in fig. 8 and 9.
·ComponentTable
The control is displayed in a form of a Table, a popup is opened after a button is clicked, single selection or multiple items of popup data are configured, and after a confirming button of the popup is clicked, selected data are displayed in the Table in real time (different from ComponentPopup, table data of ComponentPopup is existing data, only extra information of each data can be configured additionally, and ComponentTable configures data of the Table), as shown in FIGS. 10-12.
3. Form controller module
The form controller module includes form verification and conditional rendering functionality.
Wherein the form checks include mandatory check, regular check, and conditionally mandatory check (e.g., when the a field value is "xxx", the B field must be filled).
Conditional rendering shows that when the a field value is "xxx", the B field shows that the controller implements a simple rules engine, supporting configuration of multiple rules, and the condition allows configuration of multiple "when the a field value is xxx", so that currently only display/hide or fill/not fill is supported.
The rule engine identifies all fields configured with propRules, classifies all the fields according to conditions and results, sets subscription and release events for all the fields, and triggers the execution of rules when form controls are input, so that condition rendering and condition filling are realized.
The above scheme provided by this embodiment can be stored in a computer readable storage medium in a coded form, and implemented in a computer program, and inputs basic parameter information required for calculation through computer hardware, and outputs a calculation result.
As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, apparatus, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The present invention is described with reference to flowchart illustrations of methods, apparatus (devices), and computer program products according to embodiments of the invention. It will be understood that each flow of the flowcharts, and combinations of flows in the flowcharts, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows.
Finally, it should be noted that: the above embodiments are only for illustrating the technical solutions of the present invention and not for limiting the same, and although the present invention is described in detail with reference to the above embodiments, those of ordinary skill in the art should understand that: modifications and equivalents may be made to the embodiments of the invention without departing from the spirit and scope of the invention, which is to be covered by the claims.
The present invention is not limited to the above preferred embodiments, and all other various forms of dynamic form generation systems can be derived from the present invention, and all equivalent changes and modifications made in accordance with the claimed invention shall fall within the scope of the present invention.
Claims (7)
1. A dynamic form generation system, characterized by: a visual Form configuration page is not provided, and a dynamic Form is generated in a Schema Form; the method comprises the following steps: form layout module, form control module, and form controller module:
the form layout module is used for providing basic layout and table layout for the form control, wherein the basic layout is realized by using a grid system;
the basic control of the form control module at least comprises: the system comprises an input box, a drop-down box, a radio box and a check box, and supports interface controls and supports accessing custom controls meeting interface standards;
the form controller consists of two sub modules of form check sum condition rendering.
2. The dynamic form generation system of claim 1, wherein: in the form layout module, the grid size occupied by each form item is freely configured; when the form layout is set as a form, the form is presented in the form of a form; the form supports display in a card mode, and when the form is too long, right-side anchor point navigation is supported.
3. The dynamic form generation system of claim 1, wherein: the form control module comprises a basic control, an interface control and a custom control, and the binding implementation of form bottom layer input and data is provided by an open source project act-hook-form;
the base controls may include at least text entry boxes, multi-line text entry boxes, radio boxes, check boxes, switches, date selectors, file uploads, and pop-up forms.
4. The dynamic form generation system of claim 1, wherein:
the Schema format is as follows:
interface DTO {
/element primary key/s
unid = "";
Activation status/. Activation status >
enableFlag: "Y" | "N";
/' element type
propType: PropType = PropType.Stand;
V. data type
propDataType = "";
V. data length
propLength = 0;
V. shortest length of data
propMinLength = 0;
V. data dictionary
propDictType = "";
Label @/dictionary corresponding to/. Dictionary
propDictTypeName = "";
Source of data
dataSource = "";
V. data check
propDataValid = "";
Default/. Value +
propDefaultValue = "";
/suffix text · device
propSuffixText = "";
Description/' profiles description
propMemo = "";
Description/' profiles description
propDesc = "";
/' element name
propLabel = "";
/' element code
propCode = "";
V. set Source
propSrc = "";
/. Input mode · x/x · |
propEditType = "";
V. element number
propSortid = "";
/' element status
propState = "";
V. map table name
tableName = "";
V. map field name
fieldName = "";
V. map field query condition
primaryParam = "";
Whether or not it must be filled
propRequired = "";
The/' control type is an element of the component that is needed to get some information
propExtendDto = {};
V. sub-form
children: DTO;
}
The Schema fields control the behavior of the form as follows:
propCode represents a unique identification of user binding input and data;
the propLabel represents the field name and is displayed on the left side of the control;
propeditType represents a form control type;
the propState represents the state of a form and whether the form is enabled or not;
the propMinLength/propLength represents the minimum length and the maximum length of the form, and represents the maximum uploading carding in file uploading;
the propdictType represents an option value required by the drop-down box control and is determined by the dictionary type;
proprequied indicates whether the form must be filled;
propExtendDto represents form extension information, and an interface control and a custom control are used in the field;
propDefaultValue represents a form default;
the propsuffxtext indicates that, with respect to the propLabel, this field is text displayed on the right side of the form, and when uploading a file, as a restriction, the type of the file that can be uploaded;
propDataValid represents a form canonical check;
propulses represents form high-level check rules.
5. The dynamic form generation system of claim 4, wherein:
when the propeditType is specified as a component, the producer is rendered as an interface component, the type of the component is additionally specified in the propextendDto, and at least the types that should be supported include:
Select
the form is represented as a pull-down selection box, a refresh button is arranged on the right side of the pull-down selection box, and the API configuration of the propextendDto is read by clicking the refresh button to reinitiate the request;
Button
after clicking the button, displaying a user-defined control, wherein all behaviors of the form are realized by the user-defined control;
ComponentPopup
the control is displayed in a form of a table, wherein a button of an operation column is specified in the propExtendDto, an operation button is clicked, a popup window appears, corresponding data is requested according to API information of the propExtendDto, single selection or multiple items of popup window data are supported to be configured, and after the button for determining the popup window is clicked, the selected data are bound to the selected items;
ComponentTable
the control is displayed in a form of a Table, a popup window is opened after a button is clicked, single selection or multiple items of popup window data are supported to be configured, the selected data are displayed in the Table in real time after a confirming button of the popup window is clicked, and data of the Table are configured in the ComponentTable.
6. The dynamic form generation system of claim 1, wherein:
the form verification submodule comprises: mandatory check, regular check and conditional mandatory check;
the conditional rendering submodule appears to show through the B field when the A field value is "xxx".
7. The dynamic form generation system of claim 5, wherein:
and a rule engine of the form controller identifies all fields configured with propules, classifies all the fields according to conditions and results, sets subscription and release events for all the fields, and triggers the execution of rules when form controls are input so as to realize condition rendering and condition filling.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211437354.3A CN115858690A (en) | 2022-11-16 | 2022-11-16 | Dynamic form generation system |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211437354.3A CN115858690A (en) | 2022-11-16 | 2022-11-16 | Dynamic form generation system |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115858690A true CN115858690A (en) | 2023-03-28 |
Family
ID=85663836
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211437354.3A Pending CN115858690A (en) | 2022-11-16 | 2022-11-16 | Dynamic form generation system |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115858690A (en) |
-
2022
- 2022-11-16 CN CN202211437354.3A patent/CN115858690A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| Ginige | Web engineering: managing the complexity of web systems development | |
| CN106796526A (en) | JSON Stylesheet Language Transformations | |
| CN103049271A (en) | Method and device for automatically generating description document of API (application program interface) | |
| KR20110060808A (en) | Method and apparatus for providing dynamic help information | |
| US9165287B2 (en) | Apparatus and method for augmenting digital educational content with social learning tools | |
| CN102243582A (en) | Method and device for generating user help information for customized user interfaces | |
| JP2016505955A (en) | Conversion from flat book to rich book in electronic reader | |
| CN111767499A (en) | Page configuration method and device | |
| Engel et al. | Reading between the lines: Source code documentation as a conservation strategy for software-based art | |
| US9934292B2 (en) | Dynamic presentation of a results set by a form-based software application | |
| WO2020207086A1 (en) | Information processing system, method, apparatus and device | |
| US20160034434A1 (en) | Contextual page generation with structured content independent of responsive display devices | |
| US20200073925A1 (en) | Method and system for generating a website from collected content | |
| EP3374879A1 (en) | Provide interactive content generation for document | |
| CN110990006A (en) | Form management system and form generation device | |
| CN115858690A (en) | Dynamic form generation system | |
| CN115756692A (en) | Method for automatically combining and displaying pages based on style attributes and related equipment thereof | |
| Lessick et al. | Moving beyond the bookshelves | |
| Chan et al. | Transforming libraries from physical to virtual | |
| CN113010129A (en) | Virtual studio full-flow multi-terminal blackboard writing extraction method and device | |
| Wang et al. | Implementation of elementary chinese language learning application in WeChat mini programs | |
| Lee et al. | The visual display of temporal information for e-textbook: incorporating the mind-mapped timeline authoring tool | |
| Nguyen | Online T-shirts Store: E-Commerce Web Application | |
| Chan et al. | Minimal Computing from the Labor Perspective. | |
| Fay et al. | Semantic Web Technologies and Social Searching for Librarians:(THE TECH SET®# 20) |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |