Dynamic configurable Form Design Concept

1. Introduction

When browsing a website, we often submit some information, which is also called a form. Submitting information is also called a form.

Generally, the submitted information is the registration information and logon information. After logging in, you need to submit detailed personal information, including education, address, and project experience.

In addition, on the e-commerce website, we will also submit orders, add favorites, and add a shopping cart.

In the network, we encounter various forms every day. With the popularization of the network and the popularization of information technology, a lot of information is submitted through the network, and we will deal with forms frequently.

So what is a form?

A form refers to the sum of information filled in by the user on the page and the sum of information items filled in. The main function of a form is to collect information.

This is the explanation in Baidu encyclopedia.

Forms are mainly responsible for data collection in webpages. A form has three basic components:

1. Form tags;

2. form fields, including text box, password box, hidden field, multi-line text box, check box, single choice, drop-down selection box, and file upload box;

3. Form button.

2. Form Design

2.1 static forms

All form items in the form have been fixed in advance, for example, how many form items are there, what type each item is, and those that need to be not displayed at the front end, the sorting and display control of these form items, most of them are fixed.

After the application is developed, if you need to modify the form items, such as adding a form item, you can adjust the position of a single table item. Display form items in groups and control groups. All of these operations must modify the code or even the database to meet the requirements.

All users want the form to be dynamic and manage form items dynamically.

2.2 dynamic forms

2.2.1. First

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/1121304A5-0.png "style =" float: none; "title =" 1.png"/>

Advantages:

Simple and clear.

Easy to configure.

Disadvantages:

The form information is not classified and is not easy to display and control. For example, basic information, education information, and contact information in personal information cannot be dynamically displayed in multiple parts.

Attributes cannot be reused. For example, you can use personal and enterprise forms, or even other forms. You do not need to configure them again.

2.2.2. Type 2

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/1121301936-1.png "title =" 2.png" style = "float: none;"/>

Disadvantages:

The template of the form is not supported.

Advantages:

The configuration is more flexible and not complex.

Allows you to reuse attribute groups. For example, the academic information attribute group and the contact information attribute group.

Attribute groups can be sorted to control display.

2.2.3 and 3

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/112130F14-2.png "title =" 3.png" style = "float: none;"/>

Disadvantages:

The configuration is complex and slightly redundant.

Not easy to understand.

Advantages:

Flexible and powerful.

Supports dynamic configuration of dynamic forms to the maximum extent.

The same form supports multiple templates and enable and disable templates.

2.3 static + dynamic

Some static forms + dynamic forms

3. Summary

The above is the implementation of the three dynamic forms I have imagined. The figure shows a simple expression of data storage.

If you have other methods, leave a message. If I allow this, I will add it to the end of this article.

Sharing can help more people. Let's work together to design dynamic forms better and more powerful.

Postscript

In addition to storage and query, dynamic forms are designed. How to query the stored data, because it was originally column-level data, it is now row-based.

For example, we will design a table with name columns, Gender columns, and introduction columns. But now it is the name line, gender line, and introduction line. If it is a relational database, the original regular query SQL will be invalid. What should I do? Whether it is implemented in a special way, or export the data to the regular database design, and query it using the old method.

This may use the concepts of OLTP online transaction processing and OLAP Online Analytical Processing.

Another way is to divide an application into two parts: command and query. Commands include addition, deletion, modification, and maintenance of data. Query is to obtain data. It may include various interfaces for obtaining parameters and dimensions. CQRS (Command Query Responsibility Segregation Command Query Responsibility separation ). It can be extended to the system design.

There are also a large number of Field types, and some types of storage still need to be considered. The regular single-line text means that you can store a single value directly. For a single multiple-choice type, you need to store keys, especially all selected keys. You need to store keys of multiple selected items, the number of multiple keys is not fixed. Whether these keys are stored in a column or rows is used for storage is also a scratching point !!!

In fact, I have another idea. # Database # Does CRUD, create, read, update, and delete add, delete, modify, and query data? I think you may have some questions about whether the read is equal to or not! Read is literally a read. There is a difference between reading and querying. I personally think reading! = Query: read is only the acquisition of a single data, and query is the acquisition of conditional multi-row data. Therefore, CRUD does not add, delete, modify, and query, but should be called add, delete, modify, and read.

The form item may also be a tree-like choice item, and there is no good solution for this. I just think it should be encapsulated into an independent control. For the data loading of the tree options, the storage after selection, and future matching queries, there should be a whole set of encapsulation. For example, exact single-digit matching, multi-digit matching, and hierarchical matching.

There are also some form items that are combined by single-and multi-choice. For example, the first level can only be single, And the next level can be multiple.

There are also some tree form items that can be selected only on the leaf node.

The specific items of Single-choice and multiple-choice form items can be loaded from the data source. First set the data source, that is, key-value pairs of some key/value pairs, a group, and then select the data source to fill in the Form Items when adding single-choice or multiple-choice form items.

This article is from the "breakthrough IT architects" blog, please be sure to keep this source http://virusswb.blog.51cto.com/115214/1287768