CN114063869A - Form configuration method and device and electronic equipment - Google Patents

Form configuration method and device and electronic equipment Download PDF

Info

Publication number
CN114063869A
CN114063869A CN202111437901.3A CN202111437901A CN114063869A CN 114063869 A CN114063869 A CN 114063869A CN 202111437901 A CN202111437901 A CN 202111437901A CN 114063869 A CN114063869 A CN 114063869A
Authority
CN
China
Prior art keywords
component
canvas
components
panel
user
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.)
Pending
Application number
CN202111437901.3A
Other languages
Chinese (zh)
Inventor
白秋平
陈俊希
吴帅
庞博
吴观宇
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
China Construction Bank Corp
Original Assignee
China Construction Bank Corp
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by China Construction Bank Corp filed Critical China Construction Bank Corp
Priority to CN202111437901.3A priority Critical patent/CN114063869A/en
Publication of CN114063869A publication Critical patent/CN114063869A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04842—Selection of displayed objects or displayed text elements
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G06F40/186—Templates

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

The embodiment of the application provides a form configuration method and device and electronic equipment, relates to the technical field of form development, and is used for flexibly and quickly creating and releasing forms. The method comprises the following steps: responding to the operation of a user on a display interface of the terminal equipment, and displaying a canvas, a component panel and an attribute panel on the display interface; the canvas is used for creating the form, the component panel is composed of one or more components, any one of the one or more components is used for constructing the table entry in the form, and the attribute panel is used for showing and editing the attribute of the one or more components in the canvas; in response to a user operation to drag one or more components in the component panel, adding the one or more components to the canvas; in response to a user operation to click on a first component of the one or more components in the canvas, a property of the first component is displayed in a properties panel.

Description

Form configuration method and device and electronic equipment
Technical Field
The present application relates to the field of form development technologies, and in particular, to a form configuration method and apparatus, and an electronic device.
Background
At present, form configuration is mainly realized by using background technologies such as network mechanisms (NET), Java and the like and foreground technologies such as Hyper Text Markup Language (Html), JavaScript and the like, and the form creation needs repeated operation every time, so that the process is very complex, the time consumption is long, the maintenance cost is high, and the form cannot be created and modified flexibly and quickly. Moreover, where there are many forms needed in real life, developing a form for each requirement separately would greatly increase the workload and maintenance costs for the workers.
Therefore, the prior art cannot create and publish forms flexibly and quickly and is costly to maintain.
Disclosure of Invention
The embodiment of the application provides a form configuration method, a form configuration device and electronic equipment, which are used for flexibly and quickly creating and publishing a form.
In a first aspect, an embodiment of the present application provides a form configuration method, including:
responding to the operation of a user on a display interface of the terminal equipment, and displaying a canvas, a component panel and a property panel on the display interface; the canvas is used for creating a form, the component panel is composed of one or more components, any one of the one or more components is used for building an item in the form, and the attribute panel is used for showing and editing the attribute of one or more components in the canvas; in response to a user operation dragging the one or more components in the component panel, adding the one or more components to the canvas; in response to a user operation to click on a first component of the one or more components in the canvas, displaying a property of the first component on the properties panel.
Based on the scheme, the form creating method provided by the application can enable a user to flexibly and quickly create and release the form on the terminal equipment only by dragging, and can reduce the maintenance cost.
In one possible implementation, the attributes of the first component include a must-fill-select-fill attribute; the required filling option attribute is used for representing whether the first component is a required item or an option filling item in the form.
Based on the scheme, more possibilities can be provided for the creation of the form by setting the required filling and selecting properties of the components.
In one possible implementation, the component panel includes a second component; the second component is used for constructing a list item needing to be added with pictures in the form; the attributes of the second component comprise upload attributes; and the uploading attribute is used for limiting the pictures added in the list item.
Based on the scheme, the images added in the list items can be limited by setting the uploading attribute for the list items needing to be added with the images in the list items, so that the requirements of users are met.
In one possible implementation manner, the display interface further includes an operation bar; the operation bar comprises a preview button; and responding to the operation of clicking the preview button by the user, and displaying the state of the form when the form is issued on a display interface.
Based on the scheme, the user can experience the attributes of all the components in the form during release through the preview function, so that the user can adjust the form at any time according to requirements, and the user experience can be improved to a certain extent.
In one possible implementation manner, the display interface further includes an operation bar; the operation bar also comprises a template analysis input box and a template analysis button; and responding to the operation that a user inputs a text in a JS object numbered musical notation json format in a template analysis input box and clicks the template analysis button, and displaying a form template corresponding to the text in the json format in the canvas.
Based on the scheme, the user can modify the existing form template through the template analysis function, so that the workload of the user can be reduced to a great extent.
In one possible implementation manner, the display interface further includes an operation bar; the operation bar further comprises a save button; responding to the operation of clicking the save button by a user, and generating a json format text containing the form and the attributes of all the components in the form; and uploading the built forms in the canvas and the attributes of all the components in the forms to a server.
Based on the scheme, the user uploads the created form to the server through the storage button, so that the form can be modified on a plurality of terminal devices, and the user experience can be improved.
One possible implementation manner, wherein adding the one or more components to the canvas in response to an operation of dragging the one or more components in the component panel by a user specifically includes: when no component is added to the canvas, adding a third component of the one or more components in the component panel to a specified position in the canvas in response to a user operation of dragging the third component; when at least one component has been added to the canvas, adding a fourth component of the one or more components in the component panel to a location of a mouse drag in response to a user operation to drag the fourth component.
Based on the scheme, the components are added to the position where the mouse is dragged, so that a user can create the form more conveniently and rapidly.
In one possible implementation, when the canvas is not large enough to display the one or more components, the canvas is extended until the canvas is large enough to display the one or more components.
Based on the scheme, the requirement of a user for making a large-size form can be met by extending the canvas, and the user experience is improved.
One possible implementation manner, after the adding the one or more components into the canvas in response to the operation of dragging the one or more components in the component panel by the user, further includes: selecting the one or more components added to the canvas; displaying the properties of the selected one or more components on the property panel.
Based on the scheme, the user can directly modify the attribute of the component added into the canvas conveniently without clicking and other operations. The user can create various forms meeting the requirements of the user's own affairs by modifying the attributes of each component.
In a second aspect, an embodiment of the present application provides a form configuration apparatus, including:
a display unit configured to display a display interface of the terminal device;
a processing unit configured to perform the following operations:
responding to the operation of a user on a display interface of the terminal equipment, and displaying a canvas, a component panel and a property panel on the display interface; the canvas is used for creating a form, the component panel is composed of one or more components, any one of the one or more components is used for building an item in the form, and the attribute panel is used for showing and editing the attribute of one or more components in the canvas; in response to a user operation dragging the one or more components in the component panel, adding the one or more components to the canvas; in response to a user operation to click on a first component of the one or more components in the canvas, displaying a property of the first component on the properties panel.
In one possible implementation, the attributes of the first component include a must-fill-select-fill attribute; the required filling option attribute is used for representing whether the first component is a required item or an option filling item in the form.
In one possible implementation, the component panel includes a second component; the second component is used for constructing a list item needing to be added with pictures in the form; the attributes of the second component comprise upload attributes; and the uploading attribute is used for limiting the pictures added in the list item.
In one possible implementation manner, the display interface further includes an operation bar; the operation bar comprises a preview button; the processing unit is configured to: and responding to the operation of clicking the preview button by the user, and displaying the state of the form when the form is issued on a display interface.
In one possible implementation manner, the display interface further includes an operation bar; the operation bar also comprises a template analysis input box and a template analysis button; the processing unit is further configured to: and responding to the operation that a user inputs a text in a JS object numbered musical notation json format in a template analysis input box and clicks the template analysis button, and displaying a form template corresponding to the text in the json format in the canvas.
In one possible implementation manner, the display interface further includes an operation bar; the operation bar further comprises a save button; the processing unit is further configured to: responding to the operation of clicking the save button by a user, and generating a json format text containing the form and the attributes of all the components in the form; and uploading the built forms in the canvas and the attributes of all the components in the forms to a server.
In one possible implementation, the processing unit, in response to a user operation dragging the one or more components in the component panel, is specifically configured to add the one or more components to the canvas by: when no component is added to the canvas, adding a third component of the one or more components in the component panel to a specified position in the canvas in response to a user operation of dragging the third component; when at least one component has been added to the canvas, adding a fourth component of the one or more components in the component panel to a location of a mouse drag in response to a user operation to drag the fourth component.
In one possible implementation, the processing unit is further configured to: when the canvas is not large enough to display the one or more components, the canvas is extended until the canvas is large enough to display the one or more components.
In one possible implementation, the processing unit, in response to a user dragging the one or more components in the component panel, after adding the one or more components to the canvas, is further configured to: selecting the one or more components added to the canvas; displaying the properties of the selected one or more components on the property panel.
In a third aspect, an embodiment of the present application provides an electronic device, including:
a memory for storing computer instructions;
a processor coupled to the memory for executing the computer instructions in the memory and when executing the computer instructions implementing the method of any of the first aspects.
In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, including:
the computer readable storage medium stores computer instructions which, when executed on a computer, cause the computer to perform the method of any of the first aspects.
In a fifth aspect, an embodiment of the present application provides a computer program product for a computer, including: software code portions for performing the method according to any one of the first aspect when said product is run on said computer.
A possible implementation is that the computer program product comprises a computer-readable medium on which the software code portions are stored and/or that the computer program product is directly loadable into an internal memory of the computer and/or transmittable via a network by at least one of an upload procedure, a download procedure and a push procedure.
For each of the second aspect to the fifth aspect and possible technical effects of each aspect, please refer to the above description of the possible technical effects of the first aspect or various possible schemes of the first aspect, and no repeated description is given here.
Drawings
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings used in the description of the embodiments will be briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present application.
FIG. 1 is a system diagram illustrating the application of the form configuration method provided herein;
fig. 2 is an exemplary flowchart of a form configuration method according to an embodiment of the present application;
fig. 3A is a schematic view of a display interface provided in an embodiment of the present application;
fig. 3B is a schematic view of a display interface provided in an embodiment of the present application;
FIG. 4A is a schematic diagram of a component dragging process provided by an embodiment of the present application;
FIG. 4B is a schematic diagram illustrating component position shifting provided by an embodiment of the present application;
fig. 5A is a schematic view of a display interface provided in an embodiment of the present application;
fig. 5B is a schematic view of a display interface provided in an embodiment of the present application;
fig. 5C is a schematic view of a display interface provided in the embodiment of the present application;
fig. 6 is a schematic diagram of a start page of a terminal device according to an embodiment of the present application;
FIG. 7 is a schematic view of an apparatus according to an embodiment of the present disclosure;
fig. 8 is a schematic structural diagram of an electronic device according to an embodiment of the present application.
Detailed Description
In order to facilitate understanding of technical solutions provided by the embodiments of the present application, terms of art related to the embodiments of the present application are described below.
(1) The form is mainly responsible for data acquisition functions in the webpage. A form has three basic components: form label: included are Uniform Resource Locators (URLs) for Common Gateway Interface (CGI) programs used to process form data and methods for submitting data to a server. Form field: including text boxes, password boxes, hidden fields, multi-line text boxes, check boxes, radio boxes, drop-down selection boxes, file upload boxes, and the like. Form button: comprises a submit button, a reset button and a general button; the CGI script used to transfer data to the server or cancel the input, and the form button can also be used to control other processing tasks that define the processing script.
(2) Vue, is a set of progressive frameworks for building user interfaces. Unlike other large frames, Vue is designed to be applied layer by layer from the bottom up. Vue, the core library focuses only on the viewing layer for easy integration with third party libraries or existing projects. On the other hand, Vue is also fully capable of providing drivers for complex single page applications when used in conjunction with modern tool chains and various supporting class libraries.
(3) element-ui, a set of Vue-based desktop component libraries for developers, designers, and product managers.
In order to make the objects, technical solutions and advantages of the embodiments of the present application clearer, the technical solutions of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are some embodiments, but not all embodiments, of the technical solutions of the present application. All other embodiments obtained by a person skilled in the art without any inventive step based on the embodiments described in the present application are within the scope of the protection of the present application.
The terms "first" and "second" in the embodiments of the present application are used to distinguish different objects, not to describe a specific order. Furthermore, the term "comprises" and any variations thereof, which are intended to cover non-exclusive protection. For example, a process, method, system, article, or apparatus that comprises a list of steps or elements is not limited to only those steps or elements listed, but may alternatively include other steps or elements not listed, or inherent to such process, method, article, or apparatus. The "plurality" in the present application may mean at least two, for example, two, three or more, and the embodiments of the present application are not limited.
In addition, the term "and/or" herein is only one kind of association relationship describing an associated object, and means that there may be three kinds of relationships, for example, a and/or B, which may mean: a exists alone, A and B exist simultaneously, and B exists alone. In addition, the character "/" in this document generally indicates that the preceding and following related objects are in an "or" relationship unless otherwise specified.
At present, form configuration is mainly realized by using background technologies such as network mechanisms (NET), Java and the like and foreground technologies such as Hyper Text Markup Language (Html), JavaScript and the like, and the form creation needs repeated operation every time, so that the process is very complex, the time consumption is long, the maintenance cost is high, and the form cannot be created and modified flexibly and quickly.
In view of the above, the present application provides a form configuration method, in which a terminal device constructs each entry of a form by responding to an operation of a user dragging a component in a component panel, and the terminal device may further configure each entry of the form by responding to an operation of the user editing one or more attributes of the component in a attribute panel. Thereby realizing flexible and quick form creation and release.
Referring to fig. 1, a system diagram of a form configuration method application provided by the present application is shown. The system 100 includes: a terminal device 101 and a server 102. The terminal device 101 may be a tablet computer, a computer, or a smart phone. The terminal device 101 is used for responding to operations of a user dragging a component in the component panel to the canvas to construct an item of the form, and operations of the user clicking the component in the canvas and editing a component attribute in the attribute panel. Server 102 is used to save user-created forms.
Referring to fig. 2, an exemplary flowchart of a form configuration method provided in an embodiment of the present application may include the following processes:
s201, the terminal device responds to the operation of the user on the display interface of the terminal device, and displays the canvas, the component panel and the attribute panel on the display interface.
The canvas is used for creating the form, the component panel is composed of one or more components, any one of the one or more components is used for building entries in the form, and the attribute panel is used for showing and editing attributes of the one or more components in the canvas.
In one possible implementation, the display interface may further include an operation bar. The operation bar may include a save button, a preview button, a template analysis input box, and a template analysis button. The saving button is used for uploading the created form to the server, the preview button is used for displaying the state of the form when the form is issued, and the template analysis input box and the template analysis button are used for inputting the existing JS Object Notation (JavaScript Object Notation, json) format text and displaying the form template corresponding to the input json format text.
Fig. 3A is a schematic view of a display interface provided in the embodiment of the present application. As shown in the figure, the display interface of the terminal device can be divided into four parts, including: a component panel 301, a canvas 302, a properties panel 303, and an operations bar 304. The component panel 301 is used to provide a component for constructing entries in a form, where the component panel includes n components, and n is an integer greater than or equal to 1. The canvas 302 is used to create forms. The property panel 303 is used for displaying and editing properties of one or more selected components in the canvas, and may include m properties of 1 selected component or m properties of a plurality of selected components, where m is an integer greater than or equal to 1. The properties displayed by the properties panel shown in the figure are the m properties of component 1 in the canvas. The operation bar 304 is used for providing the user with functions of saving, previewing and template analysis of the form, and may include a save button, a preview button, a template analysis button and a template analysis input box.
For example, where the entries in the form include the name of the form writer, the gender of the form writer, the age of the form writer, and the photo of the form writer, the component panel may include a single line text box, radio buttons, a picture upload component, and a submit button, through which the user may create the form including the name of the form writer, the gender of the form writer, the age of the form writer, and the photo entry of the form writer. The entries in the form may include an initial value of the component, a name of the component, a position of the component in the form, a style of the component, a limited input word number of the component, a picture uploading attribute, and a required padding attribute of the component. And the terminal equipment responds to the operation that the user clicks any one of one or more components in the canvas, and correspondingly shows the corresponding relation between the component and the attribute in the attribute panel. Fig. 3B is a schematic view of a display interface provided in the embodiment of the present application. The terminal device, in response to the user clicking on a single line of text box components in the canvas 302, displays a single line of all the attributes of the text box components in the attribute panel 303, including the initial value of the component, the name of the component, the position of the component in the form, the style of the component, the limited input word count of the component, and the required padding attributes of the component.
It should be understood that the attribute panel may also show the corresponding relationship between the table entry, the component and the attribute, or the attribute panel may also show the corresponding relationship between the component and the attribute, which is not specifically limited in this application.
S202, the terminal device responds to the operation that the user drags one or more components in the component panel, and one or more components are added to the canvas.
The user can finish displaying corresponding items in the canvas by only adding one or more components required by the form into the canvas from the component panel in a dragging mode. Components may include, but are not limited to, single line text boxes, password boxes, check boxes, radio buttons, and submit buttons, among others.
In one possible implementation, when no component is added to the canvas, the terminal device adds a third component to a designated position in the canvas in response to a user operation of dragging the third component among the one or more components in the component panel. In one possible scenario, the specified location may be the first location in the canvas where a component may be placed. For example, the canvas may be divided into a row a and a column b, where a and b are integers greater than or equal to 1, and the first position may refer to the position of the first column on the row 1 of the canvas. In another possible case, the designated position may also be a position in the center of the canvas, which is not limited in this application.
Another possible implementation manner is that when at least one component is added in the canvas, the terminal device responds to the operation of dragging a fourth component in one or more components in the component panel by a user, and the fourth component is added to the position dragged by the mouse. That is to say, when at least one component exists in the canvas, the user can place the component at any position in the canvas according to the requirement of the user. Fig. 4A is a schematic diagram of a component dragging process provided in the embodiment of the present application. In the case where component 2 has been added to the canvas 402, the terminal device may add component 1 to the location of the mouse drag, that is, the location of the component panel 401 indicated by the dotted line in the canvas 402, in response to the user's operation of clicking and dragging component 1 in the component panel 401.
When at least one component is added to the canvas, the terminal device can also delete or copy a first component in the canvas in response to a user right mouse click on the first component in the one or more components in the canvas.
The terminal device can also move a position of a first component of the one or more components in the canvas in response to a user dragging the first component. Fig. 4B is a schematic diagram of the position movement of the components according to the embodiment of the present application. The terminal device can move the component 1 from the home position to the mouse drag position, that is, move the component from the position of the solid line component 1 to the position of the dotted line component 1, in response to an operation of dragging the component 1 in the canvas 402 by the user.
For example, assuming that the user wants to create a form containing the name of the form writer, the gender of the form writer, the age of the form writer, and the photo entries of the form writer, the user may drag two single-line text box components in the component panel to create the name of the form writer and the age entries of the form writer, drag two radio button components from the component panel to create the gender entries of the form writer, and drag a photo upload component from the component panel to create the photo of the form writer. It should be understood that the dragging sequence of the components can be selected by the user, and the application is not limited thereto.
In one possible implementation, the components in the component panel may further include a form template component pre-configured at the terminal device. The user can drag the form template component into the canvas to complete the creation of the form, or can add and delete the table entries in the form template component and edit the attributes of the table entries after dragging the form template component into the canvas to complete the creation of the form. Optionally, the form template component may be built using an element-ui component library.
Based on the scheme, the user can quickly and conveniently complete the form creation by utilizing the form template component preset by the terminal equipment.
S203, the terminal device responds to the operation that the user clicks a first component in the one or more components in the canvas, and the attribute of the first component is displayed on the attribute panel.
The user may edit the properties of the first component at the properties panel to edit the form. Alternatively, the attribute may be an initial value of the component, a name of the component, a position of the component in the form, a style of the component, a limited input word count of the component, and a must-fill attribute of the component. And the required filling and selecting attribute is used for indicating whether the component is a required item or a selected filling item in the form.
The terminal equipment responds to the operation that a user clicks a first component in one or more components in the canvas, when all attributes of the first component are displayed in the attribute panel, the terminal equipment extracts data in the canvas array and transmits the data to the component panel, and the component panel transmits the attributes of the components to the attribute panel uniformly to be displayed.
In one possible implementation manner, when the component clicked by the user is a second component in the canvas for constructing an entry of the form that needs to be added with the picture, the attribute of the second component displayed by the attribute panel may include an upload attribute. The second component may be a picture uploading component, and the uploading attribute is used to limit the attribute of the picture added in the entry. For example, may be an attribute for limiting the size of the uploaded picture, the format of the uploaded picture, and/or the size of the uploaded picture. That is to say, when the user clicks the picture uploading component in the canvas, the attribute displayed by the attribute panel may include the size of the uploaded picture, and the format of the uploaded picture, and the user may set the attribute according to the form requirement. For example, the size of the uploaded picture needs to be less than or equal to 100kb, the size of the uploaded picture needs to be equal to 800 × 800, and the format of the uploaded picture needs to be in a jpg format.
The terminal device can be further configured to select one or more components by default after the one or more components are added into the canvas in response to a user operation of dragging the one or more components in the component panel, and display the attributes of the one or more components in the attribute panel.
Based on the scheme, the user can directly modify the attribute of the component added into the canvas conveniently without clicking and other operations. The user can create various forms meeting the requirements of the user's own affairs by modifying the attributes of each component.
When the user does not click on a component in the canvas, the properties panel does not display any properties. Fig. 5A is a schematic view of a display interface provided in an embodiment of the present application. The component panel 501 includes four components: component 1, component 2, component 3, and component 4, the form shown in the canvas 502 is a form that is created from component 1, component 2, component 3, and component 4. As shown in the property pane 503, when the user does not click on a component in the canvas, the property pane 503 does not display any properties.
When editing the property of the component, the user can edit the property by inputting, for example, the initial value of the component and the name of the component. Some property users may select among the options presented to edit, for example, the must-fill property of a component by pulling down the selection box. Referring to fig. 5B, which is one of the schematic display interfaces provided in the embodiment of the present application, as shown in the figure, component 1 in the canvas 502 is selected, and the initial value, the name and the state before editing the must-fill property of component 1 are displayed on the property panel 503. The user can edit the attribute in the text box behind the initial value and the name, and the user can select whether the component is the filling component or the filling component by clicking a drop-down button of the triangle after the filling of the filling attribute.
Referring to fig. 5C, a schematic diagram of a display interface provided in the embodiment of the present application, assuming that the initial value of the component 1 is 000, the name is 111, and the component 1 is a padding component, the initial value, the name, and the edited state of the padding property of the component 1 are displayed on the property panel 503 as shown in the figure.
The user can complete the creation of the form by adding all the required components of the form to the canvas and editing the properties of the components in the canvas.
When the size of the canvas is not enough to display all the components in the canvas, the terminal device can extend the canvas until the size of the canvas is enough to display all the components in the canvas. Alternatively, the canvas may be extended to just display all of the components in the canvas. For example, assume that the initial canvas size is 18.2cm by 25.7 cm. And after the user adds a plurality of components, the width of the form in the canvas is 20cm and the length is 25 cm. The size of the canvas will extend to 20cm by 25.7 cm. The canvas may also be extendable to some fixed size that may display all of the components in the canvas. For example, assume that the initial canvas size is 18.2cm by 25.7 cm. After the user adds a number of components, the form in the canvas is 20cm wide and 25cm long. The size of the canvas will extend to 21cm 29.7 cm. That is, when the width of the form in the canvas is greater than the initial canvas width but less than the fixed-size width, and the length of the form in the canvas is greater than the initial canvas length but less than the fixed-size length, then the canvas is extended to this fixed size. The extending mode of the canvas is not limited in the application.
In one possible scenario, the initial value of the canvas size may be set by the user, for example, the terminal device gives a plurality of possible canvas sizes, and the user sets the initial value of the canvas by selecting an appropriate canvas size from the plurality of possible canvas sizes. For example, the terminal device may give the canvas possible sizes of a4(21cm × 29.7cm), B5(18.8cm × 25.7cm) and A3(29.3cm × 42cm), and the user may select any one of the three sizes as the initial value of the canvas size. In another possible case, the initial value of the canvas size may be set by the user by inputting the initial length and width of the canvas.
After the form is created in the canvas by the user, the form can be uploaded to the server through the storage function provided by the terminal equipment, and the form can be viewed by a plurality of terminal equipment at the same time. For example, when the user completes the form creation at the terminal device of the computer and stores the form to the server, the user can view the form at the terminal device of the smart phone at the same time.
Specifically, the terminal device responds to an operation of clicking a save button in the operation field by a user, saves a form created by the user in the canvas and attributes of all components in the form in the server, and can also generate a text in a json format corresponding to the form, wherein the text contains the attributes of the form and all components in the form.
The terminal device may also provide a preview function for the user. Specifically, the terminal device displays the state of the form at the time of issuance on the display interface in response to an operation of the user clicking a preview button in the operation bar. Optionally, in the preview state, the user may fill in the form, but may not submit the filled data, so as to experience the attributes of each component in the form during release, so that the user can adjust the form at any time according to the requirement, and meanwhile, the user misoperation can be avoided, and the user experience can be improved to a certain extent.
The terminal equipment can also provide template analysis function for the user. Specifically, the terminal device responds to the operation that a user inputs a json format text in a template analysis input box and clicks the template analysis button, and displays a form template corresponding to the json format text in a canvas. Optionally, the user may edit the form template to generate a new form.
In a possible implementation manner, before the display interface displays the canvas, the component panel, the attribute panel and the operation bar, the user can open the terminal device on the terminal device to create or edit the form. Fig. 6 is a schematic diagram of a start page of a terminal device according to an embodiment of the present application. The start page includes: an add button 601, a modify button 602, a delete button 603, and a form list 604. Where the form list 604 may include k created forms, k being an integer greater than or equal to 1. It should be appreciated that if the user has not created a form, the list of forms is blank, i.e., no forms are displayed. The terminal device may display an interface as shown in fig. 3A on the display interface in response to an operation of clicking the add button 601 by the user. The terminal device may also select a first form in response to a user clicking on any first form in the form list 604, and then display the interface shown in fig. 3A on the display interface and the first form in the canvas in response to a user clicking on the modify button 602. The terminal device may also select a second form in response to a user clicking on any second form in the form list 604, and then delete the second form in the form list 604 in response to a user clicking on the delete button 603.
In a possible embodiment, the terminal device is developed through a front end framework, and optionally, the terminal device may be developed based on the front end framework Angular, fact or Vue. In the embodiment of the present application, the terminal device is developed by taking Vue as a framework. By utilizing the characteristic of Vue responsive data binding, the terminal device declares the data binding relationship through the v-model attribute of the input tag in Vue in advance, and when the attribute of the component in the canvas is edited by the user at the attribute panel, that is, when the data of the component changes, the data with the binding relationship and the content of the display interface can be synchronously changed.
The component components in Vue can be used in the canvas design to realize that when a user adds one or more components in the component panel to the canvas, the form of the one or more components in the component panel is maintained, and the performance problem of the terminal device caused by repeated rendering can be avoided.
Based on the same concept of the above method, referring to fig. 7 for a form configuration apparatus 700 provided in the embodiment of the present application, the apparatus 700 can perform the steps of the above method, and in order to avoid repetition, the details are not described here. The apparatus 700 comprises a display unit 701 and a processing unit 702.
In one scenario:
a display unit 701 configured to display a display interface of the terminal device;
a processing unit 702 configured to perform the following processing:
responding to the operation of a user on a display interface of the terminal equipment, and displaying a canvas, a component panel and a property panel on the display interface; the canvas is used for creating a form, the component panel is composed of one or more components, any one of the one or more components is used for building an item in the form, and the attribute panel is used for showing and editing the attribute of one or more components in the canvas; in response to a user operation dragging the one or more components in the component panel, adding the one or more components to the canvas; in response to a user operation to click on a first component of the one or more components in the canvas, displaying a property of the first component on the properties panel.
In one possible implementation, the attributes of the first component include a must-fill-select-fill attribute; the required filling option attribute is used for representing whether the first component is a required item or an option filling item in the form.
In one possible implementation, the component panel includes a second component; the second component is used for constructing a list item needing to be added with pictures in the form; the attributes of the second component comprise upload attributes; and the uploading attribute is used for limiting the pictures added in the list item.
In one possible implementation manner, the display interface further includes an operation bar; the operation bar comprises a preview button; the processing unit is further configured to: and responding to the operation of clicking the preview button by the user, and displaying the state of the form when the form is issued on a display interface.
In one possible implementation manner, the display interface further includes an operation bar; the operation bar also comprises a template analysis input box and a template analysis button; the processing unit is further configured to: and responding to the operation that a user inputs a text in a JS object numbered musical notation json format in a template analysis input box and clicks the template analysis button, and displaying a form template corresponding to the text in the json format in the canvas.
In one possible implementation manner, the display interface further includes an operation bar; the operation bar further comprises a save button; the processing unit is further configured to: responding to the operation of clicking the save button by a user, and generating a json format text containing the form and the attributes of all the components in the form; and uploading the built forms in the canvas and the attributes of all the components in the forms to a server.
In one possible implementation, the processing unit, in response to a user dragging the one or more components in the component panel, adds the one or more components to the canvas, and is specifically configured to: when no component is added to the canvas, adding a third component of the one or more components in the component panel to a specified position in the canvas in response to a user operation of dragging the third component; when at least one component has been added to the canvas, adding a fourth component of the one or more components in the component panel to a location of a mouse drag in response to a user operation to drag the fourth component.
In one possible implementation, the processing unit is further configured to: when the canvas is not large enough to display the one or more components, the canvas is extended until the canvas is large enough to display the one or more components.
In one possible implementation, the processing unit, in response to a user dragging the one or more components in the component panel, after adding the one or more components to the canvas, is further configured to: selecting the one or more components added to the canvas; displaying the properties of the selected one or more components on the property panel.
Based on the same concept of the above method, referring to fig. 8, an electronic device is provided for the embodiment of the present application, and the electronic device includes a processor 801 and a memory 802. A memory 802 for storing computer instructions, and a processor 801 coupled to the memory for executing the computer instructions in the memory and implementing the steps of any of the methods described above when executing the computer instructions.
Embodiments of the present application also provide a computer-readable storage medium having stored thereon computer instructions, which, when executed on a computer, cause the computer to perform the steps of any of the above-mentioned methods.
Those of ordinary skill in the art will understand that: all or a portion of the steps of implementing the above-described method embodiments may be performed by hardware associated with program instructions. The program may be stored in a computer-readable storage medium. When executed, the program performs steps comprising the method embodiments described above; and the aforementioned storage medium includes: various media that can store program codes, such as ROM, RAM, magnetic or optical disks.
While specific embodiments of the present application have been described above, it will be appreciated by those skilled in the art that these are by way of example only, and that the scope of the present application is defined by the appended claims. Various changes and modifications to these embodiments may be made by those skilled in the art without departing from the spirit and principles of this application, and these changes and modifications are intended to be included within the scope of this application. While the preferred embodiments of the present application have been described, additional variations and modifications in those embodiments may occur to those skilled in the art once they learn of the basic inventive concepts. Therefore, it is intended that the appended claims be interpreted as including preferred embodiments and all alterations and modifications as fall within the scope of the application.
It will be apparent to those skilled in the art that various changes and modifications may be made in the present application without departing from the scope of the application. Thus, if such modifications and variations of the present application fall within the scope of the claims of the present application and their equivalents, the present application is intended to include such modifications and variations as well.

Claims (22)

1. A form configuration method, comprising:
responding to the operation of a user on a display interface of the terminal equipment, and displaying a canvas, a component panel and a property panel on the display interface; the canvas is used for creating a form, the component panel is composed of one or more components, any one of the one or more components is used for building an item in the form, and the attribute panel is used for showing and editing the attribute of one or more components in the canvas;
in response to a user operation dragging the one or more components in the component panel, adding the one or more components to the canvas;
in response to a user operation to click on a first component of the one or more components in the canvas, displaying a property of the first component on the properties panel.
2. The method of claim 1, comprising:
the attributes of the first component comprise a must-fill-select-fill attribute; the required filling option attribute is used for representing whether the first component is a required item or an option filling item in the form.
3. The method of claim 1, comprising:
the component panel includes a second component; the second component is used for constructing a list item needing to be added with pictures in the form;
the attributes of the second component comprise upload attributes; and the uploading attribute is used for limiting the pictures added in the list item.
4. The method of claim 1, wherein the display interface further comprises an operation bar; the operation bar comprises a preview button;
and responding to the operation of clicking the preview button by the user, and displaying the state of the form when the form is issued on a display interface.
5. The method of claim 1, wherein the display interface further comprises an operation bar; the operation bar also comprises a template analysis input box and a template analysis button;
and responding to the operation that a user inputs a text in a JS object numbered musical notation json format in a template analysis input box and clicks the template analysis button, and displaying a form template corresponding to the text in the json format in the canvas.
6. The method of claim 1, wherein the display interface further comprises an operation bar; the operation bar further comprises a save button;
responding to the operation of clicking the save button by a user, and generating a json format text containing the form and the attributes of all the components in the form;
and uploading the built forms in the canvas and the attributes of all the components in the forms to a server.
7. The method of claim 1, wherein the adding the one or more components to the canvas in response to the user dragging the one or more components in the component panel comprises:
when no component is added to the canvas, adding a third component of the one or more components in the component panel to a specified position in the canvas in response to a user operation of dragging the third component;
when at least one component has been added to the canvas, adding a fourth component of the one or more components in the component panel to a location of a mouse drag in response to a user operation to drag the fourth component.
8. The method of claim 1, further comprising:
when the canvas is not large enough to display the one or more components, the canvas is extended until the canvas is large enough to display the one or more components.
9. The method of claim 1, wherein after adding the one or more components to the canvas in response to the user dragging the one or more components in the component panel, further comprising:
selecting the one or more components added to the canvas;
displaying the properties of the selected one or more components on the property panel.
10. A form arrangement apparatus, comprising:
a display unit configured to display a display interface of the terminal device;
a processing unit configured to perform the following operations:
responding to the operation of a user on a display interface of the terminal equipment, and displaying a canvas, a component panel and a property panel on the display interface; the canvas is used for creating a form, the component panel is composed of one or more components, any one of the one or more components is used for building an item in the form, and the attribute panel is used for showing and editing the attribute of one or more components in the canvas;
in response to a user operation dragging the one or more components in the component panel, adding the one or more components to the canvas;
in response to a user operation to click on a first component of the one or more components in the canvas, displaying a property of the first component on the properties panel.
11. The apparatus of claim 10, wherein the attributes of the first component comprise a must-fill attribute; the required filling option attribute is used for representing whether the first component is a required item or an option filling item in the form.
12. The apparatus of claim 10, wherein the component panel comprises a second component; the second component is used for constructing a list item needing to be added with pictures in the form;
the attributes of the second component comprise upload attributes; and the uploading attribute is used for limiting the pictures added in the list item.
13. The apparatus of claim 10, wherein the display interface further comprises an operation bar; the operation bar comprises a preview button;
the processing unit is further configured to: and responding to the operation of clicking the preview button by the user, and displaying the state of the form when the form is issued on a display interface.
14. The apparatus of claim 10, wherein the display interface further comprises an operation bar; the operation bar also comprises a template analysis input box and a template analysis button;
the processing unit is further configured to: and responding to the operation that a user inputs a text in a JS object numbered musical notation json format in a template analysis input box and clicks the template analysis button, and displaying a form template corresponding to the text in the json format in the canvas.
15. The apparatus of claim 10, wherein the display interface further comprises an operation bar; the operation bar further comprises a save button;
the processing unit is further configured to:
responding to the operation of clicking the save button by a user, and generating a json format text containing the form and the attributes of all the components in the form;
and uploading the built forms in the canvas and the attributes of all the components in the forms to a server.
16. The apparatus of claim 10, wherein the processing unit, in response to a user operation to drag the one or more components in the component panel, is to add the one or more components to the canvas, and is specifically configured to:
when no component is added to the canvas, adding a third component of the one or more components in the component panel to a specified position in the canvas in response to a user operation of dragging the third component;
when at least one component has been added to the canvas, adding a fourth component of the one or more components in the component panel to a location of a mouse drag in response to a user operation to drag the fourth component.
17. The apparatus of claim 10, wherein the processing unit is further configured to:
when the canvas is not large enough to display the one or more components, the canvas is extended until the canvas is large enough to display the one or more components.
18. The apparatus of claim 10, wherein the processing unit, in response to a user operation to drag the one or more components in the component panel, after adding the one or more components to the canvas, is further configured to:
selecting the one or more components added to the canvas;
displaying the properties of the selected one or more components on the property panel.
19. An electronic device, comprising:
a memory for storing computer instructions;
a processor coupled to the memory for executing the computer instructions in the memory and when executing the computer instructions implementing the method of any of claims 1 to 9.
20. A computer-readable storage medium, characterized in that,
the computer readable storage medium stores computer instructions which, when executed on a computer, cause the computer to perform the method of any of claims 1 to 9.
21. A computer program product for a computer, comprising: software code portions for performing the method according to any one of claims 1 to 9 when said product is run on said computer.
22. The computer program product of claim 21, wherein,
the computer program product comprises a computer-readable medium having stored thereon the software code portions, and/or,
the computer program product is directly loadable into an internal memory of the computer and/or transmittable via a network by means of at least one of an upload procedure, a download procedure and a push procedure.
CN202111437901.3A 2021-11-30 2021-11-30 Form configuration method and device and electronic equipment Pending CN114063869A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111437901.3A CN114063869A (en) 2021-11-30 2021-11-30 Form configuration method and device and electronic equipment

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111437901.3A CN114063869A (en) 2021-11-30 2021-11-30 Form configuration method and device and electronic equipment

Publications (1)

Publication Number Publication Date
CN114063869A true CN114063869A (en) 2022-02-18

Family

ID=80277226

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111437901.3A Pending CN114063869A (en) 2021-11-30 2021-11-30 Form configuration method and device and electronic equipment

Country Status (1)

Country Link
CN (1) CN114063869A (en)

Similar Documents

Publication Publication Date Title
US11048484B2 (en) Automated responsive grid-based layout design system
CN104932889B (en) Page visualized generation method and device
US11790158B1 (en) System and method for using a dynamic webpage editor
US9971749B2 (en) Editor for website and website menu
CN104239305B (en) Generate and show the method and device of electronic document
JP2022534214A (en) Systems and methods for providing responsive editing and viewing that integrate hierarchical fluid components and dynamic layouts
US20100037168A1 (en) Systems and methods for webpage design
US9612715B2 (en) Real-time preview of uniform resource identifier addressable dynamic content
US9772978B2 (en) Touch input visualizations based on user interface context
CN101809573A (en) Updating content display based on cursor position
Reid jQuery Mobile
KR101760777B1 (en) System of Building Responsive Website And Method there-of
WO2013108139A2 (en) Designing website user controls
US10410606B2 (en) Rendering graphical assets on electronic devices
CN103412748A (en) Display control method, device and system for user interface of embedded platform
CN113688341A (en) Dynamic picture decomposition method and device, electronic equipment and readable storage medium
JP5303534B2 (en) Appearance information processing apparatus and method
CN113094144A (en) Display screen interface control method and electronic equipment
CN113676677B (en) Dynamic picture synthesis method and device, electronic equipment and readable storage medium
CN114063869A (en) Form configuration method and device and electronic equipment
JP7381900B2 (en) Information processing system, its control method and program
CN109804372B (en) Emphasizing image portions in a presentation
Hadlock jQuery Mobile: Develop and design
CN117149109A (en) Printing method, apparatus, computer device, and storage medium
EP3526685A1 (en) Emphasizing on image portions in presentations

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