Recently, I started to build a visual form building system in a low-code platform. In simple terms, the visual form building mainly uses vue-Draggable to drag components to generate form pages and render them into forms. The properties of components can be visually configured through the panel, and the generated form pages can support the subsequent increase, deletion, change and check of system data.

Core technical points: Drag and drop elements to generate JSON data, which can support nested layout. JSON data rendering actually uses the dynamic component function of VUE. Each drag and drop data has component name field, and the corresponding component is generated according to the dynamic component and mount all the attributes.

The page layout

<div>
  <div>Component list</div>
  <div>Render panel</div>
  <div>Properties pane</div>
</div>
Copy the code

Core code:

<component :is="name" v-bind="prop"></component>
Copy the code

This is really the core line. All the other work is to modify the JSON configuration file by dragging a component from the components panel on the left. The logic is to add a configuration to the configuration file. To modify an attribute in the property modification panel on the right, the logic is to modify a configuration attribute value of the component configuration item. After making changes to the JSON, the render panel is rerendered based on the configuration information. The overall logic is around adding, deleting, and changing JSON configuration files, which the rendering engine uses to render.

There are two complex situations. One is that the configuration of the property panel is also troublesome when the number of components increases. There are more than ten components, and the properties of each component are different, so the property panel also needs to be configurable. A simple label property configuration scheme is as follows:

{
  "key": "label".// Mark the property field
  "title": "Label".// Properties panel configuration item name
  "name": "CText".// Component name, render different components according to name (input,number,select)
  "value": "Simple text" // The default value of the property
}
Copy the code

According to the configured page, render the corresponding new page of the form, form details page, docking data submission interface, flow interface, to complete the basic functions of a low code platform.

Extended features: Custom components and events

Users’ needs vary so much that it is impossible for a simple form to meet everyone’s needs. In some cases, there may be some customized functions in the project. In this case, users need to be able to expand their own. In the form engine we have added custom components that allow users to write their own rendering code to render within local areas of the form.

There is also event support, which triggers an event when a form component is clicked or its bound data changes. It provides a series of simple built-in form apis to facilitate the linkage of forms, and also supports user custom code, providing great flexibility.

In addition, forms support the ability to convert drag-and-drop generated pages into Vue code, which is an advanced feature for developers that allows for greater flexibility.

User oriented

This is the decisive factor in the form of a form engine product, who the user of the product is, and who will use it when we build it. This will determine the shape of our product and the configurable properties of each component.

Our products intended users primarily business people, so our component design as far as possible for the business, not for developers, the component in the design also needs to be close to the business, as far as possible components don’t need so many configuration item properties, such as width and height of the label, whether can clear, whether can edit code, etc., these properties we can be part of the built-in, Part removed; For the traditional 24-column grid layout, which most business people don’t understand, we just need to do a row of 2 columns, row of 3 columns and so on.

The user group determines the form of our product, so our components are business-oriented as far as possible, including some common business components, such as department, personnel selection, signature and approval components, etc., and the configuration items of components are simplified as far as possible, with only 4-5 configurable items reserved for each component. Most of the open source products on the market can replicate all the attributes of a form component in elementUI; however, this is for developers, and business people need as little configuration as possible and as many business components as possible.

Depending on the audience a project is aimed at, it can be done differently, learning more about the product rather than just the code.

Existing problems

1. Our company had a low code platform before the form engine, but forms at that time were all written in code. In the process of application migration, the original developers tend to directly copy the previous code, but the new platform’s code support is not complete, resulting in many problems.

2. The requirements of project scenarios are ever-changing. When designing functions, product managers and project managers do not consider the capabilities of the current platform, resulting in unsupported requirements, often using custom codes to edit forms, and few forms generated by drag and drop.

thinking

1, the new platform done no update documentation, document no discharge time, a group of self development and products to satisfy, a face of meng project personnel, don’t know how to use, therefore appeared project they are more likely to use their attributes in the process of migration code editor, and the new drag and drop function. Product features are important, but so is help documentation, and a product without documentation is not a good product.

2. Although low code platform is hot, it is more about low code of front-end page and form scene. However, this piece may not be so good for the needs of external customers. The demand is ever-changing and it is impossible to cover all scenarios. The low code platform is more about maintaining the interface logic reuse of back-end data addition, deletion, modification and review and process flow, and it is difficult for simple front-end low code to meet all needs.

3. The main focus of the low code platform is the rapid construction of the front-end page, but the built page also needs to be bound to the business, so data can be submitted, data can be edited, and the flow can be carried on. It is meaningless to simply build a front-end page.