Best practice | Use micro-build low-code 10 minutes to quickly build an enterprise portal application

In this article, the enterprise portal application shown in the following figure is taken as an example. Let's learn how to use the micro-build to quickly build the enterprise portal application.

Use Tencent Documents to quickly create data models and data management backgrounds

We can quickly create the data model and data management background by importing the Excel file of Tencent Documents

1. On the Create Application page of the console, select New Data Management Application.
   
2. Select New as New from Excel .
   
3. Choose to import external documents and authorize Tencent documents.
   
4. After the authorization is completed, you can select the corresponding Excel file to import, and you can click the sample template below to download the sample file.
   
5. After the import is completed, the data model fields and the data stored in the data model will be automatically identified according to the Excel file, as shown in the figure below, click Next after confirming that it is correct.
   
6. After entering the name, the generation of the data model and the creation of the data management background can be automatically completed.
   

Create a portal application from scratch

Create a blank app

1. On the Create Application page of the console, select New Portal Application.
   
2. Select New from blank.
   
3. After entering the application name, you can complete the creation of a blank application. After the creation is completed, the page will automatically jump to the application editor.
   

Create Enterprise Portal Home Page

1. Select a blank page in the guide to create.
   
2. Add a carousel component to the page.
   
3. In the right configuration area of the carousel on the right, add the pictures to be displayed in the carousel.
   
4. Then select the title component and modify the related configuration of the title component.
   
5. Then, in the header component style configuration area, adjust the upper and lower margins of the header component to 20, so that the page can be displayed more clearly.
   
6. Then add the grid navigation component for the related display of scene capabilities.
   
7. In the component configuration area on the right, configure the image and title for the grid navigation.
   
8. After the grid navigation configuration is complete, we right-click the title component just created, select clone, drag the cloned title component to the bottom of the grid navigation component and modify the text content of the title component.
   
9. Add a list view component and select the template as the card list .
   
10. Configure the data binding for the list view component on the right, and select the data model generated by Excel in the data model configuration on the right.
    
11. After the data configuration is complete, we need to adjust the style of the list view. Select the normal container below the list view in the outliner, and adjust the border to none in the style configuration area of the component.
    
12. Then we data-bound the pictures in the list view, select the picture component under the list view, and then click the data binding button in the configuration area on the right to bind the corresponding data fields.
    
13. Repeat the above method to perform data binding for the text component. After the binding is completed, the effect is as follows:
    
14. After that, we modify the configuration of the list view so that only 4 pieces of data are displayed here, and the paging mode is changed to no paging.
    
15. After that, we can use the same method to build the "partner" module. The relevant data of the partner needs to be searched by fields, and we can filter the data through the configuration area of the list view.
    
16. After configuring the data model for the list view view, click the data filter pop-up window below, and configure the filter condition as category equal to "cooperation", as shown in the following figure:
    
17. After the configuration is complete, the components are bound to the data. You can see that the list view only displays the relevant data of the partners. At this point, our enterprise portal homepage is created.
    

Create an enterprise dynamic list page

1. Create a new page and name it "Enterprise Dynamic List".
   
2. Drag into the list view component, and select the template as the graphic list .
   
3. After binding the data model for the list view, the image and text in the list are bound to the data in turn to complete the construction of the graphic list page.
   

Create an about us page

1. Then add a new page again and name it ""About Us".
2. Create a new common container , add a picture component under the common container and bind the picture material to be displayed, and adjust the width of the picture component to 100%.
   
3. After that, create a new ordinary container again, add a title component under the ordinary container, and adjust the copywriting as required. The size of the header component is set to "3" and the alignment is set to "left".
   
4. Create a new normal container again, add a rich text component under the normal container, and enter the display content in the configuration area of the rich text component.
   
5. After that, we make minor adjustments to the layout style of the page, adjust the entire inner spacing of the title component to 20, and adjust the left and right inner spacing of the rich text component to 20. At this point, we have completed the creation of the "About Us" page.
   

Create a content detail page

1. The layout of the "Content Details" page is basically similar to that of the "About Us" page. We can clone the page to copy the page, and click the page setting button to modify the page name to "Content Details".
   
2. Add a text component to the copied page, and adjust the left and right spacing of the text component to 20 for the display of subtitles on the detail page.
   
3. Then we select the data view component in the component area, delete the normal container that comes with the data view component, and drag all the components of the outline tree into the data view component.
   
4. Bind the data model for the data view component, and then bind the data fields for the picture, text, and rich text components of the content details page in turn. After the binding is completed, we complete the construction of the content details page.
   

Implement the page jump logic from the content list to the content details page

1. Select the common container component in the list view of the enterprise portal home page, and click the Behavior Configuration button in the component configuration area on the right.
   
2. Configure an event for the normal container to jump to the content details page after clicking, and click the New Page Parameter below to create a page parameter named \_id.
   
3. After the page parameter is created, click the Data Binding button to the right of the page parameter.
   
4. In the data binding pop-up window, select the data identification field, and save it after the binding is complete.
   
5. Then select the data view component on the content details page , and click the data filter in the configuration area on the right to call up the data filter pop-up window.
   
6. In the pop-up window, set the filter condition as the data ID is equal to \_id and save it.
   
7. So far, we have completed the jump logic of jumping content details page from content list. Similarly, we can also implement the related logic of jumping content details page from dynamic list page in the same way.

Configure the bottom navigation of the app

Add a Tab bar component at the bottom of each page to implement the bottom navigation of the application. The Tab bar configuration is shown in the following figure:

Add top navigation to content details page

Go to the content details page, add a top navigation component, and move the top navigation component to the top of the outline tree.

Publish the app

So far, we have completed the construction of the enterprise portal application. Click Publish in the upper right corner and select the corresponding publishing platform to complete the application publishing.