Form development method and device, equipment and program product

Abstract

The invention relates to the technical field of data processing, in particular to a form development method and device, equipment and a program product. The method comprises the steps of obtaining form configuration data obtained by configuring a whole target form; element configuration data obtained by configuring each form element in the target form based on a plurality of user interface components is obtained, each form element corresponds to one user interface component, and each user interface component comprises an open configuration interface; and rendering a display interface of the target form based on the form configuration data and the element configuration data. According to the method, the target form can be configured on the overall level and the element level, and the flexibility and efficiency of form development are improved.

Description

Technical Field

[0001] The present application relates to the field of data processing technology, and in particular to a form development method, device, equipment and program product. Background Art

[0002] Forms are the core components for data collection and user operations. How to develop and manage forms is an important topic. Dynamic form design provides developers with a feasible solution. The current dynamic form design methods are mainly divided into visual dynamic forms and component-based dynamic forms. Visual dynamic forms mainly build an intuitive design tool to enable developers and users to easily create and modify forms. The tool usually includes a drag-and-drop function, and developers can directly add, delete or adjust form elements without writing complex code. Component-based dynamic forms are a form design method based on the concept of component-based development. By splitting the various parts of the form into independent components, developers use these components to make form development more flexible and efficient. However, the drag-and-drop dynamic form design process requires higher computing resources, and the form development efficiency is low; component-based dynamic forms are not flexible enough, and the development process is highly repetitive, resulting in low development efficiency. Especially in the face of databases such as Ant Design that include multiple user interface (UI) components, forms can only be repeatedly developed through static configuration, and both flexibility and development efficiency need to be improved. Summary of the invention

[0003] Based on the above-mentioned defects and shortcomings of the prior art, the present application proposes a form development method, device, equipment and program product, which can configure the target form at both the overall and element levels, thereby improving the flexibility and efficiency of form development.

[0004] According to a first aspect of the present application, a form development method is provided, comprising: obtaining form configuration data obtained by configuring a target form as a whole; obtaining element configuration data obtained by configuring each form element in the target form based on multiple user interface components, wherein each form element corresponds to one user interface component, and the user interface component includes an open configuration interface; and rendering a display interface of the target form based on the form configuration data and the element configuration data.

[0005] According to the form development method provided in the first aspect of the present application, the obtaining of form configuration data obtained by configuring the target form as a whole includes: obtaining a form type of the target form determined from a plurality of preset types; obtaining form general configuration data obtained by configuring general attributes of each form of the target form based on the form type, wherein the form general attributes are global attributes based on the target form.

[0006] According to the form development method provided in the first aspect of the present application, the element configuration data for configuring each form element in the target form based on multiple user interface components is obtained, including: determining at least one target component determined in the multiple user interface components as each form element in the target form; obtaining element general configuration data obtained by configuring element general attributes for each form element respectively, wherein the element general attributes are global attributes based on the form elements; obtaining element component configuration data obtained by configuring component attributes for each form element respectively, wherein the component attributes are attributes of the target component corresponding to the form element; obtaining interaction configuration data obtained by configuring interaction attributes between any two form elements, wherein the interaction attributes are rule attributes for realizing data interaction between any two form elements.

[0007] According to the form development method provided in the first aspect of the present application, the interaction attributes include rule attributes based on conditional verification.

[0008] According to the form development method provided in the first aspect of the present application, the rendering of the display interface of the target form based on the form configuration data and the element configuration data includes: rendering a real-time preview interface of the target form based on the form configuration data and the element configuration data; monitoring the form configuration data and the element configuration data in real time, and if the form configuration data or the element configuration data changes, re-rendering and updating the real-time preview interface based on the changed form configuration data or the element configuration data.

[0009] According to the form development method provided in the first aspect of the present application, the rendering of the display interface of the target form based on the form configuration data and the element configuration data includes: packaging the form configuration data and the element configuration data into a configuration data package, and storing the configuration data package to a target storage space; reacquiring the configuration data package from the target storage space; calling the user interface component corresponding to each of the form elements in the configuration data package, and mapping the element configuration data to the user interface component; and rendering the display interface of the target form based on the form configuration data and the mapped user interface component.

[0010] According to the form development method provided in the first aspect of the present application, after rendering to obtain the display interface of the target form, it also includes: obtaining configuration change data of the target form; and updating the configuration change data to the target storage space.

[0011] According to a second aspect of the present application, a form development device is provided, comprising: a form configuration module, used to obtain form configuration data obtained by configuring a target form as a whole; an element configuration module, used to obtain element configuration data obtained by configuring each form element in the target form based on multiple user interface components, wherein each of the form elements corresponds to one user interface component, and the user interface component includes an open configuration interface; and a rendering module, used to render a display interface of the target form based on the form configuration data and the element configuration data.

[0012] According to a third aspect of the present application, an electronic device is provided, comprising: a memory and a processor; the memory is connected to the processor and is used to store programs; the processor is used to implement the form development method as described in the first aspect by running the program in the memory.

[0013] According to a fourth aspect of the present application, a computer program product is provided, comprising computer program instructions; when the computer program instructions are executed by a processor, the processor is enabled to execute the form development method as described in the first aspect.

[0014] In the present application, the form configuration data obtained by configuring the target form as a whole is obtained; the element configuration data obtained by configuring each form element in the target form based on multiple user interface components is obtained, wherein each form element corresponds to a user interface component, and the user interface component includes an open configuration interface; based on the form configuration data and the element configuration data, the display interface of the target form is rendered. In the above process, the form configuration data is the data obtained by configuring the target form from the overall perspective, and the element configuration data is the data obtained by configuring from the form element perspective. Different configuration angles improve the flexibility of the target form configuration process. And the open configuration interface of the user interface component provides a basis for the flexible and repeated use of the user interface component during the configuration process, which not only ensures the flexibility of the form configuration, but also improves the utilization rate of the user interface component, and realizes the efficient configuration and development of the form. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] In order to more clearly illustrate the embodiments of the present application 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 embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying any creative work.

[0016] Figure 1 A flowchart of a form development method provided in an embodiment of the present application;

[0017] Figure 2An example diagram of a step-by-step form provided for an embodiment of the present application;

[0018] Figure 3 An example diagram of a foldable form provided in an embodiment of the present application;

[0019] Figure 4 An example diagram of a multi-label form provided in an embodiment of the present application;

[0020] Figure 5 One of the example diagrams of a configuration and display interface provided in an embodiment of the present application;

[0021] Figure 6 A second example diagram of a configuration and display interface provided in an embodiment of the present application;

[0022] Figure 7 A third example diagram of a configuration and display interface provided in an embodiment of the present application;

[0023] Figure 8 A block diagram of a form development device provided in an embodiment of the present application;

[0024] Fig. 9 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

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

[0026] Application Overview

[0027] This application further analyzes the existing dynamic form design methods. For the drag-and-drop dynamic form design method, the implementation process often relies on heavyweight and complex code. The complex graphic drag operation not only requires high computing resources, but also has high requirements for the operating environment, which limits its form design on low-end devices or resource-constrained environments; at the same time, it cannot guarantee compatibility and stability in different projects, and there are certain application limitations. For component-based dynamic form design methods, most of them have problems such as insufficient flexibility and unfriendly user interaction. For example, most methods only support basic attribute configuration, and lack support for advanced requirements such as complex tables, customized styles, interactive logic, conditional rendering, dynamic updates, and custom validation rules, and cannot implement dynamic design forms that are completely customized by developers; for example, most of the current methods simply transfer the work of developers to repeatedly develop pages to developers to repeatedly define pages, lacking unified configuration and management design for forms, which leads to developers facing cumbersome manual configuration and management. The experience is greatly affected, especially when facing databases such as Ant Design, which is an enterprise-level UI design language and React implementation. Group Item React is a JavaScript library for creating user interfaces. Ant Design is widely used in enterprise application development, and its rich user interface components and design specifications provide a good foundation for developers. However, the existing technology has not yet formed a complete dynamic form design and management solution for the Ant Design framework, which limits the flexibility and development efficiency of developers when using Ant Design, and makes them face many challenges in creating and managing complex forms.

[0028] Exemplary Methods

[0029] In response to the problems existing in the form development process in the prior art, the present application provides an expression development method, which is implemented on any device with data processing capabilities, such as a local computer, a cloud server, a smart mobile device, etc. The present application is not limited to the type of device on which the method is implemented.

[0030] In one embodiment, if Figure 1 As shown, the process steps implemented by the form development method include:

[0031] Step 101, obtaining form configuration data obtained by configuring the entire target form.

[0032] In this embodiment, the form is the core component for realizing data collection and user operation, and has important applications in various environments such as data collection, application and approval, order processing, registration and login, document management, etc. The target form refers to a form that meets specific needs in a certain operating environment. According to the specific requirements of the operating environment, targeted configuration can be performed when developing the target form. When configuring the target form, the configuration process is completed from two levels: the overall level and the element level. Configuring from the overall level of the target form mainly refers to configuring the general attributes of the target form, for example, configuring one or more attributes of various general attributes of the form, such as the form name, form type, and the overall layout of the form. The form configuration data refers to the data generated when the target form is configured as a whole, that is, the data obtained by configuring one or more attributes of various general attributes of the form, such as the form name, form type, and the overall layout of the form.

[0033] Step 102: Obtain element configuration data obtained by configuring each form element in the target form based on multiple user interface components, wherein each form element corresponds to a user interface component, and the user interface component includes an open configuration interface.

[0034] In this embodiment, when configuring from the target form element level, it is completed based on the existing user interface components. The target form includes at least one form element, which is a basic component of the target form. For example, the form element includes a text input box, a radio button, a check box, etc. Each form element in this application corresponds to a user interface (UI) component. Each user interface component does not need to be developed in real time and is a pre-developed component. A development configuration interface is configured for each user interface component in advance. The development configuration interface is a configurable property interface for each user interface component. The user interface component can be further personalized through the development configuration interface.

[0035] Optionally, the user interface component is a component in a component library. For example, the component library is Ant Design. Ant Design includes a variety of user interface components, exemplarily as follows:

[0036] Text input box (Input);

[0037] Selector (Select);

[0038] Get the option selector (ApiSelect) through the Application Programming Interface (API);

[0039] TreeSelect;

[0040] One of the radio button groups (RadioButtonGroup);

[0041] Radio button group 2 (RadioGroup);

[0042] Checkbox;

[0043] CheckboxGroup;

[0044] Automatically complete the input box (AutoComplete);

[0045] Cascader

[0046] DatePicker;

[0047] MonthPicker;

[0048] Date range selector (RangePicker);

[0049] Week Picker (WeekPicker);

[0050] TimePicker;

[0051] TimeRangePicker;

[0052] Switch;

[0053] Password strength indicator (StrengthMeter);

[0054] One of file upload (Upload);

[0055] Image upload (ImageUpload);

[0056] IconPicker;

[0057] Rendering function (Render), used to customize component content;

[0058] Slider;

[0059] Rating (Rate);

[0060] Divider

[0061] Rich text editor (Editor);

[0062] FileUpload 2;

[0063] CronTab: Cron task expression selector.

[0064] It should be noted that the above-mentioned Ant Design and the various user interface components in Ant Design are only exemplary implementations. The user interface components used in this application can also be user interface components in Bootstrap, Material-UI, SemanticUI and any other component library. The selection of component library is determined according to actual conditions and needs.

[0065] In this embodiment, element configuration data refers to the data obtained by configuring each form element in the target form. In the process of configuring form elements based on user interface components, not only the fine-grained customization of the target form is achieved, the flexibility and personalization of form development are improved, but also the user interface components are fully utilized to reduce the difficulty of expression development and improve the efficiency of form development.

[0066] Step 103: Render the display interface of the target form based on the form configuration data and the element configuration data.

[0067] In this embodiment, the target form is configured from both the overall and element levels, realizing a combination of coarse-grained and fine-grained configuration processes, making the form development process more flexible and meeting various personalized configuration requirements during the development process. At the same time, user interface components are utilized to improve form development efficiency.

[0068] In one embodiment, obtaining form configuration data obtained by configuring the target form as a whole includes: obtaining the form type of the target form determined from multiple preset types; obtaining form general configuration data obtained by configuring general attributes of each form of the target form based on the form type, wherein the form general attributes are global attributes based on the target form.

[0069] In this embodiment, when configuring the target form as a whole, the form type and general form properties of the target form are mainly configured. The form types include basic forms, step-by-step forms, foldable forms and multi-tab forms. The basic form is the most common form type and is usually used for simple data collection, such as user registration, login, etc. The partial form divides a complex form into multiple steps, each step contains a part of the form fields, and reduces the user's cognitive burden in a step-by-step manner, thereby improving the completion rate of form filling. The foldable form allows developers to expand or collapse part of the content by clicking a certain title or button, saving space and making the interface neater. Developers can selectively view and fill in the form content. The multi-tab form distributes the form content in multiple tabs, each tab contains a part of the form fields, and the form content is clearer and easier to manage by switching the tabs. When configuring the target form as a whole, any one of the form types can be selected. When the target form selects different form types, it corresponds to different basic form layouts, and the basic form layout includes a basic form framework and configurable recommended form elements.

[0070] In this embodiment, when any form type is determined, a basic form layout can be automatically provided. For example, a basic form does not need to configure a form title based on a basic form framework, and also includes a configurable reset button, submit button, or cancel button. For another example, a step-by-step form needs to configure a title for each step, and there is no cancel or reset button configuration, such as Figure 2 The example step-by-step form shown in the business environment of money transfer is divided into three steps: filling in transfer information, confirming transfer information, and completing. Each step can be configured with form elements. For example, filling in transfer information includes text box-based form elements such as the payment account, the receiving account, the name of the payee, and the transfer amount, as well as the next button element. For another example, a collapsible form can be configured with a title, such as Figure 3 The exemplary foldable form shown in FIG. 1 includes a plurality of field elements, a reset button, a query button, and an expand and collapse button ( Figure 2 When the foldable form is displayed, it will automatically collapse if it exceeds 3 lines, and keep 2 lines for display when folding. You can flexibly adjust whether to collapse or expand through the expand and collapse buttons. For another example, a multi-label form can choose to configure the title, such as Figure 4The multi-tab form shown includes multiple tab pages such as tabs1, tabs2, tabs3, tabs4 and tabs5. Elements can be configured separately under each tab page. For example, multiple text box elements such as tabs2-field1, tabs2-field2, tabs2-field3, tabs2-field4, tabs2-field5, tabs2-field6, tabs2-field7 and tabs2-field8 can be configured under the tabs2 tab page.

[0071] In this embodiment, the form general attributes are global attributes based on the target form, such as global form title layout, global element layout, form submission address, form element title alignment direction and other global attributes, and the form general configuration data is data obtained by configuring the form general attributes. By configuring the form general attributes globally, the target form is configured at the overall level, which improves the flexibility of configuration.

[0072] In one embodiment, element configuration data for configuring each form element in a target form based on multiple user interface components is obtained, including: determining at least one target component determined in multiple user interface components as each form element in the target form; obtaining element general configuration data obtained by configuring element general attributes for each form element, wherein the element general attributes are global attributes based on the form element; obtaining element component configuration data obtained by configuring component attributes for each form element, wherein the component attributes are attributes of the target component corresponding to the form element; obtaining interaction configuration data obtained by configuring interaction attributes between any two form elements, wherein the interaction attributes are rule attributes for realizing data interaction between any two form elements.

[0073] In this embodiment, when it is necessary to configure any form element for the target form, the corresponding target component is determined in the component library, and then the target component is configured through the open configuration interface. The user interface components that can be selected for each form element are the same, and the same user interface component can be used as the target component corresponding to different form elements. For a form element, after determining the corresponding target component, the form element is configured in terms of element general properties, component properties, and interaction properties with any other form element. For a form element, the element general properties include but are not limited to the element title name and element field name that must be configured, as well as the element component type, secondary label name, form element position, warm reminder on the right side of the label name, element suffix, single form label layout, single element layout, etc. that can be optionally configured. The configuration of the form element needs to be consistent with the configurable properties of the corresponding target component, that is, the selected target component affects the configurable items of the form element. For a form element, common properties of the element include but are not limited to validation rules (such as whether it is required, prompt text, and validation format, etc.), whether it is required or not according to conditions, default value, whether to display, dynamic display when it is a function, configure the value of the element according to conditions, dynamically disable the element according to conditional configuration, dynamically display elements, dynamically update element values, dynamically disable elements, dynamically update elements, etc.

[0074] In this embodiment, data interaction between any two form elements is achieved through the interactive properties between any two form elements. For example, if the value in a form element is equal to a preset value, another associated form element is displayed. More complex form customization can be achieved through interactive properties.

[0075] In one embodiment, the interaction attributes include rule attributes based on conditional validation.

[0076] In this embodiment, the interactive properties between any two form elements are configured through conditional verification. Specifically, when the interactive properties need to be configured, the corresponding verification conditions are added, and if the verification conditions are met, the data interaction between the form elements is realized.

[0077] In one embodiment, based on the form configuration data and the element configuration data, the display interface of the target form is rendered, including: based on the form configuration data and the element configuration data, rendering a real-time preview interface of the target form; monitoring the form configuration data and the element configuration data in real time, if the form configuration data or the element configuration data changes, re-rendering and updating the real-time preview interface based on the changed form configuration data or element configuration data.

[0078] In the present embodiment, in the process of configuring the target form, the display interface of the target form is obtained by real-time rendering. In the configuration process, after obtaining the form configuration data and the element configuration data, based on the Document Object Model (DOM) technology, the form configuration data and the element configuration data are converted into actual DOM elements, and rendered into a real-time preview interface. DOM is an interface that is independent of the platform and language. DOM enables programs and scripts to dynamically access and update the content, structure and style of documents. In the configuration process, the monitoring technology is adopted to monitor the data changes of the form configuration data and the element configuration data in real time. When the form configuration data or the element configuration data changes, the real-time preview interface of the rendering target form is automatically updated by the Diff algorithm. The Diff algorithm is a technology for comparing the differences between two data sets. By rendering the updated real-time preview interface in real time, the visualization of the form development process is improved, and it is ensured that the developer can intuitively observe the actual display effect of the target form in the configuration process, thereby facilitating the developer to adjust the configuration data and improving the efficiency of the form development process.

[0079] In one embodiment, based on the form configuration data and the element configuration data, the display interface of the target form is rendered, including: packaging the form configuration data and the element configuration data into a configuration data package, and storing the configuration data package in the target storage space; retrieving the configuration data package from the target storage space; calling the user interface component corresponding to each form element in the configuration data package, and mapping the element configuration data to the user interface component; based on the form configuration data and the mapped user interface component, rendering the display interface of the target form.

[0080] In this embodiment, when the developer completes the configuration, the form configuration data and the element configuration data are packaged into a configuration data package and stored in the target storage space, that is, the target form is stored in the target storage space as a template. When the target form needs to be displayed again, or a new form needs to be further developed based on the target form, it is only necessary to read the configuration data package of the form configuration data and the element configuration data from the target storage space again, call the user interface component corresponding to each form element in the configuration data package, and map the element configuration data to the user interface component, and re-render the display interface of the target form. It is ensured that the target form can be repeatedly rendered through a development process once, saving development resources and improving the efficiency of form development.

[0081] In one embodiment, after rendering the display interface of the target form, the method further includes: obtaining configuration change data of the target form; and updating the configuration change data to the target storage space.

[0082] In this embodiment, after the configuration data packet is stored in the target storage space, the target form can be used as a template form. Based on the template form, a new form can be further configured, or the version of the target form can be updated, thereby achieving the repeated use of the target form, providing a basis for subsequent expansion and maintenance of the target form, and further improving the efficiency of form development.

[0083] In one embodiment, the form configuration data and element configuration data adopt a data format based on JavaScript Object Notation (JSON), which is a lightweight data exchange format that is easy for people to read and write, and is also easy for machines to parse and generate. The packaged configuration data packet is also in JSON data format, which has good compatibility, supports fast data transmission and parsing, can effectively reduce the overhead of network requests, and improve the overall performance of the system; at the same time, the JSON data format allows users to flexibly define the combination and nesting of form fields, supports complex form structures (such as grouping, dynamically adding fields, etc.), can quickly parse data, and ensure the smoothness of user experience.

[0084] For example, based on the user interface components provided by Ant Design and the JSON data format, when the target form is configured as a whole, the form configuration data and related comments obtained are as follows:

[0085] / / Form type: basic form, step-by-step form, foldable form, multi-label form (required)

[0086] formType:number;

[0087] / / Global form title layout (optional)

[0088] labelCol:{span:number;offset:number};

[0089] / / Global form element layout (optional)

[0090] wrapperCol:{span:number;offset:number};

[0091] / / Form submission address (optional)

[0092] submitUrl: string;

[0093] / / Form element title alignment direction (optional)

[0094] labelAlign? :"left"|"right";

[0095] / / Reset button configuration (optional)

[0096] resetButton?:{

[0097] show:boolean;

[0098] text: string;

[0099] / / The following is the button property configuration of ant-design (extensible configuration for developers to directly use components in development)

[0100] / / buttonProps:ButtonProps

[0101] };

[0102] / / Submit button configuration (optional)

[0103] submitButton?:{

[0104] show:boolean;

[0105] text: string;

[0106] / / The following is the button property configuration of ant-design (extensible configuration for developers to directly use components in development)

[0107] / / buttonProps:ButtonProps

[0108] };

[0109] / / Cancel button configuration (optional)

[0110] cancelButton?:{

[0111] show:boolean;

[0112] text: string;

[0113] / / The following is the button property configuration of ant-design (extensible configuration for developers to directly use components in development)

[0114] / / buttonProps:ButtonProps

[0115] };

[0116] colon:boolean; / / Whether to display the colon after the title (optional)

[0117] In this embodiment, the general configuration data of the element and related comments are as follows:

[0118] schema:[

[0119] {

[0120] / / Form element title name (required)

[0121] label: string;

[0122] / / Form element field name (required)

[0123] field: string;

[0124] / / Form element component type (optional)

[0125] component:ComponentType;

[0126] / / Secondary tag name (optional)

[0127] subLabel?: string;

[0128] / / Form element position (optional)

[0129] sort:number;

[0130] / / Tips on the right side of the tag name (optional)

[0131] helpMessage?: string;

[0132] / / Form element suffix

[0133] suffix?: string|number;

[0134] / / Single form label layout (optional)

[0135] labelCol:{span:number;offset:number};

[0136] / / Single form element layout (optional)

[0137] wrapperCol:{span:number;offset:number};

[0138] / / Configuration items of this component. The configurable content depends on the selected general interface component, which is consistent with the configurable properties of this UI component in ant-design (optional)

[0139] In this embodiment, the element component configuration data and related comments are as follows:

[0140] componentProps?:object;

[0141] / / Verification rules: required-is it required, message-prompt text, pattern verification format (including numbers, text, email addresses, etc.)

[0142] / / Configure whether it is required or not according to the conditions (optional)

[0143] rules?:{

[0144] required:boolean|{field:string; value:string|number}[]; / / This is the condition configured in the page

[0145] message: string;

[0146] pattern: string;

[0147] };

[0148] / / Default value (optional)

[0149] defaultValue?: string;

[0150] / / Whether to display, dynamically display when it is a function (optional)

[0151] ifShow? :boolean|{field:string;value:string|number}[];

[0152] / / Configure the value of the form element according to the conditions (optional)

[0153] dynamicValue?:{

[0154] targetField: string;

[0155] targetValue: string|number;

[0156] value: string|number;

[0157] }[];

[0158] / / Dynamically disable the form element based on conditional configuration (optional)

[0159] dynamicDisabled? :{field:string;value:string|number}[];

[0160] }, ];

[0162] }

[0163] In this embodiment, the JSON data and related comments obtained by configuring the basic form provided in the above embodiment are as follows:

[0164] / / Basic form

[0165] interface BaseFormProps{

[0166] / / Unique identifier of the form template (generated by the server)

[0167] / / id:number;

[0168] / / Template library identifier

[0169] / / templateLibId:number;

[0170] / / Template name (required, the target form is saved as a template in the template library)

[0171] templetName: string;

[0172] In this embodiment, the JSON data and related comments obtained by configuring the foldable form provided in the above embodiment are as follows:

[0173] / / Foldable form

[0174] interface foldForm{

[0175] / / Folding panel title (optional)

[0176] foldBoardTitle: string;

[0177] / / Whether to display the collapse / expand button (optional)

[0178] showAdvancedButton:boolean;

[0179] / / If showAdvancedButton is true, rows exceeding the specified number of rows will be collapsed by default (optional)

[0180] autoAdvancedLine:number;

[0181] / / The number of rows that are always displayed when folding (optional)

[0182] alwaysShowLines:number;

[0183] / / Others are the same as the basic form

[0184] }

[0185] In this embodiment, the JSON data and related comments obtained by configuring the step-by-step form provided in the above embodiment are as follows:

[0186] / / Step by step form

[0187] interface stepForm{

[0188] / / No reset or cancel button configuration, the rest is the same as the basic form

[0189] / / Previous button configuration (optional)

[0190] preButton?:{

[0191] show:boolean;

[0192] text: string;

[0193] / / The following is the button property configuration of Ant Design (extensible configuration for developers to directly use components in development)

[0194] / / buttonProps:ButtonProps

[0195] };

[0196] / / Next step button configuration (optional)

[0197] nextButton?:{

[0198] show:boolean;

[0199] text: string;

[0200] / / The following is the button property configuration of Ant Design (extensible configuration for developers to directly use components in development)

[0201] / / buttonProps:ButtonProps

[0202] };

[0203] / / Specify the step bar direction, horizontal and vertical

[0204] direction:"horizontal"|"vertical";

[0205] / / Configure content for each step

[0206] items:{

[0207] title: string; / / title

[0208] subTitle: string; / / subtitle

[0209] description: string; / / Detailed description of the step, optional

[0210] schema:[]; / / Same as the schema in the basic form

[0211] }[];

[0212] }

[0213] In this embodiment, the JSON data and related comments obtained by configuring the multi-label form provided in the above embodiment are as follows:

[0214] / / Multi-label form

[0215] interface MultipleTagsForm{

[0216] / / Basic style of the tab, optional line or card type

[0217] type:'line'|'card';

[0218] / / Label size, large, middle and small are available

[0219] size:'lage'|'middle'|'small'

[0220] / / Form content for each tab page

[0221] items:BaseFormProps[]

[0222] }

[0223] Among them, non-mandatory means that developers can configure it selectively, and mandatory means that it must be configured. Template library refers to the pre-set target storage space. After the developer completes the design of the target form, the target form is stored as a template table in the pre-set template library as the target storage space, click Save, click to select the template library to save, fill in the template name, and click OK. The configuration data package of the target form based on the JSON data format will be stored in the template library, and a unique template identifier will be generated for subsequent loading and management.

[0224] In one embodiment, multiple forms can be developed during the form development phase. To facilitate the management of multiple forms, multiple template libraries can be pre-configured as needed as different storage spaces, so that different forms can be classified and saved according to needs. For example, one business project corresponds to one template library, and multiple forms developed in the business project are stored as template forms in the same template library. Optionally, the form development phase can be completed by a front end with human-computer interaction functions, and the template library can be configured in the storage space of the back end, thereby reducing the resource pressure on the front end.

[0225] In this embodiment, based on the created template library, the editing, saving, deletion and version management of the form template can be implemented.

[0226] Specifically, as needed, create multiple different template libraries to store different form templates. The developer clicks Create Template Library in the front-end interface, enters the template library name, clicks Confirm, and initiates a request to create a template library to the back-end. The back-end receives the request and the template library name data carried in the request, and the request is successful. The back-end returns the unique template library identifier (Identifier, ID) and the template library name of the newly added template library; the front-end receives the data and saves it, and renders the newly added template library entry based on the data. The developer clicks on the template library entry, initiates a template library query request, and sends the template library id to the back-end. The back-end accepts the request, queries all template forms under the template library in the database, and returns this data. The front-end receives the data and renders a form template list based on the data.

[0227] In this embodiment, any template form can be selected for editing. After editing is completed, the user can choose to save it as a new template form or overwrite the original template form.

[0228] Specifically, the developer clicks "Edit", the front-end initiates a form query template query request to the back-end, and passes the template form ID to the back-end. The back-end receives the request and searches for the template form in the template library based on the received ID, and returns the configuration data packet corresponding to the queried template form to the front-end. After the front-end receives the configuration data packet corresponding to the template form, it enters the form editing interface (the same as the configuration interface) and renders the interface content based on the edited data. After the developer completes editing, he clicks "Confirm". The front-end initiates a form template edit request to the back-end, and passes the template form ID and the new configuration data packet to the back-end. The back-end receives the template form ID and the new configuration data packet, and updates the form template data in the database based on the ID.

[0229] In this embodiment, developers can view the historical versions of each form template and select the required version to load or compare. In this way, developers can easily trace back to the previous design state to ensure the controllability of the design process.

[0230] Specifically, the developer clicks Edit, the front-end initiates a form query template query request to the back-end, and passes the template ID to the back-end. The back-end receives the request and, based on the received ID, searches the database for the configuration data packet corresponding to the template form, and returns the configuration data packet corresponding to the queried template form to the front-end. After receiving the form data, the front-end enters the form viewing interface and renders the interface content based on the received data to realize form content viewing.

[0231] In a specific embodiment, the configuration and interface display are completed through the visual interface of the front-end device with human-computer interaction function, such as Figure 5 The exemplary interface shown includes a real-time preview area and a property configuration area. The property configuration area can configure the entire target form to obtain form configuration data, including the configuration of the form type and form general properties, and can also configure each form element in the target form to obtain element configuration data.

[0232] In this embodiment, when configuring each form element in the target form, the user interface component can be added as needed through the "Add Component" button to complete the configuration of the form element. For each form element, the component type of the required user interface component can be selected, and the element general properties such as dynamic display mode can be configured to obtain the element general configuration data, such as Figure 6As shown, the component tag name and component field name are configured for the user interface component. The component properties can also be configured to obtain the element component configuration data. Furthermore, the interaction configuration data can be obtained by configuring the interaction properties between any two form elements by adding conditions. Among them, name, gender and others are different form elements configured. During the configuration process, based on DOM technology and real-time monitoring technology, the real-time preview interface is rendered in real time and displayed in the real-time preview area on the left, so that developers can observe the form configuration content in a timely and intuitive manner.

[0233] In this embodiment, Figure 7 As shown, when adding rule attributes based on conditional validation, specific validation rules can be added through the interface for adding components. For example, by adding the target value of the target element, the validation of the target value is implemented, thereby achieving conditional display between the form element being configured and the target element. For example, when the input value of the name element is liao, the gender element is displayed as female.

[0234] In the present application, the form configuration data obtained by configuring the target form as a whole is obtained; the element configuration data obtained by configuring each form element in the target form based on multiple user interface components is obtained, wherein each form element corresponds to a user interface component, and the user interface component includes an open configuration interface; based on the form configuration data and the element configuration data, the display interface of the target form is rendered. In the above process, the form configuration data is the data obtained by configuring the target form from the overall perspective, and the element configuration data is the data obtained by configuring from the form element perspective. Different configuration angles improve the flexibility of the target form configuration process. And the open configuration interface of the user interface component provides a basis for the flexible and repeated use of the user interface component during the configuration process, which not only ensures the flexibility of the form configuration, but also improves the utilization rate of the user interface component, and realizes the efficient configuration and development of the form.

[0235] Furthermore, the design of basic forms to advanced forms, from basic information to advanced interactive configurations such as conditional rendering and dynamic updates, can meet different scenarios and complex business needs. The form template management function is implemented, which reduces the workload of repeated form design and improves the efficiency of form use. Supports real-time preview effects, allowing developers to instantly see the results of adjustments during the configuration process, enhancing the developer experience.

[0236] Exemplary Devices

[0237] Accordingly, the embodiment of the present application also provides a form development device, such as Figure 8 As shown, the device may include:

[0238] The form configuration module 801 is used to obtain form configuration data obtained by configuring the entire target form;

[0239] An element configuration module 802 is used to obtain element configuration data obtained by configuring each form element in a target form based on multiple user interface components, wherein each form element corresponds to a user interface component, and the user interface component includes an open configuration interface;

[0240] The rendering module 803 is used to render the display interface of the target form based on the form configuration data and the element configuration data.

[0241] In one embodiment, the form configuration module 801 is used to obtain the form type of a target form determined from multiple preset types; obtain form general configuration data obtained by configuring general attributes of each form of the target form based on the form type, wherein the form general attributes are global attributes based on the target form.

[0242] In one embodiment, the element configuration module 802 is used to determine at least one target component determined in multiple user interface components as each form element in the target form; obtain element general configuration data obtained by configuring the element general attributes of each form element, wherein the element general attributes are global attributes based on the form element; obtain element component configuration data obtained by configuring the component attributes of each form element, wherein the component attributes are attributes of the target component corresponding to the form element; obtain interaction configuration data obtained by configuring the interaction attributes between any two form elements, wherein the interaction attributes are rule attributes for realizing data interaction between any two form elements.

[0243] In one embodiment, the interaction attributes include rule attributes based on conditional validation.

[0244] In one embodiment, the rendering module 803 is used to render a real-time preview interface of the target form based on the form configuration data and the element configuration data; monitor the form configuration data and the element configuration data in real time, and if the form configuration data or the element configuration data changes, re-render and update the real-time preview interface based on the changed form configuration data or the element configuration data.

[0245] In one embodiment, the rendering module 803 is used to package the form configuration data and the element configuration data into a configuration data package, and store the configuration data package in a target storage space; retrieve the configuration data package from the target storage space; call the user interface component corresponding to each form element in the configuration data package, and map the element configuration data to the user interface component; and render the display interface of the target form based on the form configuration data and the mapped user interface component.

[0246] In one embodiment, the form development device further includes an updating module, which is used to obtain configuration change data of the target form after rendering the display interface of the target form; and update the configuration change data to the target storage space.

[0247] The form development device provided in this embodiment belongs to the same application concept as the form development method provided in the above embodiments of this application, and can execute the form development method provided in any of the above embodiments of this application, and has the corresponding functional modules and beneficial effects of the execution method. For technical details not fully described in this embodiment, please refer to the specific processing content of the form development method provided in the above embodiments of this application, and will not be repeated here.

[0248] Exemplary Electronic Devices

[0249] The present application also provides an electronic device, such as Fig. 9 As shown, the electronic device includes: a memory 900 and a processor 901 .

[0250] The memory 900 is connected to the processor 901 and is used to store programs.

[0251] The processor 901 is used to implement the form development method in the above embodiment by running the program stored in the memory 900 .

[0252] Specifically, the electronic device may further include: a communication interface 902 , an input device 903 , an output device 904 and a bus 905 .

[0253] The processor 901, the memory 900, the communication interface 902, the input device 903 and the output device 904 are connected to each other via a bus.

[0254] Bus 905 may include a pathway for transferring information between the various components of the computer system.

[0255] The processor 901 may be a general-purpose processor, such as a general-purpose central processing unit (CPU), a microprocessor, etc., or an application-specific integrated circuit (ASIC), or one or more integrated circuits for controlling the execution of the program of the scheme of the present invention. It may also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field programmable gate array (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components.

[0256] The processor 901 may include a main processor, and may also include a baseband chip, a modem, and the like.

[0257] The memory 900 stores a program for executing the technical solution of the present invention, and may also store an operating system and other key services. Specifically, the program may include a program code, and the program code includes a computer operation instruction. More specifically, the memory 900 may include a read-only memory (ROM), other types of static storage devices that can store static information and instructions, a random access memory (RAM), other types of dynamic storage devices that can store information and instructions, a disk storage, a flash, and the like.

[0258] The input device 903 may include a device for receiving data and information input by a user, such as a keyboard, a mouse, a camera, a scanner, a light pen, a voice input device, a touch screen, a pedometer, or a gravity sensor.

[0259] Output device 904 may include a device that allows information to be output to a user, such as a display screen, printer, speaker, etc.

[0260] The communication interface 902 may include any transceiver or the like to communicate with other devices or communication networks, such as Ethernet, a radio access network (RAN), a wireless local area network (WLAN), etc.

[0261] The processor 901 executes the program stored in the memory 900 and calls other devices, which can be used to implement the various steps of the form development method provided in the above embodiments of the present application.

[0262] Exemplary computer program products and storage media

[0263] In addition to the above-mentioned methods and devices, an embodiment of the present application may also be a computer program product, which includes computer program instructions, which, when executed by a processor, enable the processor to execute the steps in the form development method described in the embodiment of the present application.

[0264] The computer program product may be written in any combination of one or more programming languages ​​to write program codes for performing the operations of the embodiments of the present application, including object-oriented programming languages, such as Java, C++, etc., and conventional procedural programming languages, such as "C" language or similar programming languages. The program code may be executed entirely on the user computing device, partially on the user device, as an independent software package, partially on the user computing device and partially on a remote computing device, or entirely on a remote computing device or server.

[0265] In addition, the embodiment of the present application may also be a storage medium on which a computer program is stored, and the computer program is executed by a processor to execute the steps of the form development method described in the embodiment of the present application.

[0266] For the aforementioned method embodiments, for the sake of simplicity, they are all described as a series of action combinations, but those skilled in the art should be aware that the present application is not limited by the order of the actions described, because according to the present application, some steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily required by the present application.

[0267] It should be noted that each embodiment in this specification is described in a progressive manner, and each embodiment focuses on the differences from other embodiments, and the same or similar parts between the embodiments can be referred to each other. For the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0268] The steps in the methods of each embodiment of the present application can be adjusted in sequence, combined and deleted according to actual needs, and the technical features recorded in each embodiment can be replaced or combined.

[0269] The modules and sub-modules in the devices and terminals provided in the embodiments of the present application can be merged, divided and deleted according to actual needs.

[0270] In the several embodiments provided in the present application, it should be understood that the disclosed terminals, devices and methods can be implemented in other ways. For example, the terminal embodiments described above are only schematic, for example, the division of modules or submodules is only a logical function division, and there may be other division methods in actual implementation, for example, multiple submodules or modules can be combined or integrated into another module, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be an indirect coupling or communication connection through some interfaces, devices or modules, which can be electrical, mechanical or other forms.

[0271] The modules or submodules described as separate components may or may not be physically separated, and the components of the modules or submodules may or may not be physical modules or submodules, that is, they may be located in one place, or they may be distributed on multiple network modules or submodules. Some or all of the modules or submodules may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0272] In addition, each functional module or submodule in each embodiment of the present application may be integrated into one processing module, or each module or submodule may exist physically separately, or two or more modules or submodules may be integrated into one module. The above-mentioned integrated modules or submodules may be implemented in the form of hardware or in the form of software functional modules or submodules.

[0273] Professionals may further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in the above description according to function. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professionals and technicians may use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0274] The steps of the method or algorithm described in conjunction with the embodiments disclosed herein may be implemented directly by hardware, software units executed by a processor, or a combination of the two. The software units may be placed in a random access memory (RAM), a memory, a read-only memory (ROM), an electrically programmable ROM, an electrically erasable programmable ROM, a register, a hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art.

[0275] Finally, it should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the presence of other identical elements in the process, method, article or device including the elements.

[0276] The above description of the disclosed embodiments enables those skilled in the art to implement or use the present application. Various modifications to these embodiments will be apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present application. Therefore, the present application will not be limited to the embodiments shown herein, but will conform to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A form development method, characterized in that: include: Obtain the form configuration data obtained by configuring the entire target form; Acquire element configuration data obtained by configuring each form element in the target form based on multiple user interface components, wherein each form element corresponds to one user interface component, and the user interface component includes an open configuration interface; Based on the form configuration data and the element configuration data, a display interface of the target form is rendered.

2. The form development method according to claim 1, characterized in that: The obtaining of form configuration data obtained by configuring the entire target form includes: Obtaining a form type of the target form determined from a plurality of preset types; The form general configuration data obtained by configuring the general attributes of each form of the target form based on the form type is obtained, wherein the form general attributes are global attributes based on the target form.

3. The form development method according to claim 1, characterized in that: The obtaining of element configuration data for configuring each form element in the target form based on multiple user interface components includes: Determine at least one target component determined among the plurality of user interface components as each of the form elements in the target form; Obtaining element general configuration data obtained by configuring element general attributes of each of the form elements, wherein the element general attributes are global attributes based on the form elements; Acquire element component configuration data obtained by configuring component attributes of each of the form elements, wherein the component attributes are attributes of the target component corresponding to the form element; Interaction configuration data obtained by configuring interaction attributes between any two of the form elements is obtained, wherein the interaction attributes are rule attributes for implementing data interaction between any two of the form elements.

4. The form development method according to claim 3, characterized in that: The interaction attributes include rule attributes based on conditional verification.

5. The form development method according to claim 1, characterized in that: The rendering of the display interface of the target form based on the form configuration data and the element configuration data includes: Based on the form configuration data and the element configuration data, rendering a real-time preview interface of the target form; The form configuration data and the element configuration data are monitored in real time. If the form configuration data or the element configuration data changes, the real-time preview interface is re-rendered and updated based on the changed form configuration data or the element configuration data.

6. The form development method according to claim 1, characterized in that: The rendering of the display interface of the target form based on the form configuration data and the element configuration data includes: Packing the form configuration data and the element configuration data into a configuration data packet, and storing the configuration data packet in a target storage space; Re-acquire the configuration data packet from the target storage space; Calling the user interface component corresponding to each of the form elements in the configuration data packet, and mapping the element configuration data to the user interface component; Based on the form configuration data and the mapped user interface components, a display interface of the target form is rendered.

7. The form development method according to claim 6, characterized in that: After the rendering obtains the display interface of the target form, the method further includes: Obtaining configuration change data of the target form; The configuration change data is updated to the target storage space.

8. A form development device, characterized in that: include: The form configuration module is used to obtain the form configuration data obtained by configuring the target form as a whole; An element configuration module, used for acquiring element configuration data obtained by configuring each form element in the target form based on multiple user interface components, wherein each form element corresponds to one user interface component, and the user interface component includes an open configuration interface; A rendering module is used to render a display interface of the target form based on the form configuration data and the element configuration data.

9. An electronic device, characterized in that: include: Memory and processor; The memory is connected to the processor and is used to store programs; The processor is used to implement the form development method as described in any one of claims 1-7 by running the program in the memory.

10. A computer program product, characterized in that includes computer program instructions; When the computer program instructions are executed by a processor, the processor is caused to execute the form development method according to any one of claims 1 to 7.

Images