Management Console Development Guide

Introduction

This tutorial will guide you to use the Cloud Development Platform, follow the steps, and in just 5 minutes implement a complete management console from scratch.

Target Result:

In this tutorial, you will learn:

✅ Three Core Capabilities

• Data Model Design and Implementation
• Build Management Console Pages
• Permissions and Layout Configuration

Before starting, it is recommended to clarify:

1. Data Management Objects (e.g., Products/Orders/Users)
2. Core Feature Pages (e.g., Data List/Form)
3. Usage Scenarios (e.g., PC Management/Data Display)

Additionally, a complete backend system should also include features such as login authentication and user permission management. This tutorial will follow the development process step by step as below:

Design Data Models Based on Requirements

A data model is like a table used to store and manage your data. You can think of it as an Excel spreadsheet, where each column represents a field and each row represents a piece of data.

Design Data Model

The following are simple steps for designing data models:

• Define the purpose of the table

  First, clarify what this table is used for. For example:

  • If it is for managing user information, the table can be named User Table
  • If it is for managing product information, the table can be named Product Table

• Design Fields (Columns)

  A field is a column in a table used to store different types of data. Common field types in the cloud development platform include:

  • Text: Used to store text, such as names and addresses
  • Number: Used to store numerical values, such as age and price
  • Date: Used to store time, such as registration time and birthday
  • Boolean: Used to store "yes/no" or "true/false" values, such as whether activated.
  • Enum: Used to store fixed options, such as status (Pending, Completed)

Example: We can design a Product Table as follows:

Field Name	Field Type	Description
Product Name	Text	Product name
Product Price	Number	Product unit price
Stock Quantity	Number	Product stock quantity
Product Category	Text	Product category
Product Description	Text	Detailed description of the product
Product Image	Text/Image	Link address of product images
Product Status	ENUM	Product status (listed/delisted)

Create Data Model

Cloud Development Platform provides multiple types of databases to meet different development needs:

Database Type	Description
Document-based	Uses the default document-based database of Cloud Development, suitable for rapid development and supports cloud database operation methods
MySQL-based	Uses the MySQL-based database of Cloud Development, supports structured data development, and can directly use native SQL commands
Self-managed MySQL	Connect to self-managed MySQL databases, only requiring them to be accessible via the public network

tip

If unsure which database type to choose, use the default configuration.

Since the current business scenario is a management system, it is more recommended to choose a MySQL-based database.

Create Manually

1. In the Cloud Development Platform, select the Database module, then click the "Add" button to start creating a data model

2. After selecting the database type, click "Next"

3. Enter the model name, add model fields, then click "Complete" to finish the creation

Product Table Example:

AI Creation

Cloud Development Platform also supports quickly generating data models via AI:

• Directly describe your requirements, and AI will generate the corresponding data model based on the scenario
• Alternatively, copy Excel spreadsheet data to AI to quickly generate a matching data model

⚠️ Note

After creation, the data model's default permission is "Only the creator and administrators have read/write access". If you want this data to be readable by everyone, you need to set the permission to "All users can read, only the creator and administrators can write".

Management Page Implementation

Quick Create

Based on the requirements of the management system, we recommend using the Quick Create method. The specific steps are as follows:

1. Open Cloud Development Platform, select the Visual Development module, switch to "Management Applications", and click "Create from Data Model".

2. Fill in the Application Name, select the Data Model, choose CRUD Page as the application scenario to quickly generate a management system.

Page Preview

After successful creation, you can immediately preview the generated management system page, which includes CRUD (Create, Read, Update, Delete) functionality for products by default.

3. Click "Back to Page Design" in the top-left corner to enter the visual editing page.

For more details about the editor, please refer to Tencent Cloud WeDa Low-Code Editor Introduction_Tencent Cloud

Page Navigation Layout Adjustment

After the application development is completed, you can follow the steps below to add a unified menu bar and adjust the page layout to better meet your needs.

For more layout-related information, please refer to Tencent Cloud WeDa Low-Code Application Layout_Tencent Cloud

1. Switch to Layout design

After completing application development, click the "Layout Design" module to enter the layout settings page.

2. Select a layout template

On the layout design page, select an appropriate layout template. Here we take "Left Navigation Layout" as an example:

• Left: Adjust icons and text in the header and footer.
• Right: Can configure the menu bar content.

3. Configure page layout

After setting the layout, return to the page design, select the page node, and configure the page layout properties for them to take effect.

Example as follows:

Page Component Adjustment

If you need to adjust page components, refer to the following steps:

For more details about the editor, please refer to Tencent Cloud Official Documentation

List Component

1. Add query conditions
   • Select the Data Table component
   • In the right property panel, locate the "Filter" property and click to add the required query conditions.

2. Add New Column

   • In the right property panel, locate the "Column Management" property

   • Add or adjust columns as needed

Example effect:

3. More Features

   To learn more about component properties and usage, please refer to the Component Usage Guide.

Form Component

1. Modify Layout

Adjust the page structure. Select the Form Container component and modify the Form Layout property.

Learn by Analogy

Similarly, we can create the following tables to enrich our management system:

• The "Product Category" table is used for categorized management and display of products.

• The "Carousel Management" table is used to manage carousel images in the application.

By following the above page creation method, you can quickly generate CRUD operations for three modules.

tip

If a product category table is added, an association relationship exists between "Product Category" and "Product". In this case, the "Product Category" field in the "Product" table should not be a text field for manual entry, but should be selected from the "Product Category". You can refer to this article for configuration: Association Relationship

Login Configuration

In the application settings, you can configure application access rules to control how users access the application. The cloud development platform provides the following three options:

Access Rule Options:

Access Rule	Remarks	Recommended Scenario
No Login Page	Direct access without login	Official websites, showcase pages and other scenarios that do not require login
Hosted Login Page	Public login page uniformly configured in the Authentication module	Multiple applications requiring a consistent login page
Use Independent Hosted Login Page	Independently configured login page	Configure a login page specifically for the current application

tip

If you are unsure whether to choose a hosted or independent login page, use the Independent Hosted Login Page first. You can switch later when multiple applications are involved.

Configure Independent Hosted Login Page

1. Go to Application Settings/Access Control

2. Select "Independent Hosted Login Page"

You can configure login methods for the Mini Program end and PC/H5 end separately, and customize the login page's title, logo, background color, etc.

3. After completing the configuration, click "Save" and republish the application

Configuring Hosted Login Page

1. Go to Application Settings/Access Control, select "Use Hosted Login Page", click "Save", and republish the application

2. Go to the Authentication module to configure "Hosted Login Page"

tip

After modifying the Hosted Login Page configuration, there is no need to republish the application; it will take effect automatically after 10 minutes.

User Permissions Configuration

If you need to assign different permissions to users when they log in to the application, you can configure it in the following location:

User Management

You can enter the User Management module in the Cloud Admin Console to categorize users (organizational structure management, role management)

Refer to the documentation: Tencent Cloud WeDa Low-Code Enterprise Internal Users_Tencent Cloud

Users in CloudBase are divided into two categories:

• Internal members: Have an organizational structure and allow setting roles for each user individually to control permissions
• External users: Cannot set role permissions individually and can only manage permissions uniformly

Role Management

You can assign corresponding roles to users and then set application or data permissions for the roles.

Refer to the documentation: Tencent Cloud WeDa Low-Code Predefined Roles_Tencent Cloud

Application Publishing

Publishing Process

1. After development is completed, click the "Publish" button in the upper-right corner of the editor to enter the publishing process.

2. Select the terminal type for publishing. Currently supports Mini Program, H5, and Web.

3. Choose whether to deploy to the cloud admin console. If unsure whether it's needed, select No.
   The Cloud Admin Console is the unified portal provided by the Cloud Development Platform, pre-configured with standard capabilities such as unified user login and message notifications, to better support enterprise application management and business operations management scenarios.

4. Select the release method: Trial Version, Production Version
   Use the Trial Version during the development phase and the Production Version for official launch, with data isolation between the two versions.

5. Select data source: Recommended to be consistent with the release method

6. Handle publishing check results

7. Click the 'Confirm' button

Differences in Release Methods

Release Method	Applicable Scenarios and Features
Trial Version	- Applicable scenarios: Trial testing before official application launch- Data display: Data from data models in the trial environment- Resource publishing: No need to publish resources like data models, roles, and workflows; they remain fully functional within the application
Production Version	- Applicable scenarios: Official launch after application development and testing are completed- Data display: Data from data models in the production environment- Resource publishing: Must publish resources such as data models, roles, and workflows for them to function properly within the application

Release Checks

Before release, the system will validate dependencies such as components, roles, and data sources of the application, and display a check prompt list. Please address them according to the prompts

The release can only be performed after the checks pass

Successful Release

After the application is successfully published, you can view its QR code and access domain. You may scan the code to access it or click the link to visit directly.

FAQ

• Data not visible after publishing the application

  After creation, the data model's default permission is "Only the creator and administrators have read/write access". If you want this data to be readable by everyone, you need to set the permission to "All users can read, only the creator and administrators can write".

• Official documentation not found

We recommend using copilot to ask questions. If the responses are not precise, you can refer to the following documentation.

Operation Guide: Tencent Cloud WeDa Low-Code Creating Applications_Tencent Cloud

Component Documentation: Component List | Tencent CloudBase - All-in-One Backend Cloud Service

Introduction to Expressions: Expressions | Tencent CloudBase - All-in-One Backend Cloud Service