Form configuration method, device, equipment and medium

Abstract

The present disclosure provides a form configuration method that can be used in the financial field. The method includes: providing a step bar tool in a form designer; configuring N step bars based on a configuration operation of the step bar tool, wherein the N step bars correspond one-to-one to N steps, where N is an integer greater than 1; when each of the N step bars is selected, configuring a form corresponding to the step of the selected step bar based on a user's form configuration operation; and after the forms corresponding to the N steps corresponding to the N step bars are configured, creating a step-by-step form based on a form creation operation, wherein the step-by-step form includes the N steps, and the forms under different steps are associated with each other according to the N steps. The present disclosure also provides a form configuration device, equipment, storage medium, and program product.

Description

Technical Field

[0001] The present disclosure relates to the field of Internet technology and can be applied to the financial field. More specifically, it relates to a form configuration method, apparatus, device, medium, and program product. Background Art

[0002] In front-end development, form pages are one of the main forms of presentation for back-end business. As business becomes more and more complex, form development and maintenance also become more and more complex. In existing technologies, developers can quickly and easily create form pages through visual operations in form designers (e.g., FormMaking).

[0003] In the process of implementing the solution of the present invention, the inventor discovered the following problem in the prior art: when creating a form page that includes multiple steps linked together (hereinafter referred to as a step-by-step form), the form designer can only design the form page for each step separately according to each step (so that these form pages are independent of each other). Then, when inserting the form pages for each step into the code of the front-end application, the developer needs to write code to establish the logical relationship between the form pages for each step in order to present the multi-step linked form effect to the end user. This not only leads to a large amount of repeated development operations during the form design phase, but also requires the front-end developer to perform secondary development when inserting the form pages into the code of the front-end application, which is inefficient. Summary of the Invention

[0004] In view of the above problems, embodiments of the present disclosure provide a form configuration method, apparatus, device, medium, and program product for improving the efficiency of step-by-step form development.

[0005] A first aspect of an embodiment of the present disclosure provides a form configuration method. The method includes: providing a step bar tool in a form designer; configuring N step bars based on a configuration operation of the step bar tool, wherein the N step bars correspond one-to-one to N steps, where N is an integer greater than 1; when each of the N step bars is selected, configuring a form corresponding to the step of the selected step bar based on a user's form configuration operation; and after the forms corresponding to the N steps corresponding to the N step bars are configured, creating a step-by-step form based on a form creation operation, wherein the step-by-step form includes the N steps, and the forms under different steps are associated with each other according to the N steps.

[0006] According to an embodiment of the present disclosure, the configuring of the N step bars based on the configuration operation of the step bar tool includes: configuring name information of the N step bars; and / or configuring style types of the N step bars.

[0007] According to an embodiment of the present disclosure, the method further includes: when rendering the step-by-step form, obtaining information of the current step in the step-by-step form; and rendering the form under the current step.

[0008] According to an embodiment of the present disclosure, when rendering the step-by-step form, obtaining information of the current step in the step-by-step form includes: obtaining attribute information of the step-by-step form; and

[0009] When the attribute information includes information of the step bar, the information of the current step passed in by the step-by-step form is obtained. The rendering of the form under the current step includes: rendering the step bar corresponding to the current step and all form controls under the current step.

[0010] According to an embodiment of the present disclosure, when rendering the step-by-step form, obtaining the information of the current step in the step-by-step form also includes: in response to the user selecting the next step in the form of the current step, verifying the form data under the current step; and after the form data under the current step is verified, updating the information of the current step with the information of the next step.

[0011] According to an embodiment of the present disclosure, verifying the form data under the current step includes: traversing the information list of the JSON configuration of the step-by-step form; when traversing to the information of the step bar, obtaining the information of the current step in the step-by-step form; and verifying the form data under the current step.

[0012] According to an embodiment of the present disclosure, verifying the form data under the current step includes: defining a two-dimensional array variable, the two-dimensional array variable being used to store the form data under each step in the step-by-step form, wherein a first dimension of the two-dimensional array variable is the number of steps, and a second dimension is the form data under each step; storing the form data in all form controls under the current step in the step-by-step form in the second dimension of the two-dimensional data variable under the current step; and verifying the form data under the current step in the two-dimensional array variable.

[0013] According to a second aspect of an embodiment of the present disclosure, a form configuration device is provided. The form configuration device includes: a step bar configuration module, a step-by-step form configuration module, and a step-by-step form creation module. The step bar configuration module is used to provide a step bar tool in a form designer, and based on the configuration operation of the step bar tool, configure N step bars, wherein the N step bars correspond one-to-one to N steps, and N is an integer greater than 1. The step-by-step form configuration module is used to configure the form under the step corresponding to the selected step bar based on the user's form configuration operation when each step bar in the N step bars is selected. The step-by-step form creation module is used to create a step-by-step form based on the form creation operation after the forms under the N steps corresponding one-to-one to the N step bars are respectively configured, wherein the step-by-step form includes the N steps, and the forms under different steps are mutually associated according to the N steps.

[0014] According to an embodiment of the present disclosure, the device further includes a form rendering module. The form rendering module is configured to obtain information of a current step in the step-by-step form and render the form under the current step when rendering the step-by-step form.

[0015] According to an embodiment of the present disclosure, the form rendering module is specifically used to obtain attribute information of the step-by-step form. When the attribute information contains information of the step bar, the module obtains information of the current step passed in by the step-by-step form, and renders the step bar corresponding to the current step and all form controls under the current step.

[0016] According to an embodiment of the present disclosure, the form rendering module further includes a form verification submodule. The form verification submodule is configured to verify the form data for the current step. The form rendering module is further configured to, in response to a user selecting the next step in the form of the current step, verify the form data for the current step via the form verification module, and update the information for the current step with the information for the next step after the form verification module verifies the form data for the current step.

[0017] According to an embodiment of the present disclosure, the form verification submodule is specifically used to: traverse the information list of the JSON configuration of the step-by-step form; when traversing to the information of the step bar, obtain the information of the current step in the step-by-step form; and verify the form data under the current step.

[0018] According to an embodiment of the present disclosure, the form verification submodule is further used to: define a two-dimensional array variable to store the form data under each step in the step-by-step form, wherein the first dimension of the two-dimensional array variable is the number of steps, and the second dimension is the form data under each step; store the form data in all form controls under the current step in the step-by-step form into the second dimension under the current step in the two-dimensional data variable; and verify the form data under the current step in the two-dimensional array variable.

[0019] A third aspect of the present disclosure provides an electronic device. The electronic device includes one or more processors and one or more memories. The one or more memories are used to store one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors perform the above method.

[0020] A fourth aspect of the embodiments of the present disclosure further provides a computer-readable storage medium having executable instructions stored thereon, which, when executed by a processor, causes the processor to execute the above method.

[0021] The fifth aspect of the embodiments of the present disclosure further provides a computer program product, including a computer program, which implements the above method when executed by a processor.

[0022] One or more of the above-mentioned embodiments have the following advantages or beneficial effects: when creating a step-by-step form, the logical relationship between the forms at different steps in the step-by-step form can be established. In this way, on the one hand, the development operation of the step-by-step form in the design phase is simplified, and the development of multiple form pages is avoided separately. On the other hand, when the code of the step-by-step form is inserted into the front-end application code, the developer can also avoid writing the logical code between the form pages at different steps, thereby improving the development efficiency of the step-by-step form. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] The above contents and other objects, features and advantages of the present disclosure will become more apparent through the following description of the embodiments of the present disclosure with reference to the accompanying drawings, in which:

[0024] Figure 1 Schematically illustrates an application scenario diagram of the form configuration method, apparatus, device, medium, and program product according to an embodiment of the present disclosure;

[0025] Figure 2 Schematically shows a user interaction interface diagram showing a step bar tool according to an embodiment of the present disclosure;

[0026] Figure 3 A schematic diagram of a step-by-step form according to an embodiment of the present disclosure is schematically shown;

[0027] Figure 4 The following schematically shows a flow chart of a form configuration method according to an embodiment of the present disclosure;

[0028] Figure 5 Schematically shows a configuration interface diagram of a configuration step bar according to an embodiment of the present disclosure;

[0029] Figure 6 The following schematically illustrates a process for implementing a step bar tool in FormMaking according to an embodiment of the present disclosure;

[0030] Figure 7 The flowchart of rendering a form in a form configuration method according to an embodiment of the present disclosure is schematically shown;

[0031] Figure 8 Schematically shows a flowchart of rendering a form in a form configuration method according to another embodiment of the present disclosure;

[0032] Figure 9 A flowchart of verifying form data in the current step in a form configuration method according to an embodiment of the present disclosure is schematically shown;

[0033] Figure 10 The following schematically illustrates a process for verifying form data in a current step of a step-by-step form in FormMaking according to an embodiment of the present disclosure;

[0034] Figure 11 A block diagram schematically shows a form configuration device according to an embodiment of the present disclosure; and

[0035] Figure 12 A block diagram of an electronic device suitable for implementing the form configuration method according to an embodiment of the present disclosure is schematically shown. DETAILED DESCRIPTION

[0036] Hereinafter, embodiments of the present disclosure will be described with reference to the accompanying drawings. However, it should be understood that these descriptions are merely exemplary and are not intended to limit the scope of the present disclosure. In the detailed description below, for ease of explanation, many specific details are set forth to provide a comprehensive understanding of the embodiments of the present disclosure. However, it is apparent that one or more embodiments may also be implemented without these specific details. In addition, in the following description, descriptions of well-known structures and technologies are omitted to avoid unnecessary confusion of the concepts of the present disclosure.

[0037] The terms used herein are only for describing specific embodiments and are not intended to limit the present disclosure. The terms "comprise," "include," etc. used herein indicate the presence of the features, steps, operations, and / or components, but do not exclude the presence or addition of one or more other features, steps, operations, or components.

[0038] All terms used herein (including technical and scientific terms) have the meanings commonly understood by those skilled in the art unless otherwise defined. It should be noted that the terms used herein should be interpreted as having a meaning consistent with the context of this specification and should not be interpreted in an idealized or overly rigid manner.

[0039] When expressions such as "at least one of A, B and C, etc." are used, they should generally be interpreted in accordance with the meaning of the expression commonly understood by those skilled in the art (for example, "a system having at least one of A, B and C" should include but is not limited to a system having A alone, B alone, C alone, A and B, A and C, B and C, and / or A, B, C, etc.).

[0040] In this document, it should be understood that any number of elements in the specification and drawings is for illustration rather than limitation, and any naming (for example, first, second) is only for distinction and does not have any limiting meaning.

[0041] In this article, a step-by-step form refers to a form structure composed of multiple form pages linked in a sequential order. Specifically, a step-by-step form can include multiple steps, each with a corresponding form page. Clicking Next on the form page for the current step allows users to jump from the current form page to the next form page. Furthermore, when the user completes the form page for the last step and clicks Submit, the form data from all form pages in the step-by-step form is submitted to the backend.

[0042] Embodiments of the present disclosure provide a form configuration method, apparatus, device, medium, and program product. The method includes first providing a step bar tool in a form designer, then configuring N step bars based on a configuration operation of the step bar tool, wherein the N step bars correspond one-to-one to N steps, where N is an integer greater than 1, then, when each of the N step bars is selected, configuring a form under the step corresponding to the selected step bar based on a user's form configuration operation, and after the forms under the N steps corresponding one-to-one to the N step bars are configured, creating a step-by-step form based on a form creation operation, wherein the step-by-step form includes N steps, and the forms under different steps are associated with each other according to the N steps.

[0043] According to an embodiment of the present disclosure, when creating a step-by-step form during the form design phase, a logical relationship between forms at different steps in the step-by-step form can be established. This simplifies the design and development operations of the step-by-step form and avoids the need to develop multiple form pages separately. On the other hand, when the code of the step-by-step form is inserted into the front-end application code, it also avoids the need for developers to write the logical relationship code between the form pages, thereby improving the development efficiency of the step-by-step form.

[0044] It should be noted that the form configuration method, apparatus, equipment, medium and program determined in the embodiments of the present disclosure can be used in the financial field (for example, in applications in Internet finance) and can also be used in any field other than the financial field. The present disclosure does not limit the application field.

[0045] Figure 1 The following schematically illustrates an application scenario diagram of the form configuration method, apparatus, device, medium, and program product according to an embodiment of the present disclosure. Figure 1 The examples shown are merely examples of system architectures to which the embodiments of the present disclosure may be applied, to help those skilled in the art understand the technical content of the present disclosure, but do not mean that the embodiments of the present disclosure may not be used in other devices, systems, environments or scenarios.

[0046] like Figure 1 As shown, the application scenario 100 according to this embodiment may include a developer 1, a terminal device 101, a network 102, and a server 103. The network 102 is used as a medium for providing a communication link between the terminal device 101 and the server 102. The network 104 may include various connection types, such as wired or wireless communication links or fiber optic cables.

[0047] Developer 1 can use terminal device 101 to interact with server 103 via network 102 to receive or send messages, etc. Terminal device 101 can be installed with front-end development tools and / or form designers (e.g., FormMaking, Bootstrap, Ueditor Formdesign Plugins Web, etc.).

[0048] The server 103 provides background support for the operations of the developer 1 in the front-end development tool. For example, the server 103 performs background processing on the operations of the developer 1 in the front-end development work and feeds back the processing results (such as whether the front-end code is generated successfully) to the terminal device.

[0049] When developer 1 uses the front-end development tool in terminal device 101 to develop a front-end application, he or she can use the form designer in terminal device 101 to quickly develop a form page. For example, developer 1 can design a form page in the form designer through visual operations (e.g., dragging various form controls, etc.), configure validation rules for the form data in the form designer, and then insert the code of the created form into the code of the front-end application developed in the front-end development tool, thereby implementing the design of the form in the front-end application. In this way, developers avoid the need to manually write a large amount of form code during front-end development.

[0050] The form configuration method provided by the embodiment of the present disclosure can be executed by the terminal device 101. Specifically, the developer 1 can create a step-by-step form by operating the form designer in the terminal device 101.

[0051] It should be understood that Figure 1 The number of terminal devices, networks and servers in the embodiment is merely illustrative. Any number of terminal devices, networks and servers may be provided as required.

[0052] Figure 2 The following schematically illustrates a user interaction interface 200 displaying a step bar tool according to an embodiment of the present disclosure. The user interaction interface 200 may be, for example, a user interaction interface of a form designer in the terminal device 101 .

[0053] like Figure 2 As shown, a step bar tool 201 is displayed in the user interaction interface 200. Developer 1 can configure the information of each step in the step-by-step form to be designed by operating the step bar tool 201. The display effect of the configured step bar can be referred to, for example, step 1 and step 2 in area 202.

[0054] Continuing with reference to area 202, according to an embodiment of the present disclosure, when developer 1 clicks step 1, a form for step 1 can be developed in the editing area of ​​area 202. When developer 1 clicks step 2, a form for step 2 can be developed in the editing area of ​​area 202. Furthermore, when developer 1 clicks control 203 for generating JSON or control 204 for generating code, a JSON configuration or code for a step-by-step form can be generated, wherein the step-by-step form includes the form for step 1, the form for step 2, and the logical order between the two.

[0055] Figure 3 A schematic diagram of a step-by-step form 300 according to an embodiment of the present disclosure is schematically shown.

[0056] like Figure 3As shown, the step-by-step form 300 includes two steps: organization head information 301 and organization information 302. Taking the step-by-step form 300 as an example, the user interaction process of the step-by-step form in the front-end application is briefly introduced.

[0057] First, the form under the step of organization head information 301 is displayed in the current view. This form is used to collect the user's real name, mobile phone number, email address, etc. After the user fills in each form control in the current view and clicks Next, the form page under the step of organization information 302 can be displayed.

[0058] After the user completes the form under the Organization Information step 302, they can click Submit. If the form data under both the Organization Head Information 301 and Organization Information 302 steps are verified, the data in the step-by-step form 300 will be submitted to the backend, and a registration success interface can be displayed to the end user to notify the user of the successful registration.

[0059] The following will be based on Figure 1 The scene described, and Figure 2 and Figure 3 An example of a user interface, through Figures 4 to 10 The form configuration method of the disclosed embodiment is described in detail.

[0060] Figure 4 The flowchart of the form configuration method according to an embodiment of the present disclosure is schematically shown.

[0061] like Figure 4 As shown, the form configuration method according to this embodiment may include operations S410 to S440.

[0062] First, in operation S410, a step bar tool is provided in the form designer. Figure 2 As shown, a step bar tool 201 may be displayed in a user interaction interface 200 of a form designer.

[0063] Then, in operation S420, based on the configuration operation of the step bar tool, N step bars are configured, and N step bars correspond to N steps one by one, where N is an integer greater than 1. Specifically, the number of steps required for the step-by-step form, the name information of each step, the style type information, etc. can be configured. For example, Figure 5 In the configuration interface of the step bar shown, the configuration of the step bar may include field identification, title, style type, step bar configuration items, etc.

[0064] Next, in operation S430, when each step bar in the N step bars is selected, the form under the step corresponding to the selected step bar is configured based on the user's form configuration operation. Figure 2In the current view, you can configure the form in step 1 in area 200.

[0065] Next, in operation S440, after the forms corresponding to the N steps are configured, a step-by-step form is created based on the form creation operation. The step-by-step form includes the N steps, and the forms in different steps are associated with each other according to the N steps. For example, developer 1 operates the JSON generation control 203 or the code generation control 204 in the user interface 200 to generate the JSON configuration or code for the step-by-step form, thereby creating the step-by-step form.

[0066] As can be seen, according to the embodiments of the present disclosure, when creating a step-by-step form, it is not necessary to create a form for each step separately. Instead, multiple form pages with sequential steps can be created at once, which can simplify the design and development of the step-by-step form. Moreover, because the step-by-step form already carries the linkage relationship between the form pages at different steps, when the step-by-step form code is inserted into the front-end application code, the developer does not need to write the logical relationship code for the form pages at different steps, which reduces the developer's workload and improves the development efficiency of the step-by-step form.

[0067] Figure 6 The flowchart of implementing the step bar tool in FormMaking according to an embodiment of the present disclosure is schematically shown.

[0068] like Figure 6 As shown, when implementing a step bar tool in FormMaking, you can add step bar configuration options to the WidgetConfig.vue file, the source code file used to write custom tools in FormMaking. Specifically, you can store the step bar's name and style information in the element.options.steps property. The style type can be used to display step bars with different user interaction styles.

[0069] Figure 7 The flowchart of rendering a form in the form configuration method according to an embodiment of the present disclosure is schematically shown.

[0070] like Figure 7 As shown, the form configuration method according to the embodiment of the present disclosure may further include operations S710 to S720 in addition to operations S410 to S440. The created step-by-step form may be rendered through operations S710 to S720.

[0071] First, in operation S710, when rendering a step-by-step form, information of the current step in the step-by-step form is obtained. Then, in operation S720, the form under the current step is rendered, for example, the step bar corresponding to the current step and all form controls under the current step are rendered.

[0072] Thus, when rendering a step-by-step form, only the form under the current step can be rendered each time. For example, after developer 1 completes creating the step-by-step form in the user interaction interface 200, he can view the rendering effect of the step-by-step form by clicking the preview control. In order to enable the step-by-step form to be inserted into the code of the front-end application, and when it is released and used as the front-end application, only the form under the current step can be rendered each time, in actual application, the rendering operation method of the step-by-step form in the embodiment of the present disclosure can be encapsulated into software (for example, a plug-in), and then installed in the user device with the front-end application in the form of a plug-in, so that when the user uses the front-end application, if a step-by-step form is encountered, only the form under the current step can be rendered each time. In this way, the rendering effect of the step-by-step form is similar to the rendering effect of the form under each step developed separately, so that the end user is unaware of the changes in the form design.

[0073] The implementation strategy for step-by-step form rendering in FormMaking is as follows: You can include the element's el-steps component in the template and use the element.options.type parameter passed in the step bar configuration item to determine whether to display the step bar component. The parent component of the step-by-step form passes in the parameter stepActive to indicate the current step. During rendering, the element.options.steps parameter passed in the step bar configuration item is first traversed to render the step bar component. Then, the element.options.steps parameter passed in the step bar configuration item is traversed again to render the form controls for the current step.

[0074] Figure 8 The flowchart of rendering a form in a form configuration method according to another embodiment of the present disclosure is schematically shown.

[0075] like Figure 8 As shown, the form configuration method according to an embodiment of the present disclosure may further include operations S810 to S860 in addition to operations S410 to S440. Operations S810 to S860 provide another exemplary embodiment for rendering a step-by-step form.

[0076] First, in operation S810 , when a rendering operation is triggered, attribute information of the step-by-step form is obtained.

[0077] Then, in operation S820, if the attribute information contains information about a step bar, the information about the current step passed in by the step-by-step form is obtained. Specifically, when rendering a form, if the attribute information of the form contains a step bar, it indicates that the form to be rendered is a step-by-step form. In this case, information representing the step of the currently processed form (i.e., the information about the current step) can be obtained from the step-by-step form component code.

[0078] Next, in operation S830, the step bar corresponding to the current step and all form controls under the current step are rendered. For example, the step bar component is rendered according to the configured step bar style type, and then all form controls under the step are rendered. In the FormMaking form designer, you can traverse the element.options.steps parameter passed in the step bar configuration item to render the step bar component; then traverse the element.options.steps parameter passed in the step bar configuration item again to render the form controls under the current step.

[0079] Then in operation S840, it is detected whether the user clicks the next step in the step-by-step form. If not, the current state is maintained and the user's next operation instruction is waited for. If so, operation S850 is entered.

[0080] In operation S850, in response to the user selecting the next step in the form of the current step, the form data of the current step is verified. For example, according to the verification rules of the form of the current step in the JSON configuration, the form controls of the current step are verified to see whether data is filled in and whether the filled data meets the format requirements.

[0081] Then in operation S860, after the form data in the current step is verified, the information in the current step is updated with the information in the next step.

[0082] Next, after the information of the current step is updated, return to operation S830 to render all form controls under the current step.

[0083] It can be seen that according to the embodiments of the present disclosure, after the form verification in one step is passed, the form in the subsequent step can be rendered.

[0084] Figure 9 The flowchart of verifying form data in the current step in the form configuration method according to an embodiment of the present disclosure is schematically shown.

[0085] like Figure 9 As shown, according to an embodiment of the present disclosure, the process of verifying the form data in the current step in operation S850 may include operations S901 to S903.

[0086] First, in operation S901 , the information list of the JSON configuration of the step-by-step form is traversed.

[0087] Then, in operation S902, when the step bar information is traversed, the information of the current step in the step-by-step form is obtained. Specifically, when traversing the JSON configuration information list, if a step bar is found, it indicates that the form to be verified is a step-by-step form. At this time, information representing the step to which the currently processed form belongs (i.e., the current step information) can be obtained from the component code of the step-by-step form.

[0088] Next, in operation S903, the form data in the current step is verified.

[0089] In one embodiment, in operation S903, a two-dimensional array variable may be first defined to store the form data for each step in the step-by-step form. The first dimension of the two-dimensional array variable represents the number of steps, and the second dimension represents the form data for each step. The form data for all form controls in the current step of the step-by-step form is then stored in the corresponding second dimension of the two-dimensional data variable for the current step. Finally, the form data for the current step in the two-dimensional array variable is verified. In this manner, the form data for the current step is verified.

[0090] Figure 10 The schematic diagram shows a process of verifying form data in the current step of a step-by-step form in FormMaking according to an embodiment of the present disclosure. This process diagram is a specific embodiment of operation S903.

[0091] Combine Figures 8 to 10 After clicking Next in the step-by-step form, the form of the current step can be verified and the form data of the current step can be returned. In the embodiment of the present disclosure, a getFieldData method can be provided in FormMaking to verify the form data of the current step. The getFieldData method receives a parameter stepActive (i.e., the current step number (step number)) and returns the form data that has passed the verification in the current step. The specific implementation ideas are as follows:

[0092] Traverse the form's JSON configuration this.data.list. If the current item control type is a step bar, traverse the current item's steps configuration item (steps contains information such as the number of steps and step names) stepItem.

[0093] Define a function getModelsGroup2 to obtain the grouped and step-by-step form data, passing in stepItem and the current step number index as parameters.

[0094] Define a two-dimensional array variable modelsGroup2 to store the form field names in the form under each step.

[0095] In the getModelsGroup2 function, each formItem in stepItem is iterated over. If the formItem is a basic form control (input box, drop-down box, multiple-select box, etc.), the formItem's model attribute (form field name) is directly pushed to the variable modelsGroup2[index]. If the formItem is an advanced form control (a step bar, subform, grid layout, tab, or other component that can nest basic form controls), a recursive loop is performed through formItem.columns or formItem.steps or formItem.steps until a basic form control is found, at which point its model attribute is pushed to modelsGroup2[index]. The modelsGroup2 obtained at this point is a two-dimensional array, with the first dimension being the number of steps and the second dimension being the form data for the current step.

[0096] Next, call the API in elementUI to verify some form data:

[0097] Among them, this.$refs.generateForm.validateField(modelsGroup2[stepActive]) can verify the form data under the current step.

[0098] If the verification passes, traverse all form data this.models, get each key of this.models, and if the key exists in the modelsGroup2[stepActive] array, return this.models(key), which is the form data that passed the verification under the stepActive step.

[0099] In a business system that dynamically outputs forms, after configuring the form using the step bar tool, call this.$refs.generateForm.getFiledData(0).then((filedData)=>console.log(filedData)) to obtain the verification results and the form data of step one.

[0100] According to the definition of the two-dimensional array variable modelsGroup2, when the form data for the last step in a step-by-step form passes verification, the two-dimensional array variable stores the form data for all steps. One dimension represents the number of steps, and the other represents the form data for each step. Thus, according to embodiments of the present disclosure, when a user submits a step-by-step form, the form data for N forms can be retrieved from the two-dimensional array variable and submitted to the backend. This eliminates the need to retrieve the form data for each step separately and combine them before submitting the form for the last step, as is done in the prior art, since each form page in a step-by-step form is independent of each other. Thus, compared to prior art, embodiments of the present disclosure significantly facilitate the collection of data from forms for different steps in a step-by-step form. When a user submits the form for the last step, if the form data for the last step passes verification, the form data for that step-by-step form can be retrieved from the two-dimensional array variable and submitted for backend processing.

[0101] Similar to the method for operating a rendered form, the method and operation for verifying a step-by-step form provided in the embodiments of the present disclosure can also be packaged into a software package (e.g., a rendering plug-in) and installed on the user's device along with the rendering plug-in and the front-end application. This allows the end user to verify the step-by-step form in the front-end application using operations S901 to S903.

[0102] The form configuration method of the disclosed embodiment can add a step bar function to the form designer, which can be applied to configuration scenarios requiring step-by-step forms. This overcomes the problems in the prior art where configuring step-by-step forms requires configuring multiple forms separately, which increases redundant code and affects development efficiency. The method also requires merging data and using step bar components when multiple forms are submitted. This makes front-end development more efficient, improves componentization, and improves code quality.

[0103] It should be noted that the description of the form designer in the embodiments of the present disclosure using FormMaking as an example is merely illustrative and non-limiting, to help those skilled in the art understand the specific implementation operations of the method of the embodiments of the present disclosure. The form configuration method of the embodiments of the present disclosure can be applied to any form designer, and the present disclosure is not limited to this.

[0104] Figure 11 The block diagram of the form configuration device 1100 according to an embodiment of the present disclosure is schematically shown.

[0105] like Figure 11As shown, the form configuration device 1100 according to an embodiment of the present disclosure may include a step bar configuration module 1110, a step-by-step form configuration module 1120, and a step-by-step form creation module 1130. According to other embodiments of the present disclosure, the form configuration device 1100 may further include a form rendering module 1140.

[0106] The step bar configuration module 1110 is used to provide a step bar tool in the form designer and configure N step bars based on the configuration operation of the step bar tool, where the N step bars correspond to N steps one by one, where N is an integer greater than 1. In one embodiment, the step bar configuration module 1110 can perform operations S410 and S420.

[0107] The step-by-step form configuration module 1120 is used to configure the form under the step corresponding to the selected step bar based on the user's form configuration operation when each step bar in the N step bars is selected. In one embodiment, the step-by-step form configuration module 1120 can perform operation S430.

[0108] The step-by-step form creation module 1130 is configured to create a step-by-step form based on the form creation operation after the forms corresponding to the N steps are configured. The step-by-step form includes N steps, and the forms in different steps are associated with each other according to the N steps. In one embodiment, the step-by-step form creation module 1130 may perform operation S440.

[0109] The form rendering module 1140 is used to obtain information of the current step in the step-by-step form and render the form under the current step when rendering the step-by-step form.

[0110] The form rendering module 1140 is specifically configured to obtain attribute information of a step-by-step form. When the attribute information includes information about a step bar, the module obtains information about the current step passed in by the step-by-step form, and renders the step bar corresponding to the current step and all form controls associated with the current step. In some embodiments, the form rendering module 1140 may perform operations S710 and S720. In other embodiments, the form rendering module 1140 may perform operations S810 through S830.

[0111] According to some embodiments of the present disclosure, the form rendering module 1140 may include a form validation submodule 1141 .

[0112] The form verification submodule 1141 may be used to verify the form data in the current step, for example, to execute operation S850.

[0113] The form rendering module 1140 can be used to respond to the user selecting the next operation in the form of the current step, verify the form data under the current step through the form verification module 1141, and when the form verification module passes the verification of the form data under the current step, update the information of the current step with the information of the next step (for example, execute operation S860), and then render the step bar corresponding to the current step and all form controls under the current step (for example, operation S830).

[0114] According to some embodiments of the present disclosure, form validation submodule 1141 is specifically configured to: traverse the information list of the JSON configuration of the step-by-step form; when traversing to the information of the step bar, obtain the information of the current step in the step-by-step form; and validate the form data for the current step. In some embodiments, form validation submodule 1141 can perform operations S901 to S903.

[0115] According to an embodiment of the present disclosure, the form configuration device 1100 can be used to implement the reference Figures 4 to 10 The form configuration method described above can be found in the introduction above and will not be repeated here.

[0116] According to an embodiment of the present disclosure, any multiple modules in the step bar configuration module 1110, the step-by-step form configuration module 1120, the step-by-step form creation module 1130, the form rendering module 1140, or the form verification submodule 1141 can be combined into one module for implementation, or any one of the modules can be split into multiple modules. Alternatively, at least part of the functions of one or more of these modules can be combined with at least part of the functions of other modules and implemented in one module. According to an embodiment of the present disclosure, at least one of the step bar configuration module 1110, the step-by-step form configuration module 1120, the step-by-step form creation module 1130, the form rendering module 1140, or the form verification submodule 1141 can be at least partially implemented as a hardware circuit, such as a field programmable gate array (FPGA), a programmable logic array (PLA), a system on a chip, a system on a substrate, a system on a package, an application specific integrated circuit (ASIC), or can be implemented by hardware or firmware in any other reasonable way of integrating or packaging the circuit, or can be implemented in any one of the three implementation methods of software, hardware, and firmware, or in an appropriate combination of any of them. Alternatively, at least one of the step bar configuration module 1110, the step-by-step form configuration module 1120, the step-by-step form creation module 1130, the form rendering module 1140, or the form validation submodule 1141 can be at least partially implemented as a computer program module, which can perform corresponding functions when executed.

[0117] Figure 12A block diagram of an electronic device 1200 suitable for implementing the form configuration method according to an embodiment of the present disclosure is schematically shown.

[0118] like Figure 12 As shown, the electronic device 1200 according to an embodiment of the present disclosure includes a processor 1201, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 1202 or a program loaded from a storage part 1208 into a random access memory (RAM) 1203. The processor 1201 may include, for example, a general-purpose microprocessor (e.g., a CPU), an instruction set processor and / or a related chipset and / or a dedicated microprocessor (e.g., an application-specific integrated circuit (ASIC)), etc. The processor 1201 may also include an onboard memory for caching purposes. The processor 1201 may include a single processing unit or multiple processing units for performing different actions of the method flow according to an embodiment of the present disclosure.

[0119] Various programs and data required for the operation of the electronic device 1200 are stored in the RAM 1203. The processor 1201, the ROM 1202, and the RAM 1203 are connected to each other via a bus 1204. The processor 1201 performs various operations of the method flow according to the embodiment of the present disclosure by executing the programs in the ROM 1202 and / or the RAM 1203. It should be noted that the programs may also be stored in one or more memories other than the ROM 1202 and the RAM 1203. The processor 1201 may also perform various operations of the method flow according to the embodiment of the present disclosure by executing the programs stored in the one or more memories.

[0120] According to an embodiment of the present disclosure, electronic device 1200 may further include an input / output (I / O) interface 1205, which is also connected to bus 1204. Electronic device 1200 may further include one or more of the following components connected to I / O interface 1205: an input section 1206 including a keyboard, mouse, etc.; an output section 1207 including devices such as a cathode ray tube (CRT), a liquid crystal display (LCD), and speakers; a storage section 1208 including a hard disk; and a communication section 1209 including a network interface card such as a LAN card or a modem. Communication section 1209 performs communication processing via a network such as the Internet. A drive 1210 is also connected to I / O interface 1205 as needed. Removable media 1211, such as a magnetic disk, an optical disk, a magneto-optical disk, or a semiconductor memory, is installed in drive 1210 as needed, so that computer programs read from the removable media can be installed into storage section 1208 as needed.

[0121] The present disclosure also provides a computer-readable storage medium, which may be included in the device / apparatus / system described in the above embodiments, or may exist independently and not be incorporated into the device / apparatus / system. The computer-readable storage medium carries one or more programs, and when executed, implements the method according to the embodiments of the present disclosure.

[0122] According to an embodiment of the present disclosure, a computer-readable storage medium may be a non-volatile computer-readable storage medium, for example, it may include but is not limited to: a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In the present disclosure, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, apparatus, or device. For example, according to an embodiment of the present disclosure, a computer-readable storage medium may include the ROM 1202 and / or RAM 1203 described above and / or one or more memories other than ROM 1202 and RAM 1203.

[0123] The embodiments of the present disclosure also include a computer program product, which includes a computer program containing program code for executing the method shown in the flowchart. When the computer program product is run in a computer system, the program code is used to enable the computer system to implement the form configuration method provided by the embodiments of the present disclosure.

[0124] The computer program executes the above functions defined in the system / device of the embodiment of the present disclosure when the processor 1201 executes the computer program. According to the embodiment of the present disclosure, the system, device, module, unit, etc. described above can be implemented by a computer program module.

[0125] In one embodiment, the computer program may be stored on a tangible storage medium such as an optical storage device or a magnetic storage device. In another embodiment, the computer program may be transmitted and distributed in the form of a signal on a network medium, downloaded and installed via the communication portion 1209, and / or installed from the removable medium 1211. The program code contained in the computer program may be transmitted using any appropriate network medium, including but not limited to wireless, wired, or any suitable combination thereof.

[0126] In such an embodiment, the computer program can be downloaded and installed from a network via the communication section 1209 and / or installed from the removable medium 1211. When the computer program is executed by the processor 1201, the above-described functions defined in the system of the embodiment of the present disclosure are performed. According to the embodiment of the present disclosure, the systems, devices, means, modules, units, etc. described above can be implemented by computer program modules.

[0127] According to an embodiment of the present disclosure, the program code for executing the computer program provided by the embodiment of the present disclosure can be written in any combination of one or more programming languages. Specifically, these computer programs can be implemented using high-level procedural and / or object-oriented programming languages, and / or assembly / machine languages. Programming languages ​​include, but are not limited to, languages ​​such as Java, C++, python, "C" or similar programming languages. The program code can be executed entirely on the user computing device, partially on the user device, partially on a remote computing device, or entirely on a remote computing device or server. In cases involving a remote computing device, the remote computing device can be connected to the user computing device through any type of network, including a local area network (LAN) or a wide area network (WAN), or can be connected to an external computing device (for example, using an Internet service provider to connect via the Internet).

[0128] The flowcharts and block diagrams in the accompanying drawings illustrate the possible implementation architecture, functions and operations of the systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each box in the flowchart or block diagram can represent a module, program segment, or a part of code, and the above-mentioned module, program segment, or a part of code contains one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in an order different from that marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flowchart, and the combination of boxes in the block diagram or flowchart, can be implemented with a dedicated hardware-based system that performs the specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0129] Those skilled in the art will appreciate that the features described in the various embodiments and / or claims of this disclosure may be combined and / or coupled in various ways, even if such combinations and / or couplings are not explicitly described in this disclosure. In particular, the features described in the various embodiments and / or claims of this disclosure may be combined and / or coupled in various ways without departing from the spirit and teachings of this disclosure. All such combinations and / or couplings are intended to fall within the scope of this disclosure.

[0130] The embodiments of the present disclosure are described above. However, these embodiments are for illustrative purposes only and are not intended to limit the scope of the present disclosure. Although each embodiment has been described separately above, this does not mean that the measures in each embodiment cannot be used in combination to advantage. The scope of the present disclosure is defined by the appended claims and their equivalents. Without departing from the scope of the present disclosure, those skilled in the art may make various substitutions and modifications, which should all fall within the scope of the present disclosure.

Claims

1. A form configuration method, comprising: Provide step bar tool in form designer; Based on the configuration operation of the step bar tool, N step bars are configured, wherein the N step bars correspond to N steps one by one, where N is an integer greater than 1; When each of the N step bars is selected, configuring a form under the step corresponding to the selected step bar based on a form configuration operation of the user; as well as After the forms under the N steps corresponding to the N step bars are configured respectively, a step-by-step form is created based on the form creation operation, wherein the step-by-step form includes the N steps, and the forms under different steps are associated with each other according to the N steps; When rendering the step-by-step form, only the form under the current step is rendered each time, including: In a predefined function, each form control in the current step of the step-by-step form is traversed, and the form field names are stored in a two-dimensional array. The function is used to obtain grouped step-by-step form data, and the two-dimensional array is used to store the form data for each step in the step-by-step form. The first dimension of the two-dimensional array variable is the number of steps, and the second dimension is the form data for each step. An API for verifying part of the form data is called to verify the form field names in the two-dimensional array.

2. The method according to claim 1, wherein The configuring of N step bars in the second user interaction interface based on the configuration operation of the step bar tool includes: Configure the name information of the N step bars; and / or Configure the style types of the N step bars.

3. The method according to claim 1, wherein The method further comprises: When rendering the step-by-step form, obtaining information about the current step in the step-by-step form; and Renders the form for the current step.

4. The method according to claim 3, wherein: When rendering the step-by-step form, obtaining information about the current step in the step-by-step form includes: Obtaining attribute information of the step-by-step form; and When the attribute information includes information of a step bar, obtaining information of the current step passed in by the step-by-step form; Rendering the form under the current step includes: rendering the step bar corresponding to the current step and all form controls under the current step.

5. The method according to claim 4, wherein When rendering the step-by-step form, obtaining information of the current step in the step-by-step form further includes: In response to the user selecting a next step operation in the form of the current step, verifying the form data under the current step; and After the form data in the current step is verified, the information of the current step is updated with the information of the next step.

6. The method according to claim 5, wherein: The verification of the form data in the current step includes: Traverse the information list of the JSON configuration of the step-by-step form; When traversing to the information of the step bar, obtaining the information of the current step in the step-by-step form; and Verify the form data in the current step.

7. The method according to claim 6, wherein: The verifying of the form data in the current step includes: Store the form data in all form controls under the current step in the step-by-step form into the second dimension of the two-dimensional array variable under the current step; Verify the form data in the current step in the two-dimensional array variable.

8. A form configuration device, comprising: Step bar configuration module, used to provide step bar tools in the form designer; and configuring N step bars based on the configuration operation of the step bar tool, wherein the N step bars correspond one-to-one to N steps, where N is an integer greater than 1; A step-by-step form configuration module is configured to configure, when each step bar in the N step bars is selected, a form corresponding to the step of the selected step bar based on a user's form configuration operation; as well as A step-by-step form creation module is configured to create a step-by-step form based on the form creation operation after the forms under the N steps corresponding to the N step bars are configured, wherein the step-by-step form includes the N steps, and the forms under different steps are associated with each other according to the N steps; The form rendering module is used to render only the form under the current step each time when rendering the step-by-step form, including: In a predefined function, each form control in the current step of the step-by-step form is traversed, and the form field names are stored in a two-dimensional array. The function is used to obtain grouped step-by-step form data, and the two-dimensional array is used to store the form data for each step in the step-by-step form. The first dimension of the two-dimensional array variable is the number of steps, and the second dimension is the form data for each step. An API for verifying part of the form data is called to verify the form field names in the two-dimensional array.

9. An electronic device comprising: one or more memories storing executable instructions; as well as One or more processors execute the executable instructions to implement the method according to any one of claims 1 to 7.

10. A computer-readable storage medium having executable instructions stored thereon, which, when executed by a processor, causes the processor to perform the method according to any one of claims 1 to 7.

Images