Mobile terminal form dynamic generation method and system

Abstract

The invention belongs to the technical field of user interface implementation, and particularly relates to a mobile terminal form dynamic generation method and system. The method comprises the following steps: adding a form container in a layout file of a form interface of a mobile terminal; the mobile terminal obtains item information corresponding to the form to be generated currently and sends the item information to the back end, form structure data determined by the back end according to the item information corresponding to the form to be generated currently are received, then the form structure data are analyzed, and form components needed by the form to be generated currently are obtained; the form structure data comprises component types, component quantity and component names; adding form components required by a current form to be generated into the form container item by item, and generating a form to be filled in; the form component is obtained by counting the component used by the form corresponding to each item information, and the mobile terminal can dynamically load the required forms in various scenes only by one code, so that the application scene is wide, the development process is greatly simplified, and the development workload is reduced.

Description

Technical Field

[0001] This invention belongs to the field of user interface implementation technology, specifically relating to a method and system for dynamically generating mobile forms. Background Technology

[0002] With the increasing number and complexity of IoT devices, effective operation and maintenance strategies are crucial for ensuring the stable operation, performance optimization, and fulfillment of business needs of the entire IoT system. Currently, many operation and maintenance management systems have implemented online form filling and submission. Compared to traditional offline methods, online filling not only facilitates operation for maintenance personnel but also greatly facilitates subsequent statistics and analysis. Especially with the continuous development of mobile internet, maintenance form filling is gradually shifting to mobile devices. However, the development of mobile maintenance forms often requires writing a large amount of static code for each inspection item to create the corresponding form interface. The form interface needs to be developed one-to-one based on the content of the inspection item. When the inspection content is complex, there are many inspection scenarios, and the number of inspection items or items within inspection items is large, furthermore, upgrading or modifying the content of the inspection item requires redeveloping or modifying the form interface. Given the requirement for real-time updates of maintenance forms according to the maintenance scenario, this places a significant workload on front-end developers, resulting in low form development efficiency. Summary of the Invention

[0003] The purpose of this invention is to provide a method and system for dynamically generating mobile forms, in order to solve the problem of the large workload in existing form development.

[0004] To solve the above-mentioned technical problems, this invention provides a method for dynamically generating mobile forms, comprising:

[0005] Add a form container to the layout file of the mobile form interface;

[0006] The mobile device obtains the project information corresponding to the form to be generated and sends it to the backend. It then receives the form structure data determined by the backend based on the project information of the form to be generated, and parses the form structure data to obtain the form components required to generate the form. The form structure data includes: component type, number of components, and component name.

[0007] The form components required to generate the current form are added to the form container one by one to generate the form to be filled; the form components are obtained by statistically analyzing the components used in the form corresponding to each item information.

[0008] Furthermore, the form structure data contained in the forms corresponding to each project information is obtained by the backend through statistics on the forms used for the project information.

[0009] Furthermore, iterate through the form components required to generate the current form, and dynamically add form components to the form container using the component adding tool.

[0010] Furthermore, the component addition tool is the addview tool in the group view class.

[0011] Furthermore, the form container is a LinearLayout.

[0012] Furthermore, the method also includes initializing the layout file of the added component before adding the form component.

[0013] Furthermore, the mobile terminal is also used to receive saved but unsubmitted data obtained by the backend based on the project information corresponding to the form to be generated, and to display the saved but unsubmitted data in the form.

[0014] Furthermore, the method also includes: when the mobile network is abnormal, pre-caching the form structure data corresponding to the project information to the local mobile device; when offline form filling is required, reading the local cached data; generating the form based on the locally cached form structure data; saving the form filling result to the local device after the user completes the form filling; and submitting the locally cached form filling result when the network is normal.

[0015] Furthermore, each item information and form structure is assigned a number, with each item information number corresponding to its corresponding form structure number. The backend determines the corresponding form structure data based on the item information number sent by the mobile device.

[0016] The beneficial effects of the above technical solution are as follows: This invention is an improved invention. It statistically analyzes the components used in the forms corresponding to each item's information, adds a form container to the layout file of the mobile form interface to be filled in, and then sends the item information corresponding to the form to be generated to the backend. The backend determines the corresponding form structure data based on the item information, and then parses the components required to generate the form for that item information. Then, it adds the components one by one to the form container to dynamically generate the form. This allows the mobile frontend to dynamically load the forms for multiple inspection items with only one piece of code. It has a wide range of applications, greatly simplifies the development process, reduces the workload, and can quickly adjust and optimize the form content according to the real-time status and needs of IoT devices, improving development efficiency and accuracy, thereby ensuring the timeliness and accuracy of operation and maintenance work.

[0017] To address the aforementioned technical problems, the present invention also provides a mobile form dynamic generation system, including a processor, which is used to implement the mobile form dynamic generation method described above.

[0018] The beneficial effects of the above technical solution are as follows: This invention is an improved invention. It statistically analyzes the components used in the forms corresponding to each item's information, adds a form container to the layout file of the mobile form interface to be filled in, and then sends the item information corresponding to the form to be generated to the backend. The backend determines the corresponding form structure data based on the item information, and then parses the components required to generate the form for that item information. Then, it adds the components one by one to the form container to dynamically generate the form. This allows the mobile frontend to dynamically load the forms for multiple inspection items with only one piece of code. It has a wide range of applications, greatly simplifies the development process, reduces the workload, and can quickly adjust and optimize the form content according to the real-time status and needs of IoT devices, improving development efficiency and accuracy, thereby ensuring the timeliness and accuracy of operation and maintenance work. Attached Figure Description

[0019] Figure 1 This is a flowchart illustrating the dynamic generation process of mobile forms in an embodiment of the method system of the present invention. Detailed Implementation

[0020] To make the objectives, technical solutions, and advantages of the present invention clearer, the specific embodiments of the present invention will be further described below with reference to the accompanying drawings.

[0021] In the field of power inspection, mobile form development often requires creating corresponding form interfaces based on inspection categories. When the inspection content is complex and there are many inspection scenarios, although introducing open-source components (such as Vue components and React components) can significantly reduce the workload of developers while providing rich functionality and excellent display effects, it is worth noting that if the open-source components are no longer maintained after the equipment system is upgraded, the form components may become incompatible with the new system version. In this case, secondary development will be required for the new system version, affecting operation and maintenance work. Therefore, this invention does not use existing open-source components, but adopts a form development approach based on native Android components. By statistically analyzing the components used in the forms corresponding to each project's information and adding form containers to the layout file of the mobile form interface, the necessary components for generating the form can be obtained by parsing the form structure data corresponding to the current project information requested from the backend. Finally, the components are added item by item to the form container to dynamically generate the form. This allows the mobile frontend to dynamically load the forms required for various inspection businesses and items with only one piece of code, greatly simplifying the development process, reducing the workload, and enabling rapid adjustment and optimization of form content based on the real-time status and needs of IoT devices. This improves development efficiency and accuracy, thereby ensuring the timeliness and accuracy of operation and maintenance work, and is also compatible with various system versions used in the market. Dynamic generation of operation and maintenance forms also helps to improve development flexibility, ease of maintenance, enhance user experience, and support various complex business scenarios.

[0022] Method Implementation Examples

[0023] This invention provides a method for dynamically generating forms on mobile devices, such as... Figure 1 As shown, the specific process is as follows:

[0024] 1. Custom encapsulation components.

[0025] Based on the requirements of all inspection operations and scenarios, all form component types were statistically analyzed. Component types include input boxes, radio buttons, checkboxes, switches, image pickers, dropdown lists, date pickers, and time pickers. Layout files for each component were customized on the mobile platform, and each custom component was encapsulated to obtain different form components. In subsequent steps, the form components required for the form interface can be directly added to the form container to generate the form, improving development efficiency.

[0026] 2. Add a form container to the layout file of the mobile form interface.

[0027] Define the form layout file for the mobile application, and add a general form framework and form container to the root node, configuring their basic properties. Preferably, the form container is a LinearLayout.

[0028] 3. Obtain the form structure data.

[0029] The mobile device communicates with the backend. The mobile device obtains the project information corresponding to the form to be generated and sends it to the backend. It receives the form structure data determined by the backend based on the project information, then parses the form structure data to obtain the form components required for generating the form. The form structure data contained in the form corresponding to each project information is obtained by the backend through statistics on the forms used for the project information. As one implementation, each project information and form structure is assigned a number in the backend, with each project information number corresponding to its corresponding form structure number. The backend determines the corresponding form structure data based on the project information number sent by the mobile device. Preferably, the form structure data is returned in JSON format. In a specific embodiment, the project information is an inspection item. The mobile device obtains the inspection item number (ID) corresponding to the form to be generated by scanning the device's QR code or inspection location code, and obtains the form structure data corresponding to that ID from the service backend. Furthermore, when a user fills out a form (including filling out a partial form and completing the form), saves the data but does not submit it, and then fills out the form again, the mobile app also receives the saved but unsubmitted data obtained by the backend based on the project information corresponding to the form to be generated. When dynamically adding components, the saved but unsubmitted data is displayed in the form. In other words, for example, if a user fills out half of the form and something happens that causes the user to only save part of the data and exit the current form filling interface, when the user needs to re-enter the form filling interface to fill out the form, the previously saved data is retained on the form interface, and the user can continue filling out the form without the previously filled data being cleared.

[0030] The form structure data includes: component type, number of components, and component name. The component name refers to the name of the component in the form. When the component type is a selection type such as a drop-down list or radio button, the form structure also includes the data required by the component. The data required by the component refers to the option data that needs to be given in the drop-down list or radio button.

[0031] To quickly obtain the form components required for generating the form, this embodiment associates each form structure with a form component. In a specific embodiment, the form components are numbered on the backend, and the component type, quantity, name, and required data for each inspection item are recorded. The form components are then associated with the form structure. Here, the backend refers to a module that the user cannot directly interact with, such as a backend server module, relative to the mobile form interface. The backend server module is accessed via a web interface to manage the form structure, number the form components, and record the associated form components in the form structure corresponding to each inspection item.

[0032] When the mobile network is abnormal, instead of communicating with the backend on-site to request form structure data, the form structure data corresponding to the project information is pre-cached on the local mobile device. When offline form filling is required, the local cached data is read, and the form is generated based on the locally cached form structure data. After the user completes the form, the form filling result is saved locally. When the network is normal, the locally cached form filling result is submitted. Furthermore, it also has a historical submission data viewing function. The form structure data corresponding to the project information and historical submission data are pre-cached on the local mobile device. When dynamically adding components, the historical submission data is directly displayed in the form for the user to view. In a specific embodiment, if the network conditions at some inspection locations are poor, an offline filling mode is entered, including: before the inspection begins, downloading the form structure data corresponding to the inspection scenario to the local cache; during the inspection, generating a form based on the form structure data for the user to fill in; saving the filled data after the form is completed; and submitting the saved inspection filling data when the inspection is completed and a network environment is available.

[0033] 4. Parse the form structure data to obtain the form components required to generate the current form. Add each of the required form components to the form container to generate the form to be filled, including the following steps:

[0034] 1) Parse the form structure data, traverse the form structure, obtain the form components required to generate the current form, and initialize the layout file of the required components using layoutInflater.

[0035] 2) Dynamically add form components to the form container using the component addition tool, and at the same time determine whether there is historical data to be displayed. If historical data needs to be displayed, directly load the historical data into the form interface.

[0036] The component addition tool is the addview tool in the group view class, where group view refers to groupview.

[0037] 5. Set listener methods for the added form components and record the changes in the values ​​of each form component.

[0038] 6. When clicking submit, check if the form is complete. If incomplete, indicate that required fields are missing. If complete, submit the form to the backend.

[0039] System Implementation Examples

[0040] This invention provides a mobile form dynamic generation system, including a processor. The processor is used to implement a mobile form dynamic generation method. The specific implementation process of the method has been described in detail in the method embodiments and will not be repeated here.

Claims

1. A mobile terminal form dynamic generation method, characterized by, The method comprises the following steps: adding a form container in a layout file of a mobile terminal form interface; the mobile terminal obtains project information corresponding to a form to be generated and sends the information to a backend, receives form structure data determined by the backend according to the project information, and then analyzes the form structure data to obtain form components required by the form to be generated; the form structure data comprises component type, component quantity and component name; the form components required by the form to be generated are added to the form container one by one to generate a form to be filled in; the form components are obtained by counting components used in forms corresponding to each project information.

2. The mobile form dynamic generation method of claim 1, wherein, form structure data contained in the form corresponding to each project information is obtained by counting forms used in the project information by the backend.

3. The mobile end form dynamic generation method according to claim 1 or 2, characterized in that, form components required by the form to be generated are traversed, and the form components are dynamically added to the form container by a component adding tool.

4. The mobile form dynamic generation method of claim 3, wherein, the component adding tool is an addview tool in a group view class.

5. The method of claim 1, wherein, the form container is a Linearlayout.

6. The method of claim 1, wherein, The method further comprises initializing a layout file of an added component before the component is added.

7. The method of claim 1, wherein, The mobile terminal is further configured to receive saved but not submitted report data obtained by the backend according to the project information corresponding to the form to be generated, and display the saved but not submitted report data in the form.

8. The method of claim 1, wherein, The method further comprises, when the network of the mobile terminal is abnormal, pre-caching form structure data corresponding to the project information to the local mobile terminal, reading the local cached data when offline form filling is required, generating a form according to the locally cached form structure data, saving the form report result to the local terminal after the user fills in the form, and submitting the locally cached form report result when the network is normal.

9. The method of claim 2, wherein, Each project information and form structure is provided with a number, and the number of the project information corresponds to the number of the form structure one by one, and the backend determines corresponding form structure data according to the project information number sent by the mobile terminal.

10. A mobile end form dynamic generation system, comprising a processor, characterized in that, The processor is configured to implement the mobile terminal form dynamic generation method according to any one of claims 1-9.

Images