CN117971194A - Method for realizing editable form in low-code platform - Google Patents

Abstract

The application relates to a method for realizing an editable form in a low-code platform, which provides an editable form realization scheme in the low-code platform, a developer can generate columns of the editable form through visual drag operation, and verification rules and mapping fields of each column can be customized to ensure the validity of data and the accuracy of the fields during submission. The developer can ensure that the data entered by the user meets expectations and enhance the data integrity of the application. Through this editable form solution, a developer can easily build a function-rich, highly customizable form, editable form application on a low code platform. The simplicity and flexibility of drag operation enable the form design to become intuitive and convenient, and the user-defined verification rules and row operation buttons further improve the accuracy and user experience of data. The scheme simplifies the development process, improves the development efficiency, and provides excellent data management and interaction experience for users.

Description

Method for realizing editable form in low-code platform

Technical Field

The disclosure relates to the technical field of form application, in particular to a method, a device and electronic equipment for realizing an editable form in a low-code platform.

Background

In conventional application development processes, creating editable form functionality typically requires a large amount of manual coding, including front-end interface design, data model definition, validation logic, and interoperation. This development approach requires extensive programming knowledge and consumes a long development cycle.

In order to simplify and accelerate the development process of the editable form function, some low-code platforms provide solutions, in the prior art, for example, lowcode-engine editable forms are added with form columns by clicking an attribute panel, then form components needing to be rendered such as text boxes, drop-down boxes and the like are dragged into each column, and then corresponding verification rules are configured, so that the construction function of the low-code platform is weakened by reducing in this way, and the dragging and other functions cannot be normally used.

In addition, these low code platforms rely on third party vendors, which can lead to application program dependencies on availability and stability of third party libraries and services, which can be compromised if they change or break. There is also a risk of data leakage if applications developed using these platforms have sensitive data, which makes the data security uncontrollable.

In addition, the mode of clicking and adding editable form columns on the attribute panel makes interaction more complicated. This approach requires the developer to click on and fill out relevant information for the columns, such as column names, data types, validation rules, etc., in the property panel one by one. When a plurality of columns need to be created, a developer has to repeat the addition operation and to ensure that the attribute setting of each column is correct, which results in a cumbersome operation flow and error-prone situation. The developer may need to switch among different tabs or dialog boxes, find and fill in corresponding attributes, increasing complexity of interaction and learning costs.

Second, this approach limits the developer's quick adjustment of the table structure. If an insert, delete, or reorder operation is required for a table column, the developer may need to return to the property panel and make a corresponding modification. This increases the steps and time for adjusting the table structure, reducing development efficiency. In addition, since the property panel typically displays only a limited number of column properties, a developer may need to scroll or switch to view and edit the properties of all columns, further increasing operational complexity.

Finally, this approach may lack an intuitive and visual interactive experience. The developer cannot intuitively preview and adjust the position, width, appearance, etc. of the columns. This may result in the developer being required to constantly make modifications and adjustments to achieve the desired form layout and look effects. Such iterative debugging and modification processes may impact development efficiency and user experience.

Disclosure of Invention

In order to solve the problems, the application provides a method, a device and electronic equipment for realizing an editable form in a low-code platform.

In one aspect of the present application, a method for implementing an editable form in a low code platform is provided, including the steps of:

Deploying a form designer in a low code platform;

performing table configuration on each independent form component dragged by a user by using the design state of a designer, and simulating to generate a corresponding first editable table;

rendering the first editable form by using the running state of the designer, rendering the form content in the first editable form into a form component, and generating a second editable form;

And editing the second editable form, and recording and storing historical data of the editing operation.

As an optional implementation manner of the application, optionally, using the design state of the designer, each independent form component dragged by the user is subjected to form configuration, and corresponding editable forms are generated through simulation, including:

Determining each required independent form component;

in the design page of the design state, a user drags each independent form component to a first editable form in the design page;

Performing individual component configuration on each individual form component in the first editable form;

after configuration, form adjustment is carried out on each independent form component through the CSS and DOM nodes, and a first editable form with form content is simulated and generated.

As an optional embodiment of the present application, optionally, after the configuration is completed, the form adjustment is performed on each independent form component by using the CSS and DOM nodes, further including:

generating JSON configuration of the first editable form, and storing the JSON configuration into a database of the designer in JSON format data;

Synchronization transmits the JSON configuration of the first editable form to run state.

As an optional embodiment of the present application, optionally, using an operation state of the designer, rendering the first editable form, rendering a form content in the first editable form as a form component, generating the second editable form includes:

And rendering each form component in the first editable form according to the JSON configuration by using the form rendering in the running state, rendering the form content in the form component into a corresponding form component, and generating a second editable form.

As an optional embodiment of the present application, optionally, the running state uses table rendering, according to JSON configuration, to render each form component in the first editable table, to render the table contents in the form component into a corresponding form component, to generate a second editable table, including:

the running state receives the JSON configuration of the first editable form and forwards the JSON configuration to the rendering engine;

the rendering engine analyzes the JSON configuration to obtain the API of each form component in the first editable form;

the APIs of each form component in the first editable form are called in order:

rendering the table columns in the first editable table using the table rendering columns;

Rendering the table rows in the first editable table using the table rendering rows;

Rendering of each form component is completed, and a second editable table with visible contents of each form component is generated.

As an optional embodiment of the present application, optionally, performing an editing operation on the second editable form, recording and saving history data of the editing operation, includes:

Performing data editing operation on the second editable form, and caching operation data to a database;

when the operation is canceled, the operation data cached last time is called and executed, and the original point is returned.

In another aspect of the present application, an apparatus for implementing the method for implementing an editable form in a low code platform is provided, including:

a deployment module for deploying a form designer in the low code platform;

the design module is used for carrying out table configuration on each independent form component dragged by a user by utilizing the design state of the designer, and simulating to generate a corresponding first editable table;

the operation module is used for rendering the first editable form by utilizing the operation state of the designer, rendering the form content in the first editable form into a form component and generating a second editable form;

and the database is used for editing the second editable form, recording and storing historical data of the editing operation.

In another aspect, the present application further provides an electronic device, including:

A processor;

a memory for storing processor-executable instructions;

Wherein the processor is configured to implement the method of implementing an editable form in a low code platform when executing the executable instructions.

The invention has the technical effects that:

The present application provides an editable form implementation in a low code platform. In a low code platform, a developer can generate columns of an editable form through intuitive drag operation, and verification rules and mapping fields of each column can be customized to ensure the validity of data and the accuracy of fields at the time of submission.

In this scheme, the verification rule of each column may be defined according to the requirement of the application, such as a mandatory entry, a minimum value, a maximum value, a custom regular expression, and the like. In this way, the developer can ensure that the data entered by the user meets expectations and enhance the data integrity of the application. In addition, the developer can also implement the operation on the form row by a specific button, such as a delete button. When the user clicks the delete button, the current row will be deleted, providing flexible control and manipulation of the table data.

Through this editable form solution, a developer can easily build a function-rich, highly customizable form, editable form application on a low code platform. The simplicity and flexibility of drag operation enable the form design to become intuitive and convenient, and the user-defined verification rules and row operation buttons further improve the accuracy and user experience of data. The scheme simplifies the development process, improves the development efficiency, and provides excellent data management and interaction experience for users.

Other features and aspects of the present disclosure will become apparent from the following detailed description of exemplary embodiments, which proceeds with reference to the accompanying drawings.

Drawings

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate exemplary embodiments, features and aspects of the present disclosure and together with the description, serve to explain the principles of the disclosure.

FIG. 1 shows a schematic flow chart of an implementation of the present invention;

FIG. 2 is a schematic diagram of an editable form in accordance with aspects of the invention;

FIG. 3 is a schematic diagram illustrating the insertion of an "input box" form component in an editable form for the present invention;

FIG. 4 is a schematic diagram of the insertion of a "sliding entry bar" component in an editable form for the purposes of the present invention

FIG. 5 is a schematic diagram illustrating the insertion of default data for the present invention in an operational state;

fig. 6 shows a schematic application diagram of the electronic device of the invention.

Detailed Description

Various exemplary embodiments, features and aspects of the disclosure will be described in detail below with reference to the drawings. In the drawings, like reference numbers indicate identical or functionally similar elements. Although various aspects of the embodiments are illustrated in the accompanying drawings, the drawings are not necessarily drawn to scale unless specifically indicated.

The word "exemplary" is used herein to mean "serving as an example, embodiment, or illustration. Any embodiment described herein as "exemplary" is not necessarily to be construed as preferred or advantageous over other embodiments.

In addition, numerous specific details are set forth in the following detailed description in order to provide a better understanding of the present disclosure. It will be understood by those skilled in the art that the present disclosure may be practiced without some of these specific details. In some instances, well known means, elements, and circuits have not been described in detail so as not to obscure the present disclosure.

The low code platform mainly uses low code technology such as components to replace codes to realize corresponding table editing.

Form designers, such as the design application of lowcode-engine-like editable forms, can be used for form design and editing.

In this scheme, the choice of the low-code platform and the form designer is not limited, and the embodiment is specifically chosen by the developer.

Example 1

As shown in fig. 1, in one aspect of the present application, a method for implementing an editable form in a low code platform is provided, including the following steps:

Deploying a form designer in a low code platform;

performing table configuration on each independent form component dragged by a user by using the design state of a designer, and simulating to generate a corresponding first editable table;

rendering the first editable form by using the running state of the designer, rendering the form content in the first editable form into a form component, and generating a second editable form;

And editing the second editable form, and recording and storing historical data of the editing operation.

In the embodiment, in the designer, the form design is divided into a design state and an operation state, which is equivalent to dividing into two sections, and a design state and an operation state separation mode is used

The design state and the running state are rendered by using different components, the design state simulates a table, and the running state is a real table. This separates the design from the operational state.

The principle of implementation of the present solution will be described in detail below with reference to fig. 1.

The first editable form of the present solution mainly refers to a form in a format that is pre-deployed in a design state, and may be used for configuration of form components, but is not rendered. The second editable form is a form rendered in a run state, and the form contents can be displayed.

In the present invention, the editable form is divided into two states, a design state and an operation state. In the design state, the form appearance was simulated using CSS and a presentation of the form component design state. In practice, it consists of multiple independent form components, except that the form style is presented at the interface so that it appears as a complete form. The design mode ensures that operations such as drag and new addition, drag and change sequence of the list in the designer, shortcut key deletion after selection and the like are not unique to common components.

As an optional implementation manner of the application, optionally, using the design state of the designer, each independent form component dragged by the user is subjected to form configuration, and corresponding editable forms are generated through simulation, including:

Determining each required independent form component;

in the design page of the design state, a user drags each independent form component to a first editable form in the design page;

Performing individual component configuration on each individual form component in the first editable form;

after configuration, form adjustment is carried out on each independent form component through the CSS and DOM nodes, and a first editable form with form content is simulated and generated.

First, the user may drag the "form component" into the "editable form". Then, for each specific form component, the corresponding "check", "field", "title" and like data may be configured. The rendering engine then uses this data to simulate a "editable form" with form content, adjusted in the design state by the CSS and DOM nodes. After this, a copy of JSON-formatted data, i.e., JSON configuration, is generated and saved.

Thus, in the design state, each column may be considered a separate form component, which allows manipulation of the form column to be translated into manipulation of a single form component. For example, the attribute of each column can be configured independently, such as title, field attribute name, verification rule, etc., in such a way that the configuration of the columns becomes straightforward, avoiding the lengthy process of clicking on the attribute panel one by one. By directly manipulating the form component, the developer can more intuitively perform configuration and customization of the columns.

Because each column is a separate form component, developers can take advantage of the low code platform. They can quickly adjust and modify the position, width, appearance, etc. of the columns through drag, copy, paste, etc. operations. This visual interaction allows the design and layout of the form to become more efficient and intuitive. The developer can immediately see the change of the form and adjust the form in real time according to the requirement, so that the development efficiency and the user experience are improved.

The invention fully utilizes the advantages of the low-code platform by splitting the editable form into a plurality of independent form components. The developer no longer needs to complete cumbersome configuration in the property panel, but can directly make visual operations and adjustments in the designer. The innovative design mode simplifies the interaction flow, improves the development efficiency, and provides more flexible, visual and efficient form design and customization experience for developers.

As an optional embodiment of the present application, optionally, after the configuration is completed, the form adjustment is performed on each independent form component by using the CSS and DOM nodes, further including:

generating JSON configuration of the first editable form, and storing the JSON configuration into a database of the designer in JSON format data;

Synchronization transmits the JSON configuration of the first editable form to run state.

The running state needs to perform corresponding positioning rendering according to the information of each form component stored in the JSON configuration. In the table editing, an API is required to call a corresponding row list component to realize corresponding row and column rendering.

As an optional embodiment of the present application, optionally, using an operation state of the designer, rendering the first editable form, rendering a form content in the first editable form as a form component, generating the second editable form includes:

And rendering each form component in the first editable form according to the JSON configuration by using the form rendering in the running state, rendering the form content in the form component into a corresponding form component, and generating a second editable form.

In particular, the method comprises the steps of,

As an optional embodiment of the present application, optionally, the running state uses table rendering, according to JSON configuration, to render each form component in the first editable table, to render the table contents in the form component into a corresponding form component, to generate a second editable table, including:

the running state receives the JSON configuration of the first editable form and forwards the JSON configuration to the rendering engine;

the rendering engine analyzes the JSON configuration to obtain the API of each form component in the first editable form;

the APIs of each form component in the first editable form are called in order:

rendering the table columns in the first editable table using the table rendering columns;

Rendering the table rows in the first editable table using the table rendering rows;

Rendering of each form component is completed, and a second editable table with visible contents of each form component is generated.

In the run state, the rendering engine uses this JSON configuration to call the API of the table component to render the table columns. At the same time, the table contents are rendered into a form component.

As an optional embodiment of the present application, optionally, performing an editing operation on the second editable form, recording and saving history data of the editing operation, includes:

Performing data editing operation on the second editable form, and caching operation data to a database;

when the operation is canceled, the operation data cached last time is called and executed, and the original point is returned.

When the new or delete operation occurs, the program will add or delete the table data accordingly. For editing operations, a history of data is first recorded. When editing is finished, the user may choose to click "save" to update the data, or click "cancel" to scroll through the history data.

Through the above operation flow, the user can conveniently perform configuration and editing of the form components, and operation and data management of the editable form.

In the running state, the form components are rendered into real form columns, so that the advantages of the forms are fully utilized, and operations such as adding, deleting and the like on data are included. Each piece of data also has a buffer function, so that the data can be rolled back to the previous state at any time in the editing process, and the integrity and consistency of the data are ensured. The design mode combines the flexibility of the form component and the functionality of the form, and provides more powerful and convenient data management capability for users.

The implementation of the present solution will be described in connection with specific form generation:

as shown in fig. 2, the design is dragged into an "editable form".

After the editable form is dragged in, the page initially renders a title, a middle slot and an adding button at the bottom of the editable form, a form component can be dragged in the slot, and the attribute of the editable form can be configured on a right attribute panel, including the configuration of a header style, a column fixing, a new addition, a deletion, a duplication, an editing, a batch deletion, a dragging ordering, an operation column, a serial number column and the like. The input box is dragged in the editable form and the result is shown in figure 3.

After dragging in, the editable form is one more column, the title of the column is the title of the input box, the content is the input box, after clicking, the input box can be configured, and the configuration is the configuration of the form column in the running state, and then a sliding input bar component is dragged in, so that the result is shown in fig. 4.

The sliding input bar can be configured in the same way, so that the table can be generated into a table column through dragging in a design state, the columns are dragged and sequenced, the corresponding columns are clicked, and attribute configuration is performed.

After clicking the preview, the operation state is entered.

If there is default data, the running state will have default rows, if there is no default data, the "pause data" is displayed, and clicking on "+add" in the lower left corner can add a new table row, as shown in fig. 5.

The current table content shows the structure of the table nested table, thus the editable table is realized, one line of data of the editable table can be added by clicking and adding, thus the characteristic of the editable table is fully utilized, after some data are input, clicking and saving are carried out, and the detail state of the editable table is entered.

The detail state and the table of the editable table are not unique, the current row content can be operated in the table operation column, and the editable table is realized by respectively utilizing the dragging of the table component and the new addition of the table component in a mode of distinguishing the design state from the running state.

It should be apparent to those skilled in the art that implementing all or part of the above-described embodiments may be accomplished by computer programs to instruct related hardware, and the programs may be stored in a computer readable storage medium, which when executed may include the processes of the embodiments of the controls described above. It will be appreciated by those skilled in the art that implementing all or part of the above-described embodiments may be accomplished by computer programs to instruct related hardware, and the programs may be stored in a computer readable storage medium, which when executed may include the processes of the embodiments of the controls described above. The storage medium may be a magnetic disk, an optical disk, a Read-only memory (ROM), a random access memory (RandomAccessMemory, RAM), a flash memory (flash memory), a hard disk (HARDDISKDRIVE, abbreviated as HDD), a Solid state disk (Solid-state STATEDRIVE, SSD), or the like; the storage medium may also comprise a combination of memories of the kind described above.

Example 2

Based on the implementation principle of embodiment 1, in another aspect, the present application proposes an apparatus for implementing the method for implementing an editable form in a low code platform, including:

a deployment module for deploying a form designer in the low code platform;

the design module is used for carrying out table configuration on each independent form component dragged by a user by utilizing the design state of the designer, and simulating to generate a corresponding first editable table;

the operation module is used for rendering the first editable form by utilizing the operation state of the designer, rendering the form content in the first editable form into a form component and generating a second editable form;

and the database is used for editing the second editable form, recording and storing historical data of the editing operation.

The functions and interactions of the above modules are understood in conjunction with the description of embodiment 1, which is not repeated here.

The modules or steps of the invention described above may be implemented in a general-purpose computing device, they may be centralized in a single computing device, or distributed across a network of computing devices, or they may alternatively be implemented in program code executable by a computing device, such that they may be stored in a memory device and executed by a computing device, or they may be separately fabricated into individual integrated circuit modules, or multiple modules or steps within them may be fabricated into a single integrated circuit module. Thus, the present invention is not limited to any specific combination of hardware and software.

Example 3

As shown in fig. 6, in another aspect, the present application further provides an electronic device, including:

A processor;

a memory for storing processor-executable instructions;

Wherein the processor is configured to implement the method of implementing an editable form in a low code platform when executing the executable instructions.

Embodiments of the present disclosure provide for an electronic device that includes a processor and a memory for storing processor-executable instructions. Wherein the processor is configured to implement any of the methods described above to implement an editable form in a low code platform when executing executable instructions.

Here, it should be noted that the number of processors may be one or more. Meanwhile, in the electronic device of the embodiment of the disclosure, an input device and an output device may be further included. The processor, the memory, the input device, and the output device may be connected by a bus, or may be connected by other means, which is not specifically limited herein.

The memory is a computer-readable storage medium that can be used to store software programs, computer-executable programs, and various modules, such as: a program or module corresponding to a method for implementing an editable form in a low code platform is disclosed. The processor executes various functional applications and data processing of the electronic device by running software programs or modules stored in the memory.

The input device may be used to receive an input number or signal. Wherein the signal may be a key signal generated in connection with user settings of the device/terminal/server and function control. The output means may comprise a display device such as a display screen.

The foregoing description of the embodiments of the present disclosure has been presented for purposes of illustration and description, and is not intended to be exhaustive or limited to the embodiments disclosed. Many modifications and variations will be apparent to those of ordinary skill in the art without departing from the scope and spirit of the various embodiments described. The terminology used herein was chosen in order to best explain the principles of the embodiments, the practical application, or the technical improvement of the technology in the marketplace, or to enable others of ordinary skill in the art to understand the embodiments disclosed herein.

Claims (8)

1. A method for implementing an editable form in a low code platform, comprising the steps of:

Deploying a form designer in a low code platform;

performing table configuration on each independent form component dragged by a user by using the design state of a designer, and simulating to generate a corresponding first editable table;

rendering the first editable form by using the running state of the designer, rendering the form content in the first editable form into a form component, and generating a second editable form;

And editing the second editable form, and recording and storing historical data of the editing operation.

2. The method of claim 1, wherein configuring the table for each individual form component dragged by the user using the design state of the designer, and simulating to generate the corresponding editable table comprises:

Determining each required independent form component;

in the design page of the design state, a user drags each independent form component to a first editable form in the design page;

Performing individual component configuration on each individual form component in the first editable form;

after configuration, form adjustment is carried out on each independent form component through the CSS and DOM nodes, and a first editable form with form content is simulated and generated.

3. The method for implementing an editable form in a low code platform according to claim 2, further comprising, after the configuration is completed, after performing form adjustment on each of the independent form components by the CSS and DOM nodes:

generating JSON configuration of the first editable form, and storing the JSON configuration into a database of the designer in JSON format data;

Synchronization transmits the JSON configuration of the first editable form to run state.

4. The method of claim 1, wherein rendering the first editable form using the behavior of the designer, rendering the form content in the first editable form as a form component, generating the second editable form, comprises:

And rendering each form component in the first editable form according to the JSON configuration by using the form rendering in the running state, rendering the form content in the form component into a corresponding form component, and generating a second editable form.

5. The method of claim 4, wherein the running state uses table rendering to render each of the form components in the first editable table according to JSON configuration, to render the table contents in the form components as corresponding form components, to generate the second editable table, comprising:

the running state receives the JSON configuration of the first editable form and forwards the JSON configuration to the rendering engine;

the rendering engine analyzes the JSON configuration to obtain the API of each form component in the first editable form;

the APIs of each form component in the first editable form are called in order:

rendering the table columns in the first editable table using the table rendering columns;

Rendering the table rows in the first editable table using the table rendering rows;

Rendering of each form component is completed, and a second editable table with visible contents of each form component is generated.

6. The method of implementing an editable form in a low code platform according to claim 1, wherein performing an editing operation on the second editable form, recording and saving historical data of the editing operation, comprises:

Performing data editing operation on the second editable form, and caching operation data to a database;

when the operation is canceled, the operation data cached last time is called and executed, and the original point is returned.

7. An apparatus for implementing the method for implementing an editable form in a low code platform as claimed in any one of claims 1 to 6, comprising:

a deployment module for deploying a form designer in the low code platform;

the design module is used for carrying out table configuration on each independent form component dragged by a user by utilizing the design state of the designer, and simulating to generate a corresponding first editable table;

the operation module is used for rendering the first editable form by utilizing the operation state of the designer, rendering the form content in the first editable form into a form component and generating a second editable form;

and the database is used for editing the second editable form, recording and storing historical data of the editing operation.

8. An electronic device, comprising:

A processor;

a memory for storing processor-executable instructions;

Wherein the processor is configured to implement the method of any one of claims 1-6 in a low code platform when executing the executable instructions to implement an editable form.