This article will help you to quickly create a small questionnaire survey program as shown in the figure below based on the existing template with the help of Tencent Cloud Micro-build low-code WeDa platform.

An overview of the

Developing a questionnaire applet from zero to one involves several steps, copying the application from the template center to your own application management, and then defining the data source based on your requirements. After the data source is defined, the page needs to be designed according to the requirements, mainly to complete the layout and component definition. Once you’ve done it, you need to build it locally and preview it. With a few simple steps, you can develop your own app.

Step 1: Create an application

1. InTencent cloud micro build low code consoleClick Template Center, select the required template, and click Use Now.2. Enter the application name, fill in Survey, and click OK.

Step 2: Edit the data source

After using the template successfully, click “Data Source Management” to see a new data source named “Low Code Sharing Activity Registration Form” added.

1. Click a name to view detailed information about the field name, field ID, and data type in the table.2. On the data source management page, you can add fields required by services. Click Add Field.3. You can add a job field. The field id is JOB, and the field type is string.4. Click OK to add a field.5. You can delete unnecessary fields by clicking the “Delete” button in the operation column. This article takes deleting fields of interest as an example.6. Add the industry to which the second field belongs, the field IDENTIFIER is industry, and the field type is a string. Mandatory Select [Yes], Enumeration select [No], and click [OK] to add a field.7. As the users who participate in the questionnaire only need to submit, so [Action] only check the [New] method, and keep the default for other methods. Click ok at the bottom of the page after the Settings are complete. Otherwise, the fields just added do not take effect.

Step 3: Modify the page

1. After setting the data source, you need to create a page. Click “Application Management” to find the application you just created, and click “Edit” to enter the application editor.

Code parsing

Here is a piece by piece analysis of the structure of the template in use today. First, there is a vertical layout component that divides the page into three parts:

1. Header: the introduction of small program on the head to inform users of the purpose of this survey. Slot Header in the corresponding template. 2. Content: The content is the specific survey item, and a submit button should be added at the end of the survey item to facilitate user submission. Slot Content in the template. 3. Tail (footer) : Copyright information is usually placed in the tail. Corresponding to slot footer in the template.

Transform the head

1. Select [slot Header] in outline tree, you can see that the header information of this template is placed four header components, if you do not need so much display content, you can select the specific [title] component and right click [Delete].2. If you need to add a long text introduction, you can select [slot Header] > [Container] component, and then click [Text] component in [General] category of component library to add text to the header of the questionnaire. You can also quickly achieve this by dragging and dropping. To modify the content of the text, select the [Text] component and modify the [text Content] of the [Component Edit] on the right.Content examples:Dear Users of Tencent Cloud, in order to better improve the experience and services of Tencent cloud platform, we hereby launch this questionnaire, hoping to get your real thoughts and valuable opinions. This questionnaire will take you 5 minutes.3. At the same time, the style can be adjusted according to business needs. We select the [container] component where the text component is located, switch to the [style] label, and set the inner margin distance of the component to 20 on the left and 20 on the right.

Modified content

1. In the [slot Content] section, namely the content part of the questionnaire, the template provides the name, mobile phone, topic of interest and submit button. If you do not need a certain part of the content, you can select the component, right-click [Delete].2. To add content, select the Slot Content Slot component (the Slot container of the form container) under Slot Content, and then click the component to be added in the component library, for example, Add The Form Radio component. 3. The default is to add to the last edge, we can adjust the order, drag the component to the front of the [button] component.4. Select the component form radio 】 【 just added, set the name of the form field (field name to fill in for the job), the title of the component () is my occupation, change the layout to the vertical, and, in turn, increase the content of the radio, the radio name respectively the front-end development, background and development, designers, operation, planning and other products, Set the options to first, second, third, fourth, five, and six. The value of the radio content is submitted to the database.5. Add the second survey item in the same way. IT should be noted that the field name of the second survey item should be filled in as “industry”, the title should be set as “The industry I belong to”, and the option names should be finance, industry, Education, medical care, government affairs, IT Internet, and others. The options are first, second, third, fourth, five, six, and seven. The value of the radio content is submitted to the database.

Transform the tail

We display copyright information at the end of the questionnaire. Select the Text component in slot Footer to modify the copyright information in the properties panel on the right.

Step 4: Code build and release

1. After the code is modified, you can preview it. Click the navigation bar [Preview release]. For quick test, you can select the deployment mode of “Cloud” and the deployment platform of “web H5”.2. Install Node. js on the local PC and run the commands as prompted on the CLI. Enable low-code compilation monitoring after the installation.3. After the deployment is complete, the QR code preview and access address are displayed.

  1. After the successful construction, you can scan the TWO-DIMENSIONAL code with your mobile phone to browse the effect.

Data management

After a user fills in the questionnaire, the administrator can click “Data Source Management” to view the questionnaire information data submitted by the user. Click “Data Management Background” to view and manage the data in the content management (CMS) background of Tencent Cloud LowCode platform.When you enter the page, you can see the history project you have created. Click on the new project you just created.Select the form to view the data.You can also directly find the application in “Application Management” of the console, click the application card, and find the corresponding data of the preview/release application in “Data Management Background”. [Official data] corresponds to the application data generated using release, and [test data] refers to the application data generated using preview.

Product introduction

Tencent Cloud Micro low code is an efficient and high-performance drag-and-drop low code development platform, which connects the front-end industry business upward and the massive cloud computing capacity downward to help enterprises vertically go to the cloud. Tencent Cloud micro-build low code abstracts the tedious underlying architecture and infrastructure into a graphical interface, and quickly builds multi-terminal applications (small programs, H5 applications, Web applications, etc.) through professional templates, drag-and-drop components and visual configuration, eliminating the need for code writing and allowing you to fully focus on business scenarios. Tencent Cloud micro low code with cloud development as the underlying support, cloud native ability to build a full link through the application, provide a highly open development environment, and always escort your application.

Open the low code: cloud.tencent.com/product/low…

The product documentation: cloud.tencent.com/document/pr…

Technical exchange plus Q group: 1003059706

Latest news follow wechat official account [Tencent Yunyun Development]