preface

Those who know me well may know that I do not write about hot topics. Why not? Is it because I don’t pay attention? Not really. There are some issues that I am very concerned about, and I do have a lot of ideas and opinions. But I have always followed one principle: make content that has life.

This article is an article with strong application. Through a practical application scenario, we solve a certain kind of problems, provide one or several solutions, and explore the charm of technology. Next, the author mainly analyzes the implementation ideas and technical solutions of form customization platform, to achieve a similar to gold data or questionnaire star form configuration platform, you can also based on this scheme, expand the function of more powerful visual platform.

The body of the

Why build such a platform? On the one hand, this is because the author has been serving b-side products for many years, and has certain project accumulation of dynamic form and configured form, and knows deeply the value of configured form. Take a very traditional b-side form configuration as an example: In order to meet the customization needs of different enterprises, traditional 2B enterprises often provide customization or free configuration functions to enterprise customers when providing saas services, as shown in the figure below:

saas
saas

saas

Here is a brief introduction to saas to make it easier for everyone to understand its model:

Saas (Software as a Service) is a cloud computing product that provides users with access to a vendor’s cloud software. Users do not need to install applications on their local devices. Instead, applications reside on a remote cloud network and are accessed via the Web or API. Applications allow users to store and analyze data and collaborate on projects.

There are many similar cloud computing products, such as Paas (Platform as a Service), Iaas (Infrastructure as a service), and so on. Interested friends can learn about it.

Introduce more above, is to let everybody understand the basic background of designing this platform, we can also take a more realistic example is the form of the golden data or questionnaire star configuration mode, users can customize their in the management of the background of the form, and generate an accessible link to the target user questionnaire, fill in the information, collect information, Finally, the purpose of data analysis is realized.

The form customization platform introduced in this paper also supports form management, form data analysis, form data collection, form customization and other functions. The author will use the familiar technology stack React and the third-party UI library ANTD4.0 to develop the platform, and the back-end uses Node + KOA to design the routing interface.

Design ideas

Realization effect and analysis

1. Form customization management list

2. Form customization page

  • The text box
  • Multiline text box
  • A drop-down box
  • Radio buttons
  • Check box
  • File upload control

Basically covers all the forms business scenarios we need. As you can see from the figure above, custom fields can be inserted anywhere, and form fields can be edited, modified and deleted. With a little more imagination, we can realize not only the application of forms and questionnaires, but also the scenario of answering questions, publishing content, etc.(rich text control can be supported later).

3. Draft management

4. Generate a front form access link

5. Check that the user has entered data

6. Form data analysis

antv G2

Application scenarios

The above has introduced some of the features and interactions of the Custom Form customization platform, and there are a lot of interesting things we can do with it. Since the form abstraction is data, we can have different display forms after we get the customized FORM JSON data, such as the user’s questionnaire survey, the website platform vote, answer page, dynamic release and other functions, as shown in the following figure:

If we open our imagination again, we can configure a form that includes a file upload control and n text input controls, as shown below:

We only need to upload three pictures, then fill in the corresponding captioning, and then use the market mature H5 full screen scrolling plug-in, can easily customize various H5 activity page

Of course, based on the platform can even directly configure small propaganda website, there is more room for imagination, looking forward to everyone to dig.

Code implementation

To develop such a form customization platform, the core lies in how to implement the mechanism of dynamic configuration of forms. Here the author divides it into two parts: basic form materials and form editing generator, as shown in the following figure:

1. Basic form materials

Basic form materials are mainly used for users to select custom form controls. We often use map loop + conditional judgment and single layer Map + object method for dynamic form rendering. If the former wants to render a dynamic form, it may be realized as follows:

{
    list.map((item, i) = > {
        return <React.Fragment key={i}>
            {
               item.type === 'input' && <Input />
            }
            {
               item.type === 'radio' && <Radio />
            }
            // ...
        </React.Fragment>})}Copy the code

However, there is an obvious disadvantage of doing this is that it will produce a lot of unnecessary judgments. If the form is complex, the performance is often very low, so I use the latter to achieve the complexity can be reduced to O(n). Let’s start with the configuration template:

// Base template data
const tpl = [
  {
    label: 'Text box'.placeholder: 'Please enter content'.type: 'text'.value: ' '.index: uuid(5)}, {label: 'Checkbox'.type: 'radio'.option: [{label: 'male'.value: 0}, {label: 'woman'.value: 1}].index: uuid(5)}, {label: 'Check box'.type: 'checkbox'.option: [{label: 'male'.value: 0}, {label: 'woman'.value: 1}].index: uuid(5)}, {label: 'Multiline text'.placeholder: 'Please enter content'.type: 'textarea'.index: uuid(5)}, {label: 'Select box'.placeholder: 'Please select'.type: 'select'.option: [{label: 'China'.value: 0}, {label: 'Russia'.value: 1}].index: uuid(5)}, {label: 'File upload'.type: 'upload'.index: uuid(5)}]// Template rendering component
const tplMap = {
  text: {
    component: (props) = > {
      const { placeholder, label } = props
      return<div className={styles.fieldOption}><span className={styles.fieldLabel}>{label}:</span><Input placeholder={placeholder} /></div> } }, textarea: { component: (props) => { const { placeholder, label } = props return <div className={styles.fieldOption}><span className={styles.fieldLabel}>{label}:</span><TextArea placeholder={placeholder} /></div> } }, radio: { component: (props) => { const { option, label } = props return <div className={styles.fieldOption}> <span className={styles.fieldLabel}>{label}:</span> <Radio.Group> { option && option.map((item, i) => { return <Radio style={radioStyle} value={item.value} key={item.label}> { item.label } </Radio> }) } </Radio.Group> </div> } }, checkbox: { component: (props) => { const { option, label } = props return <div className={styles.fieldOption}> <span className={styles.fieldLabel}>{label}:</span> <Checkbox.Group> <Row> { option && option.map(item => { return <Col span={16} key={item.label}> <Checkbox value={item.value} style={{ lineHeight: '32px' }}> { item.label } </Checkbox> </Col> }) } </Row> </Checkbox.Group> </div> } }, select: { component: (props) => { const { placeholder, option, label } = props return <div className={styles.fieldOption}> <span className={styles.fieldLabel}>{label}:</span> <Select placeholder={placeholder} style={{width: '100%'}}> { option && option.map(item => { return <Option value={item.value} key={item.label}>{item.label}</Option> }) }  </Select> </div> } }, upload: { component: (props) => { return <div className={styles.fieldOption}> <span className={styles.fieldLabel}>{props.label}:</span> <Upload listType="picture-card" className="avatar-uploader" showUploadList={false} action="https://www.mocky.io/v2/5cc8019d300000980a055e76" > <div>+</div> </Upload> </div> } } } export { tpl, tplMap }Copy the code

The basic materials are used in the following figure:

2. Form editor generator

The form editor generator is divided into two parts. The first part is a container component for generating form items, encapsulating the add, delete, and edit operations. The code is as follows:

// Form container component
const BaseFormEl = (props) = > {
  const {isEdit, onEdit, onDel, onAdd} = props
  const handleEdit = (v) = > {
    onEdit && onEdit(v)
  }
  return <div className={styles.formControl}>
    <div className={styles.formItem}>{ props.children }</div>
    <div className={styles.actionBar}>
      <span className={styles.actionItem} onClick={onDel}><MinusCircleOutlined /></span>
      <span className={styles.actionItem} onClick={onAdd}><PlusCircleOutlined /></span>
      <span className={styles.actionItem} onClick={handleEdit}><EditOutlined /></span>
    </div>
  </div>
}
Copy the code

The second part is used to render the action area template, wrapping different types of form components based on BaseFormEl. Here is a more complex select to illustrate, similar to other form controls:

const formMap = {
  title: {},
  text: {},
  textarea: {},
  radio: {},
  checkbox: {},
  select: {
    component: (props) = > {
      const { onDel, onAdd, onEdit, curIndex, index, type, label, placeholder, required, message, option } = props
      return <BaseFormEl 
        onDel={onDel.bind(this, index)}
        onAdd={onAdd.bind(this, index)}
        onEdit={onEdit.bind(this, {index.type.placeholder.label.option.required})}
        isEdit={curIndex= = =index}
      >
        <Form.Item name={label} label={label} rules={[{ message.required}}] >
          <Select placeholder={placeholder}>
            {
              option && option.map(item => {
                return <Option value={item.value} key={item.label}>{item.label}</Option>})}</Select>
        </Form.Item>
      </BaseFormEl>}, editAttrs: [{title: 'field name ', key: 'label'}, {title: 'option', key: 'option'}, {title:' prompt text ', key: 'placeholder}, {title:' if required, the key: 'required'},] upload: {}}},Copy the code

The main use of editAttrs is to render the edit list, indicating which form items can be edited. This part of the code is relatively simple.

export default (props) => {
  const { 
    formData, 
    handleDelete, 
    handleAdd, 
    handleEdit, 
    curEditRowIdx 
  } = props
  return <Form name="customForm">
            {
              formData && formData.map(item => {
                let CP = formMap[item.type].component
                return <CP {. item} key={item.index}
                  onDel={handleDelete} 
                  onAdd={handleAdd}
                  onEdit={handleEdit}
                  curIndex={curEditRowIdx}
                />})}</Form>
}
Copy the code

So far, the basic function module has been developed, we only need to import these materials and components into the edit page, based on the business to operate and request. Due to the complexity of this case, the author did not write out all the components one by one, hoping to provide you with a space for thinking, the author will integrate this platform into the author’s open source CMS system for you to learn and use. As for the content of nodeJS, I will sort it out one after another later. If you have other questions, you can communicate with me more.

The last

If you want to learn more H5 games, Webpack, node, gulp, CSS3, javascript, nodeJS, Canvas data visualization and other front-end knowledge and practical, welcome to join our technical group in the public number “Interesting Talk front-end” to learn and discuss together, and explore the boundary of the front-end.

More recommended

  • Programmers must have several common sorting algorithm and search algorithm summary
  • A few very interesting summaries of javascript knowledge points
  • Front-end advanced from zero to one to achieve unidirectional & bidirectional linked list
  • Preliminary study of micro front-end architecture and my front-end technology inventory
  • Develop your own graph bed application using nodeJs
  • Implementing a CMS full stack project from 0 to 1 based on nodeJS (Part 1)
  • Implement a CMS full stack project from 0 to 1 based on nodeJS (middle) (source included)
  • CMS full stack project Vue and React (part 2)
  • Write a mock data server using nodeJS in 5 minutes
  • Develop a component library based on VUE from zero to one
  • Build a front-end team component system from 0 to 1 (Advanced Advanced Prerequisite)
  • Hand-write 8 common custom hooks in 10 minutes
  • Javascript Design Patterns front-end Engineers Need to Know in 15 minutes (with detailed mind maps and source code)
  • “Front End Combat Summary” using postMessage to achieve pluggable cross-domain chatbot