CN111930378B - Method, device and system for realizing Web end project form designer - Google Patents
Method, device and system for realizing Web end project form designer Download PDFInfo
- Publication number
- CN111930378B CN111930378B CN202010802084.6A CN202010802084A CN111930378B CN 111930378 B CN111930378 B CN 111930378B CN 202010802084 A CN202010802084 A CN 202010802084A CN 111930378 B CN111930378 B CN 111930378B
- Authority
- CN
- China
- Prior art keywords
- project
- data
- rendering
- project form
- component
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Management, Administration, Business Operations System, And Electronic Commerce (AREA)
Abstract
The application provides an implementation method of a Web end project form designer, which comprises the following steps: packaging the components of the design project form and arranging to form a basic component column; performing second-level packaging on the elements; carrying out corresponding data binding and rendering on the project form design component; arranging and pre-analyzing the project form design components into virtual DOM elements and displaying an interface; receiving the operation of a Web end on a configuration bar, and rendering a configuration result to a project form design area; updating the virtual DOM element and transmitting the updated DOM element to the server; calling a project form interface; receiving a selection of a first field value of a first field; receiving selection of a first dictionary value and temporarily storing the selection in a page memory; transmitting data of the first field value to a server; sending the item number to a server; receiving project data and analyzing and rendering the project data at a Web end; receiving modification operation of a user on the second field and updating the second field in a page memory; transmitting data of the second field value to the server.
Description
Technical Field
The present application relates to the field of computers, and in particular, to a method, an apparatus, a system, and a computer readable medium for implementing a Web-side project form designer.
Background
Typically in a user and project centric work, a project may include five management components: starting, planning, executing, monitoring and ending. According to the existing offline working mode, many problems are often generated due to the difficulty of project information management, such as information asymmetry, dependence of data storage on paper files, difficulty in data filling and statistics, untimely project progress control and the like. Project management processes are complicated and redundant, and similar contents need to go through different processes. The similarity problem is managed in different sub-processes, and is difficult to systematically analyze when project information is analyzed, so that the obtained statistical analysis result is relatively comprehensive. Moreover, the offline project management needs a large amount of personnel to process different processes, a large amount of manpower and material resources need to be consumed, and the data processing efficiency is very low.
Therefore, how to let the project personnel design online forms and manage project information automatically and efficiently is a problem that needs to be solved by those skilled in the art.
Disclosure of Invention
The technical problem to be solved by the application is to provide a method, a device, a system and a computer readable medium for realizing a Web-end project form designer, which can realize a project form designer with extremely high user-defined degree, provide highly flexible project form design freedom for users, and automatically and efficiently manage project information.
In order to solve the technical problem, the application provides an implementation method of a Web-side project form designer, which includes: packaging components of a design project form and obtaining JSON data, wherein the JSON data obtained through packaging comprises original attribute setting and initial data rendering, and the original attributes correspond to the interactive forms and the graphic styles of the components; arranging the JSON data corresponding to the components to form a basic component column; performing second-level packaging on elements in the basic component column and forming a project form design component, wherein the project form design component responds to clicking and moving operations of a Web end; monitoring the project form design component packaged in the second stage in a project form design area, and when the project form design component moves to the project form design area in response to clicking and moving operations of a Web end, performing data binding and rendering on the project form design component; arranging the project form design components in a responsive layout-stacked streaming layout; pre-parsing the arranged result into a virtual DOM element; displaying a currently designed project form interface through a virtual DOM element; in response to clicking on a form component of a project form design area, displaying a configuration field of the form component; receiving the operation of a Web end on a configuration bar, and rendering a configuration result to the design area of the project form; updating the virtual DOM element of the project form component corresponding to the configuration result; transmitting JSON data corresponding to the project form formed by design to a server; responding to a new project request initiated by a user, and calling and rendering the project form interface according to the project number of the new project request; receiving selection of a first field value of a first field in the project form interface, and triggering and rendering a corresponding first dictionary value according to the first field value; receiving the selection of the first dictionary value in the project form interface, and temporarily storing the selection in a page memory; in response to an item submission request, converting data of the first field value into a JSON format and transmitting the data to the server; in response to a user's selection of an item, sending an item number for the item to the server; receiving the project data which is sent by the server and is associated with the project number, and analyzing and rendering the project data at a Web end to form a project form page; when the project form page is an editable page, receiving modification operation of a user on a second field value of a second field and updating the second field value in a page memory; and responding to an item saving request of a user, converting the data of the second field value into a JSON format and transmitting the data to a server.
In an embodiment of the present application, the method further comprises: the configuration comprises a verification configuration and a permission configuration.
In an embodiment of the present application, the method further comprises: judging whether the project data has a data value ID or not; when the data value ID exists, rendering a form page according to the obtained data value; when no data value ID exists, a form null data value area is rendered.
In an embodiment of the application, the interaction modality of the component includes any one or more of: multiple lines of text, single lines of text, numeric values, radio boxes, drop boxes, check boxes, dates, times, file uploads, cut lines, signatures, captions, rich text, and multiple records.
In an embodiment of the present application, the currently designed form interface is stored in a global data stream.
In an embodiment of the present application, the project data includes a project current state; the method further comprises the following steps: and judging whether the current state of the project is locked, if so, rendering the project data to obtain a project form page which is a read-only page, and otherwise, rendering the project data to obtain a project form page which is an editable page.
In an embodiment of the present application, the method further comprises: receiving an item locking operation of a user and sending an item locking request to a server, wherein the item locking request is used for enabling the server to set the current state of the item to be locked.
In order to solve the above technical problem, the present application further provides an implementation apparatus of a Web-side project form designer, including: a component definition module configured to: packaging components of a design project form and obtaining JSON data, wherein the JSON data obtained through packaging comprises original attribute setting and initial data rendering, and the original attributes correspond to the interactive forms and the graphic styles of the components; arranging the JSON data corresponding to the components to form a basic component column; performing second-level packaging on elements in the basic component column and forming a project form design component, wherein the project form design component responds to clicking and moving operations of a Web end; a form design module configured to: monitoring the project form design component packaged in the second stage in a project form design area, and when the project form design component moves to the project form design area in response to clicking and moving operations of a Web end, performing data binding and rendering on the project form design component; arranging the project form design components in a responsive layout-stacked streaming layout; a form presentation rendering module configured to: pre-parsing the arranged result into a virtual DOM element; displaying a currently designed project form interface through a virtual DOM element; in response to clicking on a form component of a project form design area, displaying a configuration field of the form component; receiving the operation of a Web end on a configuration bar, and rendering a configuration result to the design area of the project form; an online form transmission module configured to: transmitting JSON data corresponding to the project form formed by design to a server; a new project module configured to: responding to a new project request initiated by a user, and calling and rendering the project form interface according to the project number of the new project request; receiving selection of a first field value of a first field in the project form interface, and triggering and rendering a corresponding first dictionary value according to the first field value; receiving the selection of the first dictionary value in the project form interface, and temporarily storing the selection in a page memory; in response to an item submission request, converting data of the first field value into a JSON format and transmitting the data to the server; a project editing module configured to: in response to a user's selection of an item, sending an item number for the item to the server; receiving the project data which is sent by the server and is associated with the project number, and analyzing and rendering the project data at a Web end to form a project form page; when the project form page is an editable page, receiving modification operation of a user on a second field value of a second field and updating the second field value in a page memory; and responding to an item saving request of a user, converting the data of the second field value into a JSON format and transmitting the data to a server.
In order to solve the above technical problem, the present application further provides an implementation system of a Web-side project form designer, including: a memory for storing instructions executable by the processor; and a processor for executing the instructions to implement the method as described above.
To solve the above technical problem, the present application also provides a computer readable medium storing computer program code, which when executed by a processor implements the method as described above.
Compared with the prior art, the implementation method of the Web-side project form designer can realize the project form designer with extremely high user-defined degree, and provides a high-flexibility project form design freedom degree for a user. Meanwhile, in the design process, with the continuous increase and frequent adjustment of form components, the smooth operation of the project form designer can be still maintained, and the rapid inspection of the current project design form is realized. And after the project form is configured, a user can directly input project data at a web end, so that automatic and efficient project information management is realized.
Drawings
The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiment(s) of the application and together with the description serve to explain the principle of the application. In the drawings:
FIG. 1 is a flow diagram illustrating a method for implementing a Web-side project form designer, according to an embodiment of the present application.
FIG. 2 is a block diagram of an apparatus for implementing a Web-side project form designer, according to an embodiment of the present application.
Fig. 3 is a schematic diagram of a system implementation environment of an implementation apparatus of a Web-side project form designer according to an embodiment of the present application.
FIG. 4 is a schematic diagram of a project form interface shown in accordance with an embodiment of the present application.
FIG. 5 is a schematic diagram of a project form page shown in accordance with an embodiment of the present application.
Detailed Description
In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings used in the description of the embodiments will be briefly introduced below. It is obvious that the drawings in the following description are only examples or embodiments of the application, from which the application can also be applied to other similar scenarios without inventive effort for a person skilled in the art. Unless otherwise apparent from the context, or otherwise indicated, like reference numbers in the figures refer to the same structure or operation.
As used in this application and the appended claims, the terms "a," "an," "the," and/or "the" are not intended to be inclusive in the singular, but rather are intended to be inclusive in the plural unless the context clearly dictates otherwise. In general, the terms "comprises" and "comprising" merely indicate that steps and elements are included which are explicitly identified, that the steps and elements do not form an exclusive list, and that a method or apparatus may include other steps or elements.
The relative arrangement of the components and steps, the numerical expressions, and numerical values set forth in these embodiments do not limit the scope of the present application unless specifically stated otherwise. Meanwhile, it should be understood that the sizes of the respective portions shown in the drawings are not drawn in an actual proportional relationship for the convenience of description. Techniques, methods, and apparatus known to those of ordinary skill in the relevant art may not be discussed in detail but are intended to be part of the specification where appropriate. In all examples shown and discussed herein, any particular value should be construed as merely illustrative, and not limiting. Thus, other examples of the exemplary embodiments may have different values. It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, further discussion thereof is not required in subsequent figures.
Flow charts are used herein to illustrate operations performed by systems according to embodiments of the present application. It should be understood that the preceding or following operations are not necessarily performed in the exact order in which they are performed. Rather, various steps may be processed in reverse order or simultaneously. Meanwhile, other operations are added to or removed from these processes.
The application provides an implementation method of a Web end project form designer. The implementation method of the Web end project form designer can be applied to an implementation system of the Web end project form designer or the Web end project form designer. Fig. 1 is a flowchart illustrating an implementation method of a Web-side project form designer according to an embodiment of the present application. As shown in fig. 1, the method comprises the steps of:
103, performing second-level packaging on elements in the basic component column and forming a project form design component, wherein the project form design component responds to clicking and moving operations of a Web end;
step 104, monitoring the project form design components packaged at the second level in the project form design area, and binding and rendering data of the project form design components when the project form design components move to the project form design area in response to the clicking and moving operations of the Web end;
105, arranging the project form design components in a response type layout and superposition stream type layout;
step 114, responding to the project submission request, converting the data of the first field value into a JSON format and transmitting the data to a server;
in response to the user's item save request, the data of the second field value is converted into JSON format and transmitted to the server, step 118.
The above steps 101-118 are explained in detail as follows:
in step 101, a form design component is encapsulated to obtain JSON data. JSON (JavaScript Object Notation) is a data storage format. JSON can convert a set of data represented in a JavaScript object into a string, and then pass the string between networks or programs and restore it to a data format supported by each programming language if necessary. And packaging the form design component to form JSON data, wherein the JSON data comprises the original attribute setting and the initial data rendering of the component. Wherein the original property settings of the components correspond to the interactive modalities and graphical styles of the components.
In one non-limiting embodiment, the interaction modality of the component includes any one or more of: multi-line text, single-line text, numeric values, radio boxes, drop boxes, check boxes, dates, times, file uploads, cut lines, signatures, explanatory words, rich text, and multiple records. The rich text refers to an input box into which characters and files in various formats such as characters and pictures can be input. Multiple records refer to data entry components that consist of multiple single lines of text or multiple sets of multiple lines of text components. For example, the components corresponding to the summary and statistics pages of the data may be interactive forms of multiple record components. The initial data set may include an initial name of the component, an initial rendering color, and an initial character format, among others.
At step 102, the JSON data corresponding to the components are arranged to form a base component column. JSON data corresponding to components of different interaction forms form component elements in the basic component column. The corresponding base component column may be located on the left or upper side of the form designer interface.
At step 103, the elements in the base component column are packaged at the second level to form a form design component that responds to the click and move operations on the Web side. Second level packaging can be achieved by the React DnD (Dragon and Drop for React) suite. React is a framework for building user interfaces. The type of clicking and moving operation, the object of operation and the information of the process of operation are set in the React DnD suite. After packaging, form design components responding to the clicking and moving operations of the Web end are formed in the basic component column.
At step 104, form design components that have undergone second level packaging are listened to in the form design area of the form designer. And when the form design component moves to the form design area in response to the clicking and moving operations of the Web end, performing data binding and rendering on the form design component. After rendering, a specific form of the form component is formed in the form design area.
At step 105, the form design component is arranged in a responsive layout overlay streaming layout. After multiple clicking and moving operations, form components formed in the form design area are increasing. The form design components are then arranged in a responsive layout-stacked streaming layout. In the stream type layout mode, the width of the elements of the form page is adaptively adjusted according to the screen resolution, and meanwhile, the overall layout is unchanged. In order to enable the form layout to adapt to the span of a larger screen dimension, the form design components are arranged through the response type layout and the superposed stream type layout, so that the form page can adapt to the span of the larger screen dimension, and the display effect of page elements can be ensured when the form page is used.
At step 106, pre-parsing the results of the arrangement into virtual DOM elements; and displaying the currently designed form interface through the virtual DOM element. The DOM (Document Object Model) is an interface for editing and manipulating HTML (Hypertext Markup Language) page elements. The HTML DOM defines the standard steps of accessing and manipulating elements in a page corresponding to an HTML document. The DOM structure includes multiple layers of nodes. The multi-level nodes comprise < html > … </html >, < head > … </head >, < body > … </body >, < ul > … </ul >, < li >, and "list item". Where ul denotes Unordered list. li denotes list. When the Web end operates the form components in the form design area by using the corresponding structure of the DOM, one-time updating needs to be performed through traversing nodes of each layer of the DOM. When the form components in the form design area are increased continuously, the time required by traversal is greatly increased due to frequent operation and continuous modification of page design and the perfection of details, so that the operation of a form designer interface is slowed, the use experience is influenced, and the design efficiency is reduced.
In the implementation method of the form designer, the arrangement result is pre-analyzed into a virtual DOM element; and displaying the currently designed form interface through the virtual DOM element. Specifically, the DOM node is simulated by the JavaScript object, and the update of the page in the form design area can be completely reflected on the JavaScript object. And displaying the currently designed form interface through the virtual DOM element simulated by the JavaScript object. Compared with the form component of the form design area operated through the DOM flow, the speed of operating the JavaScript object in the memory of the terminal corresponding to the Web end is obviously improved. In addition, the virtual DOM can only operate the updated nodes, so that the phenomenon that nodes of each layer of the DOM need to be traversed after one-time updating is avoided, and the efficiency of displaying the currently designed form interface is improved.
At step 107, in response to clicking on a form component of the form design area, a configuration field for the form component is displayed. The configuration column may be located to the right or lower side of the form designer interface. The configurable items in the configuration column can be set according to actual requirements. The content of the configuration may include a verification configuration and a rights configuration. The types of configurations may also be increased as desired. For example, more custom configurations can be used to modify the style of form components according to the user's needs. The verification configuration refers to whether the interactive form of the form single component corresponds to the displayed style or not. The permission configuration may configure the permissions of different form components that may be operated.
In step 108, receiving the operation of the Web end on the configuration bar, and rendering the configuration result to the design area of the form. In step 109, the virtual DOM element of the form component corresponding to the configuration result is updated. The updating of the virtual DOM elements enables the currently designed form interface to be updated instantly, so that the quick display of the design effect is facilitated. The updating of the virtual DOM elements is realized by comparing and replacing objects of the same layer of elements in each layer of nodes, so that the element updating efficiency is improved. In order to realize the quick view of the currently designed form interface, the currently designed form interface is stored in a global data stream form based on MobX. The storage position is located in the memory of the terminal corresponding to the Web end. MobX is a state management library for data. MobX can be used together with a JavaScript library to manage the state of data flow.
In step 110, JSON data corresponding to the designed form is transmitted to the server. It should be noted that the JSON data corresponding to the basic component column and the JSON data formed in the design process can also be transmitted to the server side according to the needs and settings. For example, if it is desired to multiplex the base component bar multiple times in different design scenarios, the JSON data corresponding to the base component bar can be transmitted to the server side.
The user may click a "new project" button in the system interface to initiate a new project request. In step 111, in response to a new project request initiated by a user, the system calls a previously configured project form interface to the server according to a project number of the new project request, and performs rendering. FIG. 4 is a schematic diagram of a project form interface shown in accordance with an embodiment of the present application.
In step 112, the system receives a user selection of a first field value of a first field in the project form interface, and triggers and renders a corresponding first dictionary value according to the first field value. The user may select among the rendered first dictionary values to configure the data. The first field may be one or more fields. As shown in fig. 4, the first field may include a plurality of fields such as a signing status, a signing date, a belonging domain, and the like, and the user may configure the first field according to actual needs, which is not limited in this application. The single first field has one or more first dictionary values corresponding thereto, and the system renders the corresponding first dictionary values for selection by the user. In one example, the first dictionary value may be rendered as a drop-down selection area for selection by the user. For example, when the user selects "big to belong" the user will see a drop-down selection box for "big to belong", which may include three options of "east", "west" and "north" (i.e., the three first dictionary values of the first field) for the user to select.
In step 113, the system receives a selection of a first dictionary value from the project form interface from the user and stores the first dictionary value in the page memory. When the user has finished making the selection, the user may click on the "submit" button in the project form page to initiate the project submission request.
In step 114, in response to a user initiated project submission request, the system converts the data of the first field value to JSON format and transmits to the server. And the server updates and/or stores the data after receiving the data of the first field value in the JSON format.
In step 115, in response to the user's selection of an item, the system sends the item number of the item to the server. The server receives the item number of the item, and then transmits item data associated with the item number to the system.
In step 116, the system receives the item data associated with the item number sent by the server and performs parsing and rendering on the Web side to form a item form page. FIG. 5 is a schematic diagram of a project form page shown in accordance with an embodiment of the present application.
In an embodiment of the present application, the project data includes a project current state; the rendering in step 116 may include the steps of: and judging whether the current state of the project is locked, if so, rendering the project data to obtain a project form page which is a read-only page, and otherwise, rendering the project data to obtain a project form page which is an editable page.
In an embodiment of the present application, after receiving the project data sent by the server in step 116, the parsing and rendering the project data on the Web by the system may include the following steps: judging whether the project data has a data value ID; when the data value ID exists, the system renders a form page according to the obtained data value; when no data value ID exists, the system renders the form empty data value area.
In step 117, when the project form page is an editable page, the system receives a modification operation of the second field value of the second field by the user and updates the modification operation in the page memory. The second field may be one or more fields. As shown in fig. 5, the second field may include a plurality of fields such as signing status, contract name, contract signing date, belonging area, contract status, etc., and the user may configure the second field according to actual needs, which is not limited in this application. And the user performs modification operation in the input boxes of the second fields to complete data entry or update, and the content input in the input boxes of the second fields by the user is the second field value of the second fields.
When the user has finished making the changes, the user may click on the "save" button in the project form page to initiate a project save request. In step 118, in response to the user's project save request, the system converts the data of the second field value into JSON format and transmits to the server. And the server updates and/or stores the data after receiving the data of the second field value in the JSON format.
In an embodiment of the present application, the method for implementing the Web-side project form designer may further include the following steps: receiving an item locking operation of a user and sending an item locking request to a server, wherein the item locking request is used for enabling the server to set the current state of the item to be locked. The user can lock the data through the above operations after the data is filled in, and the locked project data is not allowed to be modified by the user, so as to ensure the safety and integrity of the project data.
The implementation method of the Web-side project form designer can realize the project form designer with extremely high user-defined degree, and provides a high-flexibility project form design freedom degree for a user. Meanwhile, in the design process, with the continuous increase and frequent adjustment of form components, the smooth operation of the project form designer can be still maintained, and the rapid inspection of the current project design form is realized. And after the project form is configured, a user can directly input project data at a web end, so that automatic and efficient project information management is realized.
The application also provides an implementation device of the Web end project form designer. FIG. 2 is a block diagram of an apparatus for implementing a Web-side project form designer, according to an embodiment of the present application. As shown in fig. 2, the apparatus 200 for implementing the Web-side project form designer includes a component definition module 201, a form design module 202, a form presentation rendering module 203, an online form transmission module 204, a new project module 205, and a project editing module 206.
A component definition module 201 configured to: packaging components of a design project form and obtaining JSON data, wherein the JSON data obtained through packaging comprises original attribute setting and initial data rendering, and the original attributes correspond to the interactive forms and the graphic styles of the components; arranging JSON data corresponding to the components to form a basic component column; performing second-level packaging on elements in the basic component column and forming a project form design component, wherein the project form design component responds to clicking and moving operations of a Web end;
a form design module 202 configured to: monitoring a project form design component packaged at the second level in a project form design area, and performing data binding and rendering on the project form design component when the project form design component moves to the project form design area in response to clicking and moving operations of a Web end; arranging the project form design components in a response type layout and a superposition stream type layout;
a form presentation rendering module 203 configured to: pre-parsing the arranged result into a virtual DOM element; displaying a currently designed project form interface through a virtual DOM element; displaying a configuration field of the form component in response to clicking on the form component of the project form design area; receiving the operation of a Web end on a configuration bar, and rendering a configuration result to a project form design area;
an online form transmission module 204 configured to: transmitting JSON data corresponding to the project form formed by design to a server;
a new project module 205 configured to: responding to a new project request initiated by a user, and calling and rendering a project form interface according to a project number of the new project request; receiving selection of a first field value of a first field in the project form interface, and triggering and rendering a corresponding first dictionary value according to the first field value; receiving selection of a first dictionary value in a project form interface, and temporarily storing the selection in a page memory; responding to the project submission request, converting the data of the first field value into a JSON format and transmitting the data to a server;
a project editing module 206 configured to: in response to a selection of an item by a user, sending an item number of the item to a server; receiving project data which is sent by a server and is associated with the project number, and analyzing and rendering the project data at a Web end to form a project form page; when the project form page is an editable page, receiving modification operation of a user on a second field value of a second field and updating the second field value in a page memory; and converting the data of the second field value into a JSON format and transmitting the data to the server in response to the item saving request of the user.
The steps executed by the modules 201 and 206 can refer to the steps 101 and 118 in the foregoing embodiments, and will not be described herein.
FIG. 3 is a schematic diagram of a system implementation environment of an implementation apparatus of a Web-side project form designer according to an embodiment of the present application. An implementation 300 of a Web-side project form designer may include an internal communication bus 301, a Processor (Processor)302, a Read Only Memory (ROM)303, a Random Access Memory (RAM)304, and a communication port 305. The implementation device 300 of the project form designer at the Web end is connected with a network through a communication port and is connected with the server end. Internal communication bus 301 may enable data communication among the components of Web-side project form designer implementing device 300. Processor 302 may make the determination and issue a prompt. In some embodiments, processor 302 may be comprised of one or more processors. The communication port 305 may enable sending and receiving information and data from a network. In fig. 3, the communication port 305 may be connected to the server a 306, the server data storage a 307, the server B308, and the server data storage B309 of the server side through a network to implement transmission of JSON data corresponding to the form. The Web-side project form designer implementation 300 may also include various forms of program storage units and data storage units, such as Read Only Memory (ROM)303 and Random Access Memory (RAM)304, capable of storing various data files used in computer processing and/or communications, as well as possibly program instructions executed by processor 302. The processor executes these instructions to implement the main parts of the method. The results processed by the processor are communicated to the user device through the communication port and displayed on the user interface.
The apparatus for implementing the Web-side project form designer may be implemented as a computer program, stored in a memory, and written to and executed by the processor 302 to implement the method for implementing the Web-side project form designer of the present application.
The present application also provides a computer readable medium storing computer program code which, when executed by a processor, implements a method for implementing a Web-side project form designer as described above.
Aspects of the present application may be embodied entirely in hardware, entirely in software (including firmware, resident software, micro-code, etc.) or in a combination of hardware and software. The above hardware or software may be referred to as "data block," module, "" engine, "" unit, "" component, "or" system. The processor may be one or more Application Specific Integrated Circuits (ASICs), Digital Signal Processors (DSPs), digital signal processing devices (DAPDs), Programmable Logic Devices (PLDs), Field Programmable Gate Arrays (FPGAs), processors, controllers, microcontrollers, microprocessors, or a combination thereof. Furthermore, aspects of the present application may be represented as a computer product, including computer readable program code, embodied in one or more computer readable media. For example, computer-readable media may include, but are not limited to, magnetic storage devices (e.g., hard disk, floppy disk, magnetic strips … …), optical disks (e.g., Compact Disk (CD), Digital Versatile Disk (DVD) … …), smart cards, and flash memory devices (e.g., card, stick, key drive … …).
The computer readable medium may comprise a propagated data signal with the computer program code embodied therein, for example, on a baseband or as part of a carrier wave. The propagated signal may take any of a variety of forms, including electromagnetic, optical, and the like, or any suitable combination. The computer readable medium can be any computer readable medium that can communicate, propagate, or transport the program for use by or in connection with an instruction execution system, apparatus, or device. Program code on a computer readable medium may be propagated over any suitable medium, including radio, electrical cable, fiber optic cable, radio frequency signals, or the like, or any combination of the preceding.
Similarly, it should be noted that in the preceding description of embodiments of the application, various features are sometimes grouped together in a single embodiment, figure, or description thereof for the purpose of streamlining the disclosure aiding in the understanding of one or more of the embodiments. This method of disclosure, however, is not intended to require more features than are expressly recited in the claims. Indeed, the embodiments may be characterized as having less than all of the features of a single embodiment disclosed above.
Although the present application has been described with reference to the present specific embodiments, it will be recognized by those skilled in the art that the foregoing embodiments are merely illustrative of the present application and that various changes and substitutions of equivalents may be made without departing from the spirit of the application, and therefore, it is intended that all changes and modifications to the above-described embodiments that come within the spirit of the application fall within the scope of the claims of the application.
Claims (10)
1. A method for realizing a Web end project form designer comprises the following steps:
packaging components of a design project form and obtaining JSON data, wherein the JSON data obtained through packaging comprises original attribute setting and initial data rendering, and the original attributes correspond to the interactive forms and the graphic styles of the components;
arranging the JSON data corresponding to the components to form a basic component column;
performing second-level packaging on elements in the basic component column and forming a project form design component, wherein the project form design component responds to clicking and moving operations of a Web end;
monitoring the project form design component packaged in the second stage in a project form design area, and when the project form design component moves to the project form design area in response to clicking and moving operations of a Web end, performing data binding and rendering on the project form design component;
arranging the project form design components in a responsive layout-stacked streaming layout;
pre-analyzing the arrangement result into a virtual DOM element, and displaying a currently designed project form interface through the virtual DOM element;
in response to clicking on a form component of a project form design area, displaying a configuration field of the form component;
receiving the operation of a Web end on a configuration bar, and rendering a configuration result to the design area of the project form;
updating the virtual DOM element of the project form component corresponding to the configuration result;
transmitting JSON data corresponding to the project form formed by design to a server;
responding to a new project request initiated by a user, and calling and rendering the project form interface according to the project number of the new project request;
receiving selection of a first field value of a first field in the project form interface, and triggering and rendering a corresponding first dictionary value according to the first field value;
receiving the selection of the first dictionary value in the project form interface, and temporarily storing the selection in a page memory;
in response to an item submission request, converting data of the first field value into a JSON format and transmitting the data to the server;
in response to a user's selection of an item, sending an item number for the item to the server;
receiving the project data which is sent by the server and is associated with the project number, and analyzing and rendering the project data at a Web end to form a project form page;
when the project form page is an editable page, receiving modification operation of a user on a second field value of a second field and updating the second field value in a page memory;
and responding to an item saving request of a user, converting the data of the second field value into a JSON format and transmitting the data to a server.
2. The method of claim 1, further comprising:
the configuration comprises a verification configuration and a permission configuration.
3. The method of claim 1, further comprising:
judging whether the project data has a data value ID or not;
when the data value ID exists, rendering a form page according to the obtained data value;
when no data value ID exists, a form null data value area is rendered.
4. The method of claim 1, wherein the interaction modality of the component includes any one or more of: multiple lines of text, single lines of text, numeric values, radio boxes, drop boxes, check boxes, dates, times, file uploads, cut lines, signatures, captions, rich text, and multiple records.
5. The method of claim 1, wherein the currently designed project form interface is stored in a global data stream.
6. The method of claim 1, wherein the item data includes an item current state; the method further comprises the following steps:
and judging whether the current state of the project is locked, if so, rendering the project data to obtain a project form page which is a read-only page, and otherwise, rendering the project data to obtain a project form page which is an editable page.
7. The method of claim 6, further comprising:
receiving an item locking operation of a user and sending an item locking request to a server, wherein the item locking request is used for enabling the server to set the current state of the item to be locked.
8. An implementation device of a Web end project form designer comprises:
a component definition module configured to: packaging components of a design project form and obtaining JSON data, wherein the JSON data obtained through packaging comprises original attribute setting and initial data rendering, and the original attributes correspond to the interactive forms and the graphic styles of the components; arranging the JSON data corresponding to the components to form a basic component column; performing second-level packaging on elements in the basic component column and forming a project form design component, wherein the project form design component responds to clicking and moving operations of a Web end;
a form design module configured to: monitoring the project form design component packaged in the second stage in a project form design area, and when the project form design component moves to the project form design area in response to clicking and moving operations of a Web end, performing data binding and rendering on the project form design component; arranging the project form design components in a responsive layout-stacked streaming layout;
a form presentation rendering module configured to: pre-parsing the arranged result into a virtual DOM element; displaying a currently designed project form interface through a virtual DOM element; in response to clicking on a form component of a project form design area, displaying a configuration field of the form component; receiving the operation of a Web end on a configuration bar, and rendering a configuration result to the design area of the project form; updating the virtual DOM element of the form component corresponding to the configuration result;
an online form transmission module configured to: transmitting JSON data corresponding to the project form formed by design to a server;
a new project module configured to: responding to a new project request initiated by a user, and calling and rendering the project form interface according to the project number of the new project request; receiving selection of a first field value of a first field in the project form interface, and triggering and rendering a corresponding first dictionary value according to the first field value; receiving the selection of the first dictionary value in the project form interface, and temporarily storing the selection in a page memory; in response to an item submission request, converting data of the first field value into a JSON format and transmitting the data to the server;
a project editing module configured to: in response to a user's selection of an item, sending an item number for the item to the server; receiving the project data which is sent by the server and is associated with the project number, and analyzing and rendering the project data at a Web end to form a project form page; when the project form page is an editable page, receiving modification operation of a user on a second field value of a second field and updating the second field value in a page memory; and responding to an item saving request of a user, converting the data of the second field value into a JSON format and transmitting the data to a server.
9. A system for implementing a Web-side project form designer, comprising:
a memory for storing instructions executable by the processor; and a processor for executing the instructions to implement the method of any one of claims 1-7.
10. A computer-readable medium having stored thereon computer program code which, when executed by a processor, implements the method of any of claims 1-7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010802084.6A CN111930378B (en) | 2020-08-11 | 2020-08-11 | Method, device and system for realizing Web end project form designer |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010802084.6A CN111930378B (en) | 2020-08-11 | 2020-08-11 | Method, device and system for realizing Web end project form designer |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111930378A CN111930378A (en) | 2020-11-13 |
| CN111930378B true CN111930378B (en) | 2021-10-22 |
Family
ID=73311991
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010802084.6A Active CN111930378B (en) | 2020-08-11 | 2020-08-11 | Method, device and system for realizing Web end project form designer |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111930378B (en) |
Families Citing this family (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112650492A (en) * | 2020-12-24 | 2021-04-13 | 山东中创软件工程股份有限公司 | Rendering method, system and related device of Web page |
| CN112800730A (en) * | 2021-01-28 | 2021-05-14 | 中国工商银行股份有限公司 | Report form filling method and device |
| CN113031947A (en) * | 2021-03-05 | 2021-06-25 | 苏州帝博信息技术有限公司 | Configuration data management method and device used in interface design tool |
| CN114781344A (en) * | 2022-06-24 | 2022-07-22 | 江苏中威科技软件系统有限公司 | Method for rendering workflow electronic form by adopting reader for safe analysis and reader |
| CN117573127B (en) * | 2024-01-17 | 2024-04-23 | 中建三局信息科技有限公司 | Page building method and device, electronic equipment and medium |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107807913A (en) * | 2017-11-16 | 2018-03-16 | 金航数码科技有限责任公司 | A kind of form design system and method based on web |
| CN108363573A (en) * | 2018-01-11 | 2018-08-03 | 山东浪潮通软信息科技有限公司 | A kind of efficient mobile form design and rendering intent |
| US10331424B1 (en) * | 2018-07-27 | 2019-06-25 | Modo Labs, Inc. | User interface development through web service data declarations |
| CN110837369A (en) * | 2019-10-24 | 2020-02-25 | 山东中创软件工程股份有限公司 | Form generation method and device, electronic equipment and storage medium |
Family Cites Families (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9298455B1 (en) * | 2013-03-15 | 2016-03-29 | Instart Logic, Inc. | Provisional execution of dynamic content component |
| US10701030B2 (en) * | 2016-07-06 | 2020-06-30 | Hiro Media Ltd. | Real-time monitoring of web page code |
| CN107544808A (en) * | 2017-09-07 | 2018-01-05 | 北京奥威科软信息技术有限公司 | The generation method and device of a kind of web form |
| CN109375918A (en) * | 2018-11-23 | 2019-02-22 | 天津字节跳动科技有限公司 | Interface rendering method, device, electronic equipment and the storage medium of small routine |
-
2020
- 2020-08-11 CN CN202010802084.6A patent/CN111930378B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107807913A (en) * | 2017-11-16 | 2018-03-16 | 金航数码科技有限责任公司 | A kind of form design system and method based on web |
| CN108363573A (en) * | 2018-01-11 | 2018-08-03 | 山东浪潮通软信息科技有限公司 | A kind of efficient mobile form design and rendering intent |
| US10331424B1 (en) * | 2018-07-27 | 2019-06-25 | Modo Labs, Inc. | User interface development through web service data declarations |
| CN110837369A (en) * | 2019-10-24 | 2020-02-25 | 山东中创软件工程股份有限公司 | Form generation method and device, electronic equipment and storage medium |
Non-Patent Citations (1)
| Title |
|---|
| 可配置化表单引擎系统的设计与实现;王若龙;《中国优秀硕士学位论文全文数据库 信息科技辑》;20190715;I138-363 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111930378A (en) | 2020-11-13 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111930378B (en) | Method, device and system for realizing Web end project form designer | |
| US20080263101A1 (en) | Data Processing Device and Data Processing Method | |
| US20100199167A1 (en) | Document processing apparatus | |
| US20100036860A1 (en) | Data managment apparatus, data editing apparatus, and data reading apparatus and respective methods thereof | |
| CN111522551B (en) | Method and device for realizing Web end online form designer | |
| US20080262833A1 (en) | Document Processing Device and Document Processing Method | |
| US20090019064A1 (en) | Document processing device and document processing method | |
| US20080040588A1 (en) | Data Processing Device and Data Processing Method | |
| US20090132906A1 (en) | Document processing device and document processing method | |
| EP1816586A1 (en) | Data processing system, data processing method, and management server | |
| US20090021767A1 (en) | Document processing device | |
| US20070258100A1 (en) | Document Processing Device and Document Processing Method | |
| EP1821219A1 (en) | Document processing device and document processing method | |
| US7805452B2 (en) | Data processing device and data processing method | |
| EP1830274A1 (en) | Server device and name space issuing method | |
| US20080250311A1 (en) | Document Processing Device, and Document Processing Method | |
| US20080208790A1 (en) | Document Processing Device, and Document Processing Method | |
| US7827195B2 (en) | Document management device and document management method | |
| US7802181B2 (en) | Document processing device and document processing method | |
| US20080320412A1 (en) | Document Processing Device and Document Processing Method | |
| US20090235156A1 (en) | Document processing device and document processing method | |
| US20100077295A1 (en) | Document processing device and document processing module | |
| EP1821220A1 (en) | Data processing device, document processing device, and document processing method | |
| CN111930379B (en) | Method, device and system for realizing Web end complaint form designer | |
| EP1933233A1 (en) | Data processing apparatus |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| CP03 | Change of name, title or address | ||
| CP03 | Change of name, title or address |
Address after: 200233 2nd floor, no.25-1, Hongcao Road, Xuhui District, Shanghai Patentee after: Shanghai Taimei Nebula Digital Technology Co.,Ltd. Address before: Room 701, building 1, No.7 Guiqing Road, Xuhui District, Shanghai 200030 Patentee before: SHANGHAI YIKAI INTELLIGENT TECHNOLOGY Co.,Ltd. |