A visual zero-code custom form generation system and method

Abstract

The present invention discloses a visual zero-code custom form generation system and method, which is based on the vue2 framework, uses the drag standard, and configures the form component display form and verification rules in json format; the administrator logs in to the front-end management system to enter the form creation module, and creates a form according to the required business scenario; the administrator calls the form preview function by clicking the preview button, at which time the configuration information is stored in the browser local storage, and the preview page takes out the configuration data from the browser to render a custom form; the administrator evaluates whether the form preview effect meets expectations based on the form preview effect. If the effect is not ideal, the above steps are repeated until the form preview effect meets expectations; after the effect meets expectations, the administrator can click the publish button to call the service backend API interface to write the form configuration information into the database. The system realizes a highly customizable form system and effectively improves work efficiency.

Description

Technical Field

[0001] The present invention belongs to the field of software development, and in particular relates to a visual zero-code custom form generation system and method. Background Art

[0002] With the development of mobile Internet and AI technology, intelligent and paperless offices of enterprises and institutions have become the first choice in the era of big data and artificial intelligence. The informatization of paper data has become an inevitable trend. However, the traditional manual data entry method has the disadvantages of low efficiency, easy errors and high cost, which requires the use of dynamic form generation system.

[0003] In large-scale enterprise web development, a variety of different form applications need to be developed in different business scenarios. Over a relatively long period of time, due to the increase and changes in the number of people and teams involved, multiple form applications and system applications will evolve into multiple monolithic applications that are difficult to maintain. At this time, the dynamic form generation system of the present invention should be embedded into the enterprise web application with the help of micro-front-end technology, so that it can be independently developed and deployed, reducing the degree of coupling.

[0004] Currently, there are also some solutions for dynamic form generation in this field; their main steps are as follows:

[0005] Add field: Select the field type through the drop-down;

[0006] Configure the attributes such as the segment name and segment description;

[0007] Add a form template: configure properties such as template name and template description;

[0008] Configure the fields in step 1 of the form template;

[0009] Repeat step 4 multiple times to create a complete form template;

[0010] The form filler visits the page;

[0011] Read database data and dynamically render the form;

[0012] The person filling out the form fills in the form;

[0013] Save the form data for submission.

[0014] The above methods and systems can already meet some simple business scenarios. However, in terms of form configuration, since the fields are selected manually and repeatedly operated, it is impossible to achieve high customization of the form by the user. For example, the user cannot freely drag the form field to change the position, set the percentage size of the field on the form page, verification rules and prompt information, etc.; the form developers have low freedom and it is difficult to meet complex business scenarios; at the same time, it is difficult to reuse in large-scale enterprise web development, and it is not easy for developers to collaboratively maintain; therefore, a visual zero-code custom form generation system and method are provided. Summary of the invention

[0015] In order to solve the above technical problems, the present invention provides a visual zero-code custom form generation system and method, which can simply and effectively dynamically generate corresponding forms for complex scenarios.

[0016] In order to achieve the above object, the present invention adopts the following technical solution:

[0017] A visual zero-code custom form system, comprising a service front-end and a service back-end, wherein the service front-end uses the MVVM mode to clearly separate the business and presentation logic of an application from the user interface; the service front-end comprises a front-end management system and a client;

[0018] Front-end management system: used to provide administrators with a visual page for interacting with the service backend. Administrators complete the design and creation of forms through the front-end management system.

[0019] Client: used to provide the form filler with a form filling page connected to the service backend. The filler completes and submits the form through the client.

[0020] Service backend: used to provide data persistence capabilities for the entire system. It is responsible for storing the form configuration data created by the form designer and the form data filled in by the form filler into the database, and providing json configuration data and form data when the client renders the page.

[0021] Furthermore, a visual zero-code custom form generation method includes the following steps:

[0022] Step S1: The administrator logs in to the front-end management system and enters the form design page;

[0023] Step S2: The administrator designs the form according to the requirements and business scenarios;

[0024] Step S3: The administrator obtains the corresponding component from the component library and drags it to the canvas area;

[0025] Step S4: the administrator sorts the obtained components up, down, left, and right in the canvas area;

[0026] Step S5: The administrator customizes the component in the component property editing area in the form design page and obtains form configuration data;

[0027] Step S6: After the form configuration is completed, the administrator previews the designed form by clicking the preview button. The front-end management system inputs the form configuration data into the browser local storage, reads the configuration data stored in the browser local storage on the preview page, and renders a visual form; the preview page is used to simulate the submission and reset form operations;

[0028] Step S7: The administrator obtains the preview effect of the form. If the effect meets expectations, the administrator clicks the Publish button to create the form as needed, and the form design is completed. If the effect is not satisfactory, the administrator returns to continue editing.

[0029] Step S8: The administrator modifies the form configuration data according to the page corresponding to step S3 to step S4, and loops through step S5 to step S6 until the form preview effect reaches the expected result;

[0030] Step S9: When the designed form meets the business and demand effects, the administrator clicks the publish button to store the form persistently;

[0031] Step S10: The form filler obtains the configuration json data from the service backend through the client to render a visual form, fills in the complete data and submits it.

[0032] Furthermore, in step S1, after the administrator logs in using the corresponding role account, the front-end management system provides the administrator with a visual page for interacting with the service backend.

[0033] Further, in step S3, the form components include the following categories: group title, single text line, multiple lines of text, multiple choices, drop-down list, cascading drop-down list, date, time, date and time, value, integer, picture attachment, document attachment, switch, rating, signature and rich text.

[0034] Furthermore, the signature component is encapsulated based on the new HTML5 standard canvas, and the drawable area is defined by HTML code in conjunction with height and width attributes.

[0035] Furthermore, in step S4, the canvas area is sorted up, down, left, and right using the new HTML5 feature drag.

[0036] Furthermore, in step S5, the form attributes include identification name, prompt text, self-segment description, whether required, customer visible and component ratio.

[0037] Furthermore, in step S6, the browser local storage uses the local storage localStorage that is persistent according to the new HTML5 standard.

[0038] Furthermore, in step S6, the preview page is used to simulate the form user filling in and selecting the form, and simulate submission after filling in is completed.

[0039] Furthermore, the simulated submission operation includes two segments, namely user name and contact information.

[0040] Furthermore, in step S9, the form submission includes two sub-segments, namely, the form name and the form description; the form name is a brief definition of the corresponding custom form, and the form description is a detailed description of the custom form.

[0041] Furthermore, in step S9, the persistent storage of the form is stored in the database by calling the API interface of the service backend.

[0042] Compared with the prior art, the present invention has the following beneficial effects:

[0043] The present invention can freely configure component positions through the drag standard. Through a unified form configuration data specification and a unified visual front-end configuration page, administrators can create forms with multiple display forms and complex data interaction characteristics with zero code to meet the needs of various complex business scenarios.

[0044] The present invention is based on the vue2 framework, uses the drag standard, and configures the form component display form and verification rules in json format; the core module in the present invention is implemented in the form of element-ui component library and vue2 custom components, the configuration process and logic are simple and clear, the code implementation is stable and reliable, and the update and upgrade are convenient and fast, which is very suitable for agile development.

[0045] The present invention also supports the use of micro-frontend Qiankun technology to embed the form system into an enterprise web project, so that multiple teams in the enterprise can jointly build modern web applications by independently publishing functions to face various complex business scenarios. BRIEF DESCRIPTION OF THE DRAWINGS

[0046] In order to more clearly illustrate the embodiments of the present invention 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 invention. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative work.

[0047] Figure 1This is a system structure diagram of a visual zero-code custom form generation system according to an example of the present invention;

[0048] Figure 2 It is a form creation flow chart of a visual zero-code custom form generation method according to an example of the present invention;

[0049] Figure 3 It is a form customization configuration diagram of a visual zero-code custom form generation method according to an example of the present invention. DETAILED DESCRIPTION

[0050] The present invention is further described in detail below with reference to the accompanying drawings and embodiments:

[0051] A visual zero-code custom form system and method, characterized in that the system is implemented based on web development technology in a front-end and back-end separation mode; it includes a service front-end and a service back-end, wherein the service front-end uses the MVVM mode, which helps to clearly separate the business and presentation logic of the application from the user interface (UI), and the form components it relies on are implemented based on the Vue2 and drag technology stack; at the same time, another major feature of the system is that it supports the use of micro-front-end technology Qiankun to be embedded in internal enterprise projects, helping developers and managers to use forms more quickly and conveniently; in multi-team development, modern web applications are jointly built through independent publishing functions; the service front-end includes a front-end management system and a client, so the system includes three parts: a front-end management system, a client, and a service back-end.

[0052] Front-end management system: used to provide administrators with a visual page for interacting with the service backend. Administrators complete the design and creation of forms through the front-end management system.

[0053] Client: used to provide the form filler with a form filling page connected to the service backend. The filler completes and submits the form through the client.

[0054] Service backend: used to provide data persistence capabilities for the entire system. It is responsible for storing the form configuration data created by the form designer and the form data filled in by the form filler into the database, and providing json configuration data and form data when the client renders the page.

[0055] The present invention also discloses a visual zero-code custom form system and method, comprising the following steps:

[0056] 1. Log in. The administrator logs in to the front-end management system and enters the form design page;

[0057] 2. Design the form. The administrator designs the form according to the needs and business scenarios;

[0058] 3. Select components. The administrator selects the required components from the component library on the left and drags them to the canvas area;

[0059] Set the corresponding edge detection algorithm in the canvas area, obtain the components selected by the administrator from the component library, map the obtained components to the canvas area, and analyze and process the component images in the canvas area:

[0060] Obtain pixel data in the canvas area, perform grayscale processing on the obtained pixel data, record the pixel data in the canvas area as RBG values, calculate the grayscale value of the RBG values, and mark the grayscale value as HDZ. ;

[0061] Among them, R, G and B are the storage formats of image data, and the corresponding grayscale values ​​are obtained based on the sensitivity of the human eye to different colors, thereby obtaining the grayscale image in the canvas area;

[0062] Analyze and process the grayscale image in the canvas area, and calculate the corresponding gradient data for any pair of differential data in mutually perpendicular directions in the grayscale image based on the edge detection operator;

[0063] Get the gradient data in the diagonal direction of the corresponding pixel point (x, y) in the grayscale image of the canvas area:

[0064] ;

[0065] ;

[0066] ; Among them, TF is the corresponding gradient amplitude value;

[0067] in: ; ; and They are the horizontal convolution operator and the vertical convolution operator respectively;

[0068] Obtain the corresponding edge strength according to the gradient amplitude value of each pixel point, perform threshold processing on the obtained gradient amplitude value, and obtain the corresponding component edge data;

[0069] Analyze and process the corresponding component edge data in the canvas area, and mark and process the component edge data;

[0070] 4. Component sorting. Administrators can sort components up, down, left, and right in the canvas area; sort components based on the result of marking component edge data, and sort overlapping components based on the corresponding component edge data;

[0071] 5. Component property configuration. Administrators can customize the component in the component property editing area on the right side of the page;

[0072] 6. Form preview. The administrator calls the form preview function through the front-end management system.

[0073] 7. Verify the design effect. The administrator previews the effect based on the form. If the effect meets expectations, the administrator can click the Publish button to create the form. If the effect is not satisfactory, the administrator can return to continue editing.

[0074] 8. Modify form configuration. Administrators modify form fields, component positions, sizes, styles, and other configurations.

[0075] Anchor points are positioned according to form fields and component positions, and corresponding anchor points are set;

[0076] Get the canvas area, set the corresponding grid system for the canvas area, get the width percentage of the component corresponding to the corresponding anchor point in the canvas area, and mark it as ZK; get the form width data according to the form field, and mark it as BK; get the spacing between the components corresponding to adjacent anchor points, and mark it as CJ;

[0077] Set the component standard width and mark it as ZB;

[0078] ;

[0079] Adjust the size according to the standard width of the component and its corresponding anchor point;

[0080] 9. Form persistence. The designed form is called by the front-end management system to serve the back-end API interface and write the form configuration data into the database;

[0081] 10. Form component rendering. The client gets the configuration json data from the service backend and renders a visual form, which the form filler can then fill out and submit.

[0082] Example

[0083] like Figure 1 As shown, this embodiment provides a visual zero-code custom form generation system, which is implemented based on a web development model with front-end and back-end separation, where the front-end is divided into a front-end management system and a client, so this system includes three parts: a front-end management system, a client, and a service back-end;

[0084] Front-end management system: used to provide administrators with a visual page for interacting with the service backend. Administrators complete the design and creation of forms through the front-end management system.

[0085] Client: used to provide the form filler with a form filling page connected to the service backend. The filler completes and submits the form through the client.

[0086] Service backend: used to provide data persistence capabilities for the entire system. It is responsible for storing the form configuration data created by the form designer and the form data filled in by the form filler into the database, and providing json configuration data and form data when the client renders the page.

[0087] The present invention also discloses a visual zero-code custom form generation method, such as Figure 2 As shown, the following steps are included:

[0088] 1. The administrator (form designer) logs in to the front-end management system through a role account with permissions. The front-end management system will provide a visual page for interaction with the system backend.

[0089] 2. Create a form. The administrator uses the component library, canvas area, and property editing area on the form creation page to design a personalized form. When creating a form, the administrator needs to define the form style and layout, and define the name and description of the form instance. Figure 3 As shown, the creation of a form mainly consists of the following steps:

[0090] a) Drag the required components from the component library to the canvas area, set draggable to true for the component element to enable it to be dragged, listen to the drag event to handle the dragging process, and listen to the dragend event to handle the action of dropping the component into the canvas area; the component library contains the following components: group title, single text line, multi-line text, multiple selection, drop-down list, cascading drop-down list, date, time, date and time, value, integer, picture attachment, document attachment, switch, rating, signature, rich text; the specific description of the components is shown in Table 1:

[0091] Table 1 Component description:

[0092] Component Name Component Description Group Title The group title of the form area is used to distinguish different filling areas Single text line Input box: Enter characters by mouse or keyboard, only one line will be displayed Multi-line text Text area: used to enter multiple lines of text information, with the input type attribute value specified as textarea Multiple Selection Basic multiple-choice with wide applicability, using tags to display selected items Drop-down list Applicable to a wide range of basic radio options. When there are too many options, use a drop-down menu to display and select the content. Cascading drop-down lists When a data set has a clear hierarchical structure, you can view and select it level by level using the cascade selector. date Used to select or enter a date, with "day" as the basic unit and the format is yyyy-MM-dd time Used to select or enter time, with "seconds" as the basic unit, and the format is HH:mm:ss Date and Time Select the date and time in the same picker in the format yyyy-MM-dd HH:mm:ss Numeric Only standard numeric values ​​are allowed, both integers and floating point numbers are supported Integer Only standard numeric values ​​are allowed, only integers are supported Image attachments Click the "Upload" button to upload pictures. Only png and jpg format pictures are supported. Upload a maximum of 5 pictures and the uploaded picture size cannot exceed 2MB. After the upload is successful, a thumbnail will be displayed. Click the thumbnail to preview the large picture. Document attachment Click the "Upload" button to upload attachments. Only document attachments other than image formats are supported. A maximum of 1 attachment can be uploaded and the size of the uploaded attachment cannot exceed 20MB. switch Indicates the switch between two opposing states, often used to trigger a "switch" score Rating components: Rating components between one star and five stars sign A signature component customized based on canvas. It generates a signature based on the mouse track. There is an "erase" button to clear the drawing. When submitting, it is submitted in base64 format. Rich Text A high degree of freedom rich text component based on Quill

[0093] b) In the canvas area, components can be dragged up, down, left, and right to sort. Components in the canvas area can be selected by clicking. The selected component will be marked with a background color, and a corresponding property edit box will appear in the editing area. The canvas area is a canvas drawing area. With the help of the vue-grid-layout library, the grid layout system can record the left position of the component and the size ratio of the component. The key property description is shown in Table 2:

[0094] Table 2 Description of key attributes of the canvas area:

[0095] Property name Property Description key Provide a unique attribute key for the block corresponding to the component element to give Vue a hint so that it can track the identity of each node and reuse and reorder existing elements. x Indicates the horizontal position of the item and is an integer y Indicates the vertical position of the item and is an integer w Indicates the width of the item, and is an integer h Indicates the height of the item, and is an integer i The unique identifier of the component (equivalent to key)

[0096] c) Personalize the properties of the selected component in the canvas area in the property editing area. The form property editing area contains three properties: component description, verification, and style. The component description includes the identification name, prompt text, and self-segment description. The verification includes whether it is required and visible to the customer. The style includes the component ratio. Special property descriptions such as multiple selections, drop-down lists, and cascading drop-down lists can be configured with corresponding drop-down options. See Table 3 for specific descriptions.

[0097] Table 3 Form attribute field description:

[0098] property illustrate limit Identifier The name of the corresponding field (label) Cannot be empty, limited to 16 characters Prompt text The corresponding field's auxiliary explanation is displayed on the right side of the identifier name. Limit 10 characters Field Description A brief description of the field Limit 300 characters Options Only exists in the three components of multi-select, drop-down list, and cascading drop-down list, and configures its optional options Limit 20 characters Make this field required Whether the field is required when filling in, the form component accepts the rules attribute to pass in the agreed validation rules Enabled by default Visible to customers When turned on, the form will render. When turned off, the form will not render. It is only for internal use. Enabled by default Fuzzy Search Only exists in the drop-down list and cascading drop-down list components, enabling them to support fuzzy search Enabled by default style The width of the field in the canvas area is divided into four equal parts, that is, the field ratio has four options: 25%, 50%, 75%, and 100%. Default 100%

[0099] The width calculation formula of the style in Table 3 is w=ratio / 100*4, where ratio is the field ratio;

[0100] 3. Form preview. The administrator clicks the preview button to preview the form. The specific steps are as follows:

[0101] a) The manager clicks the preview button to convert the json data configured in the form into a string format and store it in the browser's local storage localStorage. At the same time, the window.open() method is called to open a new browser window, and the preview page starts loading;

[0102] b) The preview page reads the configuration data in the browser's local storage, converts the extracted string content into a common JSON format, and renders the page through the custom component FormItem;

[0103] c) The administrator can modify the value in the form, triggering the input or change event of the component to re-render the form, and pass it to the parent component through $emit. The parent component listens to the handleChange event to update the layoutData on the page (layoutData is the data used to submit to the service backend).

[0104] 4. The administrator previews the effect based on the form. If the effect meets expectations, the form design is completed. If the effect is not ideal, return to the editing page for adjustment.

[0105] 5. The administrator re-modifies the form configuration on the page corresponding to step 2 as required, and repeats step 3 until the form preview effect meets expectations.

[0106] 6. Form publishing. The administrator clicks the publish button, and the front-end management system calls the service back-end API interface and passes the configured JSON data to the service back-end and stores it in the database.

[0107] 7. The form filler accesses and uses the form on the client, fills in the necessary values ​​and submits it.

[0108] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0109] The above is only a specific embodiment of the present invention, but the protection scope of the present invention is not limited thereto. Any technician familiar with the technical field can easily think of changes or replacements 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. It should also be noted that the various specific technical features described in the above specific embodiments can be combined in any suitable manner without contradiction. In order to avoid unnecessary repetition, the present invention will not further explain various possible combinations. In addition, the various different embodiments of the present invention can also be combined arbitrarily, as long as they do not violate the concept of the present invention, they should also be regarded as the contents disclosed by the present invention.

Claims

1. A visual zero-code custom form generation method, characterized in that: The following steps are involved: Step S1: The administrator logs in to the front-end management system and enters the form design page; Step S2: The administrator designs the form according to the requirements and business scenarios; Step S3: The administrator obtains the corresponding component from the component library and drags it to the canvas area; Set the corresponding edge detection algorithm in the canvas area, obtain the components selected by the administrator from the component library, map the obtained components to the canvas area, and analyze and process the component images in the canvas area: Obtain pixel data in the canvas area, perform grayscale processing on the obtained pixel data, record the pixel data in the canvas area as RBG values, calculate the grayscale value of the RBG values, and mark the grayscale value as HDZ. ； Among them, R, G and B are the storage formats of image data, and the corresponding grayscale values ​​are obtained based on the sensitivity of the human eye to different colors, thereby obtaining the grayscale image in the canvas area; Analyze and process the grayscale image in the canvas area, and calculate the corresponding gradient data for any pair of differential data in mutually perpendicular directions in the grayscale image based on the edge detection operator; Get the gradient data in the diagonal direction of the corresponding pixel point (x, y) in the grayscale image of the canvas area: ； ； ; Among them, TF is the corresponding gradient amplitude value; in: ; ; and They are the horizontal convolution operator and the vertical convolution operator respectively; Obtain the corresponding edge strength according to the gradient amplitude value of each pixel point, perform threshold processing on the obtained gradient amplitude value, and obtain the corresponding component edge data; Analyze and process the corresponding component edge data in the canvas area, and mark and process the component edge data; Step S4: Component sorting: the administrator can sort the components up, down, left, and right in the canvas area; sort the components according to the result of marking the component edge data, and sort the overlapping parts according to the corresponding component edge data; Step S5: The administrator customizes the component in the component property editing area in the form design page and obtains form configuration data; Step S6: After the form configuration is completed, the administrator previews the designed form by clicking the preview button. The front-end management system inputs the form configuration data into the browser local storage, reads the configuration data stored in the browser local storage on the preview page, and renders a visual form; the preview page is used to simulate the submission and reset form operations; Step S7: The administrator obtains the preview effect of the form. If the effect meets expectations, the administrator clicks the Publish button to create the form as needed, and the form design is completed. If the effect is not satisfactory, the administrator returns to continue editing. Step S8: The administrator modifies the form configuration data according to the page corresponding to step S3 to step S4, and loops through step S5 to step S6 until the form preview effect reaches the expected result; Step S9: When the designed form meets the business and demand effects, the administrator clicks the publish button to store the form persistently; Step S10: The form filler obtains the configuration json data from the service backend through the client to render a visual form, fills in the complete data and submits it.

2. A visual zero-code custom form generation method according to claim 1, characterized in that: In step S1, after the administrator logs in using the corresponding role account, the front-end management system provides the administrator with a visual page for interacting with the service backend.

3. A visual zero-code custom form generation method according to claim 1, characterized in that: In step S3, the form components include the following categories: group title, single text line, multi-line text, multiple selections, drop-down list, cascading drop-down list, date, time, date and time, value, integer, picture attachment, document attachment, switch, rating, signature and rich text.

4. A visual zero-code custom form generation method according to claim 3, characterized in that: The signature component is encapsulated based on the new HTML5 standard canvas, and the drawable area is defined by HTML code combined with height and width attributes.

5. A visual zero-code custom form generation method according to claim 1, characterized in that: In step S4, the canvas area is sorted up, down, left, and right using the new HTML5 feature drag.

6. A visual zero-code custom form generation method according to claim 1, characterized in that: In step S5, the form attributes include identification name, prompt text, field description, whether required, customer visibility and component ratio.

7. A visual zero-code custom form generation method according to claim 1, characterized in that: In step S6, the browser local storage uses the local storage localStorage that is persistent according to the new HTML5 standard.

8. A visual zero-code custom form generation method according to claim 1, characterized in that: In step S6, the preview page is used to simulate the form user to fill in and select the form, and simulate submission after filling in. In step S9, the form submission contains two fields, namely the form name and the form description; The form name is a brief definition of the corresponding custom form, and the form description is a detailed description of the custom form. In step S9, the persistent storage of the form is stored in the database by calling the API interface of the service backend.

9. A visual zero-code custom form generation method according to claim 8, characterized in that: The simulated submission operation includes two fields, namely user name and contact information.

Images