Dynamic form custom field solution
background:
Some projects may have requirements, and customers can customize the design fields, and the fields need to be displayed and searchable in the background.
Scene:
For example, in the registration scenario, we don’t know what the customer wants the user to fill in.
Let me give you an example, and the scenario premise introduction:
- I have a platform, dynamic forms are platform functions and can be run independently
- I have a competition system, which is a product under the platform and depends on the platform to survive
- I need to design a dynamic form function on the platform that can be provided to sub-products
The general implementation process:
- Create dynamic registration form on the platform
- The competition system creates the registration form created by the competition selection
- Search and display registration data
Implementation steps
1. Design dynamic forms
Use the open source form designer on the market to modify the generated structure and change it to the structure we want, such as:
{
"form": "apply",
"form_name": "Registration application form",
"form_desc": "For the registration application form, please fill in the competition carefully. Please read the registration requirements carefully before filling in. If it does not match, it will be rejected."
"start_time": "2023-10-19 09:29:37",
"end_time": "2023-10-19 09:29:37",
"create_time":"2023-10-19 09:29:37",
"pay": true,
"pay_price": 100,
"pay_desc": "pay description",
"system_module": "ims",
"system_module_router": "",
"system": "Event Management System",
"theme": "default",
"cssCustom": "",
"ruleJsCustom": "",
"modify": "Whether the submitted data can be modified, 0-not-modable/1-not-modable/3-partially can be modified",
"children_unique": [
"uuid"
],
"children": [
{
"filed": "contestId",
"type": "hiddenFiled",
"value": "00a0ca716cc0487d909b5c8654d1cbc0"
"column_name": "match id",
"column_desc": "Match id hidden field",
},
{
"id": "",
"sort": 1,
"filed": "name",
"column_name": "name",
"column_desc": "The name and the name on the ID card must be the same",
"type": "text",
"require": true,
"min": 2,
"max": 30,
"ruleText": "The name must be filled in and the characters are within 2-30 ranges"
},
{
"id": "",
"sort": 2,
"filed": "participation_type",
"column_name": "Accounting identity",
"column_desc": "individual/enterprise",
"type": "radio",
"require": true,
"default": "1",
"choose": [
{ "label": "individual", "value": "1" },
{ "label": "enterprise", "value": "2" }
],
"ruleText": "Accounting identity must be selected"
},
{
"id": "",
"sort": 3,
"filed": "hobby",
"column_name": "Host",
"column_desc": "Host Tag",
"type": "checkbox",
"require": false,
"min": 1,
"max": 3,
"choose": [
{ "label": "sing", "value": "1" },
{ "label": "Dancing", "value": "2" },
{ "label": "playing ball", "value": "2" },
{ "label": "Ski", "value": "2" }
],
"ruleText": "You must choose 1-3 hobbies"
},
{
"sort": 4,
"filed": "introduce",
"column_name": "Introduction",
"column_desc": "Try to write some specialties and advantages",
"type": "textarea",
"require": true,
"max": 500,
"ruleText": "Introduction characters are within 500 ranges"
},
{
"id": "",
"sort": 5,
"filed": "tel",
"column_name": "phone number",
"column_desc": "Phone number, only supports Chinese telephone numbers",
"type": "number",
"require": true,
"rule": "tel",
"ruleText": "Phone number is filled incorrectly"
},
{
"id": "",
"sort": 6,
"filed": "birthday",
"column_name": "Birthday",
"column_desc": "Date of birth",
"type": "year / date / dateTime",
"require": false,
"format": "yyyy-mm-dd"
}
.........
]
}This structure supports many custom designs, such as whether payment is required, which roles can submit data, field data duplication check, whether submitted data can be modified, common field designs, customized components, etc. These data structures exist in mysql. This part mainly discusses with the front-end how to render the form the customer wants to design. In the end, this json will be rendered into html and js code, and then returned to the front-end.
2. The backend accepts form creation requests
When the backend receives a request to create a dynamic form, it needs to create a collection in mongodb, and one collection corresponds to a form type.
3. The user fills in the data, and the front-end sends the data filled in by the user to the background
The backend platform receives this request and forwards it to the sub-product through the system_module in the form configuration. The sub-product does some business operations, verification, etc., and the verification is stored in the corresponding collection of mongodb, for example
{
"_id": "4dc000acd35648c5b273f52b80fa8166",
"form": "apply",
"userId": 1001,
...
"children": [
{
"filed": "contestId",
"id": "1",
"type": "hiddenFiled",
"label": "Match Id",
"value": "00a0ca716cc0487d909b5c8654d1cbc0",
"searchText": "The 10th Internet Competition"
},
{
"filed": "name",
"filed": "",
"id": "2",
"type": "text",
"label": "name",
"value": "Zhang San",
"searchText": "Zhang San"
},
{
"filed": "participation_type",
"id": "3",
"type": "radio",
"label": "Accounting identity",
"value": "0",
"ItemText": "Individual",
"searchText": "individual"
}
]
}Background data logic
We have done the pre-work, and how to relate it to the background data now.
Now that we are in the background, the front-end doesn't even know which fields are there, so the back-end needs to pass back what data is there for the form to the front-end. Then we agree on the search format together, which type of form can be searched, such as time and number can be searched in intervals, and text can be searched in fuzzy. The backend needs to convert this format into database search.
Pros and Cons
Advantages: Meet dynamic form requirements, high flexibility
Disadvantages: Dynamic form operation is difficult, and basically requires operation and maintenance personnel, suitable for scenarios with more display and less logic