Actual combat | Use micro-build low-code 3 minutes to develop form applications

From 0 to 1, this article uses the Tencent Cloud Micro-build low-code platform to build a common form display application in a step-by-step manner, allowing you to quickly get started with the core functions of the Tencent Cloud Micro-build low-code platform.

Step 1: Create the app

1. Log in to the Tencent Cloud Weidai low-code console.

2. Click New Application - New from Blank , fill in the application information:
   

   • App name : Enter the app name.
   • Supported Platforms : Select the platforms on which the app supports publishing.
3. Click New to create an application.

Step 2: Create the data source model

1. Click Data Source Management in the main menu bar on the left to enter the Data Source Management page.
2. Click New Self-built Data Source .
   

3. Go to the New Data Source page and configure the following information:
   

   • Database Name : Enter the database name.
   • Data source ID : As the unique ID of the data source model, it cannot be repeated.

   • Field configuration : A data source model can consist of multiple fields. For example, the "person" data source model can have fields such as "name, age", and this model can create data source variables such as "managers, employees, tourists". Note _id , createdAt , updatedAt are built-in fields of the data source and cannot be modified. Click Add , a small field setting window will pop up on the right side of the page, and configure the following related information:

     • Field Name: Enter the field name.
     • Field ID: As the unique ID of the field, it cannot be repeated.
     • Data Type: Select the corresponding data type.
     • Required: Whether the field is required.
     • Unique: Whether the field is unique.
     • Whether to enumerate: Whether the field can only take values in a limited number of enumeration values. For example, for the gender field, the enumeration value can be set to: male, female.
4. We create two fields, name and mobile number, respectively, and click OK to complete the creation of the data source model.
   

Step 3: Low-code application editing

1. After the data source is set, you need to create a page, enter the application management page, find the application you just created, and enter the application editor.
   
2. The editor is divided into three parts, which can be summarized as the menu area, the component page selection area, and the editing preview area.
   

Generate a form application using a form container

1. Use the form container in the editor to bind the data source you just created.
   
2. After clicking OK in the pop-up window, the form will be automatically generated.
   

Create an information display page

1. Create a new page in the editor.
   
2. Go to the newly created page and create a model variable for the page.
   
3. After filling in the variable ID, click Save .
   
4. Add a container to the page, and add an information display component below the container.
   
5. Bind the loop for the container.
   
   Check the newly created model variable and click OK .
   
6. It can be seen that after the model variables are configured successfully, the components under the container will be traversed according to the amount of data.
   
7. Configure data for the list item component.
   
   Select the bound loop object , check the fields to be bound, and click OK .

! The bindable data in the loop object depends on the model variables bound to the upper container of the component.

8. After clicking OK , you can see that the component has been successfully configured with data.
   

page test

1. After the overall construction of the page is completed, the function of the page is tested. First, open the real-time preview in the editor and then submit the information three times on the form page.
   
2. When you come to the information display page, you can see that the information has been successfully traversed and displayed, and the application construction is completed.
   

Step 4: Publish the app

1. Click Publish in the upper right corner of the page to preview the release configuration in the pop-up deploy application window.
   
2. After publishing, you can access the published application by scanning the QR code.