A method for generating nested form containers

Abstract

The present invention provides a method for generating a form nested container, which generates a form nested container-a paragraph according to a form engine, a process engine and a rendering engine; the paragraph generation method includes the following steps: generating paragraph data; generating a paragraph control; and configuring the paragraph state. The beneficial effect of the present invention is that by designing a dynamic form nested container-a paragraph, the form engine is given the ability to manage fields in batches in a fine-grained manner. At the same time, because fields of different categories and levels are nested, the pain point of a single dimension of form field layout is also solved.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method for generating a form nested container. Background Art

[0002] According to Gartner (industry research report platform), the market demand for application development in 2021 will be five times the capacity of IT companies, which means there is a huge imbalance between market demand and supply. At the same time, traditional software development methods have pain points such as high development labor costs, long project cycles, low demand conversion rates, and low standardization. In order to solve this capacity imbalance and pain points, various low-code / no-code platforms have emerged and are developing rapidly.

[0003] The form engine, one of the core functions of low-code / no-code, has naturally been upgraded rapidly. However, when the scenario is more complex and there are more form items, the layout of ordinary dynamically generated form fields is single-dimensional and difficult to manage. There is no good way to organize fields of different levels and categories.

[0004] In view of this, the present invention designs and implements a dynamic form nested container - paragraph based on the form engine, process engine and rendering engine, giving the form engine the ability to manage fields in batches in a fine-grained manner. At the same time, because fields of different categories and levels are nested, the pain point of the single dimension of form field layout is also solved. Summary of the invention

[0005] In order to solve the above technical problems, the present invention discloses a method for generating a form nested container. The technical solution of the present invention is implemented as follows:

[0006] A method for generating a form nested container, generating a form nested container-a paragraph according to a form engine, a process engine and a rendering engine;

[0007] The paragraph generation method comprises the following steps:

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

[0009] Generate a paragraph control; the rendering engine renders the paragraph control according to the paragraph data.

[0010] Configure paragraph status data. Add a paragraph configuration component to the process node editing page of the process engine, configure the paragraph status through the paragraph configuration component, and send a request to the server to modify the corresponding form data.

[0011] 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.

[0012] Preferably, the paragraph data includes field title, field type, field identifier, field template identifier, prompt, whether editable, whether hidden, data type, department default value, maximum value, minimum value form identifier, maximum number of options, minimum number of options, scan type, subfield width, subfield array, whether to verify identifier, configuration item array, field default type and whether to expand identifier.

[0013] Preferably, the data structure of the sub-field array is the same as that of the form data.

[0014] Preferably, the subfield array includes subfield data of a paragraph; and the paragraph control includes a subfield control.

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

[0016] Preferably, the functions of the paragraph control include copying a subfield, deleting a subfield and moving a subfield.

[0017] Preferably, the paragraph configuration component includes a default state selector, a batch state selector, and an expand / collapse state selector.

[0018] Preferably, the default state selector controls the default state when a subfield is added; the batch state selector can batch operate the subfield states; and the expand / collapse state selector controls the expand / collapse state of a paragraph.

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

[0020] The technical solution of the present invention can solve the technical problems in the prior art that when the scene is complex and there are many form items, the layout dimension of the ordinary dynamically generated form fields is single, difficult to manage, and there is no good organization method for fields of different levels and categories; the technical solution of the present invention is implemented by designing a dynamic form nesting container - paragraph, giving the form engine the ability to manage fields in batches in a fine-grained manner. At the same time, because the fields of different categories and levels are nested, the pain point of the single layout dimension of the form fields is also solved. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] 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 one embodiment of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0022] It should be noted that the words front, back, left, right, top and bottom used in the following description refer to directions in the drawings, and the words bottom and top, inside and outside refer to directions toward or away from the geometric center of a specific component, respectively.

[0023] Figure 1 A general diagram of the workflow for establishing paragraphs in the embodiments;

[0024] Figure 2 It is a schematic diagram of the form engine operation in the embodiment;

[0025] Figure 3 It is a schematic diagram of the working process engine in the embodiment;

[0026] Figure 4 It is a schematic diagram of the working of the rendering engine in the embodiment. DETAILED DESCRIPTION

[0027] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0028] Example

[0029] In a specific embodiment, Figure 1 , Figure 2 , Figure 3 and Figure 4 As shown, a method for generating a form nested container, generating a form nested container-paragraph according to a form engine, a process engine and a rendering engine;

[0030] The paragraph generation method comprises the following steps:

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

[0032] The form data includes form row data; the form row data includes form column data; the form column data includes field data; the field data includes paragraph data. The paragraph data includes field title, field type, field identifier, field template identifier, prompt, whether editable, whether hidden, data type, department default value, maximum value, minimum value form identifier, maximum number of options, minimum number of options, scan type, subfield width, subfield array, whether to verify identifier, configuration item array, field default type and whether to expand identifier. 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.

[0033] Generate a paragraph control; the rendering engine renders the paragraph control using the paragraph data. The paragraph control detects the source of the subfield and performs different processing according to the source. The functions of the paragraph control include copying the subfield, deleting the subfield and moving the subfield.

[0034] When the subfield comes from the paragraph field in the field warehouse on the left, it is prompted that the paragraph field cannot be added to the paragraph;

[0035] When the subfield comes from a non-paragraph field in the left field warehouse, the drag position is calculated and the data of the field is added to the corresponding position of the subfield array in the paragraph data;

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

[0037] 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 drag position, and then add it to the corresponding position in the subfield array of the new paragraph data;

[0038] When the sub-field originates 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 sub-field array.

[0039] Configure paragraph status data. Add a paragraph configuration component to the process node editing page of the process engine, configure the paragraph status through the paragraph configuration component, and send a request to the server to modify the corresponding form data.

[0040] The paragraph configuration component includes a default state selector, a batch state selector, and an expand / collapse state selector. The default state selector controls the default state when adding a subfield; the batch state selector can batch operate the subfield state; the expand / collapse state selector controls the expand / collapse state of the paragraph. The default state selector and the batch state selector both provide three options: editable, visible only, and hidden; the expand / collapse state selector provides two options: expand and collapse.

[0041] In this embodiment, a method for generating a paragraph control is provided. It includes: 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; the paragraph data is one of the form fields, and also includes a paragraph internal sub-field array and an expansion flag. The internal sub-field array is similar to the aforementioned table data structure;

[0042] The whether to expand flag includes: expand, collapse.

[0043] Any field data described includes field status data.

[0044] The field status data include: editable, visible only, hidden.

[0045] This embodiment provides a method for generating paragraph field data, including: the form engine controls the display status of the paragraph field in the field warehouse according to the client user authority; drags the paragraph field to the form designer, the form engine calculates the drag position, adds the form column data at the corresponding position in the form data, that is, the paragraph field data, and synchronously generates a paragraph control in the form designer; modifies the title and prompt in the paragraph data through the text controls such as the title and prompt in the paragraph control.

[0046] Optionally, copy an existing paragraph field in the form designer, generate a new paragraph control below the existing paragraph in the form designer, and add paragraph field data at the corresponding position of the form data; the title, prompt and subfield data of the paragraph field will be synchronously copied, and a corresponding field control will be synchronously generated in the form designer.

[0047] Optionally, drag a non-paragraph field from the field repository to the paragraph control, add a paragraph subfield control at the dragging position of the paragraph control, and add subfield data to the corresponding position of the internal subfield data of the paragraph data.

[0048] Optionally, drag a first-level non-paragraph field in the form designer into the paragraph control, add a paragraph subfield control at the drag position of the paragraph control, and add subfield data to the corresponding position of the internal subfield data of the paragraph data, while deleting the original data. The original field configuration data is synchronized to the new field data.

[0049] Optionally, drag the subfield control in the current paragraph control to another position of the current paragraph control to move the internal subfield data of the paragraph data to a corresponding position.

[0050] Optionally, drag a subfield control from another paragraph control to the current paragraph control, add a paragraph subfield control at the dragged position of the current paragraph control, and add subfield data to the corresponding position of the internal subfield data of the current paragraph data, while deleting the original data. The original field configuration data is synchronized to the new field data.

[0051] This embodiment provides a method for configuring paragraph state data, including: adding a paragraph configuration component to the process node editing page of the process engine; the paragraph configuration component includes a default state selector; a batch state selector; an expand and collapse state selector; different state selectors control different state data;

[0052] S101: Form engine paragraph component, such as Figure 2 ;

[0053] The paragraph component is mainly divided into two parts. The first part is to add paragraph fields to the form engine.

[0054] Specifically, add an advanced field named paragraph in the field warehouse on the left side of the form designer. When you drag the field to the form designer, the form engine will calculate the drag position and add a default paragraph data in the corresponding position of the current field type in the form data. The attributes of the paragraph data include but are not limited to the following: field title, field type, field identifier, field template identifier, prompt, whether editable, whether hidden, data type, department default value, maximum value, minimum value form identifier, maximum number of options, minimum number of options, scan type, subfield width, subfield array, whether to verify identifier, configuration item array, field default type, process status, etc.

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

[0056] Specifically, the paragraph control processes the paragraph data and renders the corresponding HTML element on the page.

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

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

[0059] Exemplarily, when the subfield is a non-paragraph field from the left field repository, the drag position is calculated and the field data is added to the corresponding position in the subfield array of the paragraph data.

[0060] Exemplarily, when the subfield is another primary field from the form designer, the field data in the form data is deleted, the drag position is calculated, and then added to the corresponding position in the subfield data of the paragraph data. The sectionId (paragraph ID) of the subfield data is set to the id (unique ID) of the current paragraph.

[0061] 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 corresponding position in the subfield data of the new paragraph data. The sectionId (paragraph ID) of the subfield data is modified to the id (unique ID) of the current paragraph.

[0062] 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 a corresponding position in the array.

[0063] Specifically, the paragraph control has the same functions as the form engine to copy, delete, and move subfields;

[0064] When implementing this function, click on a subfield, and the subfield will be the current active field. The active field will display the Copy and Delete buttons. Click the Copy button to copy the subfield to the subfield below the subfield. Click the Delete button to confirm the deletion. After confirming the deletion, the current subfield will be deleted.

[0065] When the active field is not the first row of fields and the fields in the previous row have less than four columns and the active field is not a picture selection, positioning, or table field and the first field in the previous row is not a picture selection, positioning, or table field, an up button will be displayed. Clicking it will move the current active field up one row.

[0066] When the current active field is not the last column of the previous row, a right move button is displayed. Clicking it will move the current field one column to the right and the next column of the current active field one column to the left.

[0067] When the number of columns in the row where the current active field is located is greater than 1, a down button is displayed. Clicking it will move the current field down one row.

[0068] When the current active field is not the first column of the current row, a left move button is displayed. Clicking it will move the current field one column to the left and the previous column of the current active field one column to the right.

[0069] S102 process engine paragraph status component, such as Figure 3 ;

[0070] When the subfield is not a table field, the edit mask and field status selector are displayed.

[0071] Specifically, the field status selector has three status buttons: editable, visible only, and hidden. This controls the editing and display status of the field in the current process node when the application is used. When the subfield is a description field or the current process node is a CC node, the editable button is not displayed.

[0072] For example, when the subfield is a table field, the edit mask and table status edit button 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 permissions include a batch status selector and a field status selector for each field, which can select the status of batches or individual fields.

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

[0074] When the mouse is moved to the paragraph header element, the paragraph control component is displayed.

[0075] Specifically, the paragraph control component is divided into three parts, namely the default state selector, batch state selector, and expand / collapse state selector. The default state selector and batch state selector are both field state selectors. The former controls the field state assigned by default when adding a new field to a paragraph, and the latter controls the field state of all subfields in the paragraph. The expand / collapse state selector sets the expand / collapse state of a paragraph.

[0076] S103 rendering engine paragraph component;

[0077] The process node where the user is located and the paragraph-related status of the process node edited in the process engine determine whether to render the paragraph control in the form, such as Figure 4 .

[0078] Exemplarily, when the current node paragraph is not in a 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.

[0079] It should be pointed out that the above is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present invention should be included in the protection scope of the present invention.

Claims

1. A method for generating a form nested container, characterized in that: Generate a form nested container, which is a paragraph, based on the form engine, process engine, and rendering engine; The paragraph generation method comprises the following steps: Generate paragraph data; add a field in the field warehouse on the left side of the form designer and name it paragraph; when dragging a paragraph into the form designer, the form engine calculates the drag position and adds a new paragraph data to the form data corresponding to the entire form; Generate a paragraph control; the rendering engine renders the paragraph control according to the paragraph data; Configure paragraph status data; add a paragraph configuration component to the process node editing page of the process engine, configure the paragraph status through the paragraph configuration component, and send a request to the server to modify the corresponding form data; The form data includes form row data; the form row data includes form column data; The form column data includes field data; the field data includes paragraph data; The paragraph data includes field title, field type, field identifier, field template identifier, prompt, whether editable, whether hidden, data type, department default value, maximum value, minimum value form identifier, maximum number of options, minimum number of options, scan type, subfield width, subfield array, whether to verify identifier, configuration item array, field default type and whether to expand identifier; The data structure of the sub-field array is the same as that of the form data; The subfield array includes subfield data of a paragraph; the paragraph control includes a subfield control; The paragraph control detects the source of the subfield and handles it differently depending on the source; When the subfield comes from the paragraph field in the field warehouse on the left, it is prompted that the paragraph field cannot be added to the paragraph; When the subfield comes from a non-paragraph field in the left field warehouse, the drag position is calculated and the data of the field is added to the corresponding position of the subfield array in the paragraph data; When the subfield comes from other first-level fields in the form designer, delete the corresponding field data in the form data, calculate the drag position, and then 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 drag position, and then add it to the corresponding position in the subfield array of the new paragraph data; When the sub-field originates 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 sub-field array.

2. A method for generating a form nested container according to claim 1, characterized in that: The functions of the paragraph control include copying subfields, deleting subfields, and moving subfields.

3. A method for generating a form nested container according to claim 2, characterized in that: The paragraph configuration component includes a default state selector, a batch state selector, and an expand / collapse state selector.

4. A method for generating a form nested container according to claim 3, characterized in that: The default state selector controls the default state when adding a subfield; the batch state selector can batch operate the subfield state; the expand / collapse state selector controls the expand / collapse state of the paragraph.

5. A method for generating a form nested container according to claim 4, characterized in that: The default state selector and the batch state selector both provide three options: editable, visible only, and hidden; the expand / collapse state selector provides two options: expand and collapse.

Images