CN114327448A - Method for generating form nested container - Google Patents

Abstract

The invention provides a method for generating a form nested container, which generates a form nested container-paragraph according to a form engine, a flow engine and a rendering engine; the paragraph generation method comprises the following steps: generating paragraph data; generating a paragraph control; the paragraph state is configured. The invention has the beneficial effects that: a dynamic form nesting container-paragraph is designed, and a form engine is endowed with the capability of managing fields in a fine-grained and batch mode. Meanwhile, because the fields of different classifications and different levels are nested, the pain point with single layout dimension of the form field is solved.

Description

A Generating Method of Form Nested Container

technical field

The invention relates to the technical field of computers, in particular to a method for generating form nested containers.

Background technique

According to Gartner (industry research report platform), the market demand for application development in 2021 will be five times the production capacity of IT companies, which means that there is a great imbalance between market demand and supply. At the same time, the traditional software development method has the disadvantages of high development labor cost, long project cycle, low demand conversion rate, and low standardization. In order to solve this kind of capacity imbalance and pain points, various low-code/no-code platforms have emerged one after another, and all of them are developing rapidly.

The form engine, one of the core functions of low-code/no-code, is naturally upgraded quickly. However, when the scene is complex and there are many form items, the layout of the fields of the common dynamically generated form is single-dimensional and difficult to manage. For different levels, there is no better way to organize the fields of different categories.

In view of this, the present invention designs and implements a dynamic form nested container-paragraph based on the form engine, the process engine and the rendering engine, which endows the form engine with the ability to manage fields in fine-grained batches. At the same time, because the fields of different categories and levels are nested, it also solves the pain point of the single dimension of the form field layout.

SUMMARY OF THE INVENTION

In order to solve the above technical problems, the present invention discloses a method for generating form nested containers, and the technical scheme of the present invention is implemented as follows:

A method for generating a form nested container, which generates a form nested container-paragraph according to a form engine, a process engine and a rendering engine;

The paragraph generation method includes the following steps:

Generate paragraph data; add a field to the field warehouse on the left side of the form designer and name it a paragraph; when dragging a paragraph into the form designer, the form engine calculates the dragging position and adds a new paragraph data to the form data corresponding to the entire form .

A paragraph control is generated; the rendering engine renders the paragraph control through the paragraph data.

Configure paragraph state data. A paragraph configuration component is added to the process node editing page of the process engine, and the paragraph status is configured through the paragraph configuration component, and a request is sent to the server to modify the corresponding form data.

Preferably, the form data includes form row data; the form row data includes form column data; the form column data includes field data; and the field data includes paragraph data.

Preferably, the paragraph data includes field title, field type, field ID, field template ID, prompt, editable, hidden, data type, default value of department, maximum value, minimum value form ID, maximum number of options, minimum value Number of options, scan type, subfield width, subfield array, whether to validate the flag, configuration item array, field default type, and whether to expand the flag.

Preferably, the data structure of the subfield array is the same as that of the form data.

Preferably, the subfield array includes subfield data of the paragraph; the paragraph control includes a subfield control.

Preferably, the paragraph control detects the source of the subfield and performs different processing according to the source.

Preferably, the functions of the paragraph control include copying subfields, deleting subfields and moving subfields.

Preferably, the paragraph configuration component includes a default state selector, a batch state selector, and an expand-collapse state selector.

Preferably, the default state selector controls the default state when adding a subfield; the batch state selector can operate the subfield states in batches; the expand/collapse state selector controls the expanded/collapsed state of the paragraph.

Preferably, both the default state selector and the batch state selector provide editable, visible and hidden options; the expand/collapse state selector provides two options: expand and collapse.

Implementing the technical solution of the present invention can solve the problem in the prior art that when the scene is relatively complex and there are many form items, the field layout dimension of the common dynamically generated form is single, difficult to manage, and there is no better organization for different levels and different categories of fields. The technical problem of the present invention is implemented; by designing a dynamic form nested container-paragraph, the form engine is given the ability to manage fields in fine-grained batches. At the same time, because the fields of different categories and levels are nested, it also solves the pain point of the single dimension of the form field layout.

Description of drawings

In order to explain the embodiments of the present invention or the technical solutions in the prior art more clearly, the following briefly introduces the accompanying drawings that need to be used in the description of the embodiments or the prior art. Obviously, the accompanying drawings in the following description are only It is an embodiment of the present invention. For those of ordinary skill in the art, other drawings can also be obtained according to these drawings without creative efforts.

Wherein the same parts are denoted by the same reference numerals. It should be noted that the terms front, rear, left, right, top and bottom used in the following description refer to directions in the drawings, and the terms bottom and top, inner and outer respectively refer to towards or away from a particular component geometry the direction of the center.

Fig. 1 is the general view of the workflow of establishing paragraph in the embodiment;

Fig. 2 is the working schematic diagram of the form engine in the embodiment;

Fig. 3 is the schematic diagram of the process engine work in the embodiment;

FIG. 4 is a working schematic diagram of the rendering engine in the embodiment.

Detailed ways

The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, but not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the protection scope of the present invention.

Example

In a specific embodiment, as shown in Fig. 1, Fig. 2, Fig. 3 and Fig. 4, a method for generating a form nested container generates a form nested container-paragraph according to a form engine, a process engine and a rendering engine ;

The paragraph generation method includes the following steps:

Generate paragraph data; add a field to the field warehouse on the left side of the form designer and name it a paragraph; when dragging a paragraph into the form designer, the form engine calculates the dragging position and adds a new paragraph data to the form data corresponding to the entire form .

The form data includes form row data; the form row data includes form column data; the form column data includes field data; and the field data includes paragraph data. The paragraph data includes field title, field type, field ID, field template ID, prompt, editable, hidden, data type, department default value, maximum value, minimum value form ID, maximum number of options, minimum number of options, Scan type, subfield width, subfield array, whether to validate the flag, configuration item array, field default type, and whether to expand the flag. The data structure of the subfield array is the same as that of the form data. The subfield array includes subfield data of the paragraph; the paragraph control includes a subfield control.

A paragraph control is generated; the rendering engine renders the paragraph control through the paragraph data. The paragraph control detects the source of the subfield and handles it differently depending on the source. Paragraph control functions include copying subfields, deleting subfields, and moving subfields.

When the subfield comes from the paragraph field of the field warehouse on the left, it will prompt that the paragraph field cannot be added to the paragraph;

When the subfield comes from a non-paragraph field in the field warehouse on the left, calculate the drag and drop position, and add the data of this field to the corresponding position of the subfield array in the paragraph data;

When the subfield comes from other first-level fields of the form designer, delete the corresponding field data in the form data, calculate the dragging position, and add it to the corresponding position in the subfield array of the paragraph data;

When the subfield comes from other subfields in the form designer, delete the field data from the subfield array of the current paragraph data, calculate the dragging position, and add it to the corresponding position in the subfield array of the new paragraph data;

When the subfield is derived from the current paragraph control of the form designer, the drag position is calculated and the field data is moved to the corresponding position in the subfield array.

Configure paragraph state data. A paragraph configuration component is added to the process node editing page of the process engine, and the paragraph status is configured through the paragraph configuration component, and a request is sent to the server to modify the corresponding form data.

The paragraph configuration component includes a default state selector, a bulk state selector, and an expand-collapse state selector. The default state selector controls the default state when adding subfields; the batch state selector can operate the subfield states in batches; the expand/collapse state selector controls the expanded/collapsed state of a paragraph. Both the default state selector and the batch state selector provide editable, visible and hidden options; the expand/collapse state selector provides two options: expand and collapse.

In this embodiment, a method for generating a paragraph control is provided. Including: the server returns corresponding form data according to the application identifier and the form type; the form data includes form row data, the form row data includes form column data, and the form column data is the data corresponding to each form field; paragraph data As one of the form fields, it also includes an array of subfields within the paragraph and whether to expand the flag. The internal subfield array is similar to the aforementioned table data structure;

The indicating whether to expand or not includes: expanding and collapsing.

The any field data includes field status data.

The stated field status data includes: editable, visible only, hidden.

This embodiment provides a method for generating paragraph field data. Including: the form engine controls the display state of the paragraph field in the field warehouse according to the user authority of the client; dragging the paragraph field to the form designer, the form engine calculates the dragging position, and adds the form column to the corresponding position in the form data The data is the paragraph field data, and the paragraph control is generated in the form designer synchronously; the title and prompt in the paragraph data are modified through the text controls such as the title and prompt in the paragraph control.

Optionally, copy an existing paragraph field in the form designer, generate a new paragraph control below the aforementioned existing paragraph in the form designer, and add paragraph field data in the corresponding position of the form data; the title, prompt and Subfield data will be replicated synchronously, and corresponding field controls will be generated synchronously in the form designer.

Optionally, drag a non-paragraph field from the field warehouse to the paragraph control, add a paragraph subfield control in the dragging position of the paragraph control, and add a new paragraph subfield control in the corresponding position of the internal subfield data of the paragraph data. Increment subfield data.

Optionally, drag a first-level non-paragraph field in the form designer into the paragraph control, add a paragraph subfield control in the dragging position of the paragraph control, and add a paragraph subfield control in the corresponding position of the internal subfield data of the paragraph data. Add subfield data and delete the original data at the same time. The original field configuration data is synchronized to the new field data.

Optionally, drag the subfield control in the current paragraph control to another position of the current paragraph control, and move the internal subfield data of the paragraph data to the corresponding position.

Optionally, drag subfield controls in other paragraph controls to the current paragraph control, add a paragraph subfield control at the dragging position of the current paragraph control, and add a new paragraph subfield control in the corresponding position of the internal subfield data of the current paragraph data. Add subfield data and delete the original data at the same time. The original field configuration data is synchronized to the new field data.

This embodiment provides a method for configuring paragraph state data. Including: adding a paragraph configuration component on the process node editing page of the process engine; the paragraph configuration component includes a default state selector; a batch state selector; expand and collapse state selectors; different state selectors control different state data;

S101: form engine paragraph component, as shown in Figure 2;

Among them, the paragraph component is mainly divided into two parts, the first part adds a paragraph field to the form engine;

Specifically, an advanced field named paragraph is added to the field warehouse on the left side of the form designer. When dragging and dropping the field into the form designer, the form engine will calculate the dragging position, and the current field type is in the corresponding position of the form data. Add a default paragraph data. The attributes of the paragraph data include but are not limited to the following: field title, field type, field identification, field template identification, prompt, whether to edit, whether to hide, data type, department default value, maximum value, minimum value form identification, Maximum number of options, minimum number of options, scan type, subfield width, subfield array, whether to verify the flag, configuration item array, field default type, process status, etc.

The second part of the paragraph component adds paragraph controls to the form engine;

Specifically, the paragraph control processes the paragraph data, and renders corresponding HTML elements on the page.

Specifically, the paragraph control checks the source of the subfield and performs different types of processing;

Exemplarily, when the subfield is a paragraph field from the left field warehouse, a pop-up window prompts that the paragraph field cannot be added to the paragraph field.

Exemplarily, when the subfield is a non-paragraph field from the left field warehouse, the dragging position is calculated, and the field data is added to the corresponding position in the subfield array of the paragraph data.

Exemplarily, when the subfield is another first-level field from the form designer, the field data in the form data is deleted, the dragging position is calculated, and then added to the corresponding position in the subfield data of the paragraph data. Set the sectionId (section ID) of the subfield data to the id (unique ID) of the current section.

Exemplarily, when the subfield is another paragraph subfield from the form designer, the field data is deleted from the subfield array of the current paragraph data, the drag position is calculated, and then added to the subfield data of the new paragraph data the corresponding location. Modify the sectionId (section identifier) of the subfield data to the id (unique identifier) of the current paragraph.

Exemplarily, when the subfield comes from the current paragraph control of the form designer, the drag position is calculated to move the field structure data to the corresponding position in the array.

Specifically, the paragraph control has the same functions of copying, deleting, and moving subfields as the form engine;

During the specific implementation, if a subfield is clicked, the subfield is the current active field. The active field displays copy and delete buttons. Click the Copy button to copy the subfield after said subfield. Click the delete button to prompt whether to confirm the deletion. After confirming the deletion, delete the current subfield.

When the active field is not the first row field and the field in the previous row is less than four columns and the active field is not a picture selection, positioning, table field and the first field of the previous row is also not a picture selection, positioning, table field, the above will be displayed. Move button, click to move the currently active field up one line.

When the currently active field is not the last column of the previous row, the right-shift button is displayed. Click to move the current field one column to the right, and the next column of the current active field to move one column to the left.

When the number of columns in the row where the current active field is located is greater than 1, the Move Down button is displayed. Click to move the current field down one row.

When the currently active field is not the first column of the current row, the Move Left button is displayed, click to move the current field one column to the left, and the previous column of the current active field to move one column to the right.

S102 Process Engine Paragraph Status Component, as shown in Figure 3;

Among them, when the subfield is not a table field, the edit mask and field state selector are displayed.

Specifically, the field state selector has three state buttons, editable, visible only, and hidden. In this way, when the application is used, the editing and display states of the fields in the current process node are controlled. When the subfield is a description field or the current process node is a CC node, the editable button is not displayed.

For example, when the subfield is a table field, the edit mask and table state edit buttons are displayed. Click the table status edit button to enter the table permission pop-up window to manage table permissions, including adding new rows, editing existing rows, and deleting existing rows. The table subfield authority includes a batch state selector and a field state selector for each field, which can be used for batch or single field state selection.

Specifically, when the state of the current process node is the hidden state, only the mask is displayed.

Among them, when the mouse is moved to the paragraph head element, the paragraph control component is displayed.

Specifically, the paragraph control component is divided into three parts, namely the default state selector, the batch state selector, and the expand/collapse state selector. Both the default state selector and the batch state selector are field state selectors. The former controls the field state assigned by default when a new field is added in the paragraph, and the latter controls the field state of all subfields in the paragraph. Expand Collapse State Selector Sets the expanded collapse state of the paragraph.

S103 rendering engine paragraph component;

The process node where the user is located and the process node edited in the process engine correspond to the relevant state of the paragraph, and determine whether to render the paragraph control in the form, as shown in FIG. 4 .

Exemplarily, when the current node paragraph is not in the hidden state, the paragraph control is rendered, and the state of each subfield determines whether to render the current subfield, as well as the rendering state, default value, prompt, associated data, etc.

It should be pointed out that the above are only preferred embodiments of the present invention, and are not intended to limit the present invention. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention shall be Included in the protection scope of the present invention.

Claims (10)

1. A method for generating a form nested container is characterized in that a form nested container-paragraph is generated according to a form engine, a flow engine and a rendering engine;

the paragraph generation method comprises the following steps:

generating paragraph data; adding fields in a field warehouse on the left side of the form designer and naming the fields as paragraphs; when the paragraph is dragged to the form designer, the form engine calculates the dragging position, and a new paragraph data is added in the form data corresponding to the whole form.

Generating a paragraph control; and rendering the paragraph control by the rendering engine through the paragraph data.

Paragraph state data is configured. And adding a paragraph configuration component on a process node editing page of the process engine, configuring the paragraph state through the paragraph configuration component, and sending a request to the server to modify the corresponding form data.

2. The method of claim 1, wherein the form data comprises form line data; the form row data comprises form column data; the form column data comprises field data; the field data includes paragraph data.

3. The method of claim 2, wherein the paragraph data comprises a field header, a field type, a field identifier, a field template identifier, a hint, whether editable, whether hidden, a data type, a department default, a maximum, a minimum form identifier, a maximum number of options, a minimum number of options, a scan type, a subfield width, a subfield array, whether verified, a configuration array, a field default type, and whether expanded.

4. The method of claim 3, wherein the subfield array has the same data structure as the form data.

5. The method of claim 4, wherein the subfield array comprises subfield data of paragraphs; the paragraph control includes a sub-field control.

6. The method of claim 5, wherein the paragraph control detects the source of the sub-field and performs different processing according to the source.

7. The method of claim 6, wherein the functions of the paragraph control include a copy subfield, a delete subfield, and a move subfield.

8. The method of claim 7, wherein the paragraph configuration component comprises a default state selector, a batch state selector, and an expand-collapse state selector.

9. The method of claim 8, wherein the default state selector controls the default state of the new sub-field; the batch status selector may operate the sub-field status in batches; the deployment stowed state selector controls the deployment stowed state of the paragraph.

10. The method of claim 9, wherein the default state selector and the batch state selector both provide editable, only three options being visible and hidden; the unfolding and folding state selector provides two options of unfolding and folding.

Images