# Imitation Box Horse - Home Module Configuration (4)

Technical Stack  
Appgallery Connect

Development Preparation In the previous article, we implemented the cloud-integrated navigation bar (Golden Section) module, successfully retrieved data from the cloud, and linked it with the ScrollBar for real-time position indication. As our home page grows with more content modules, manually adjusting or removing modules during each build becomes inefficient. To address this, we introduce a configuration table to dynamically control module visibility, allowing real-time adjustments without recompiling.

Code Implementation

1. Create Configuration Table (home\_activity\_setting) json { "objectTypeName": "home\_activity\_setting", "fields": \[ {"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true}, {"fieldName": "poster\_id", "fieldType": "Integer"}, {"fieldName": "banner\_id", "fieldType": "Integer"}, {"fieldName": "good\_left\_id", "fieldType": "Integer"}, {"fieldName": "good\_right\_id", "fieldType": "Integer"}, {"fieldName": "goods\_list\_id", "fieldType": "Integer"}, {"fieldName": "new\_people\_status", "fieldType": "Boolean"}, {"fieldName": "split\_layout\_status", "fieldType": "Boolean"}, {"fieldName": "banner\_status", "fieldType": "Boolean"}, {"fieldName": "goods\_list\_status", "fieldType": "Boolean"} \], "indexes": \[ {"indexName": "field1IndexId", "indexList": \[{"fieldName":"id","sortType":"ASC"}\]} \], "permissions": \[ {"role": "World", "rights": \["Read"\]}, {"role": "Authenticated", "rights": \["Read", "Upsert"\]}, {"role": "Creator", "rights": \["Read", "Upsert", "Delete"\]}, {"role": "Administrator", "rights": \["Read", "Upsert", "Delete"\]} \] }
    
2. Sample Data json { "cloudDBZoneName": "default", "objectTypeName": "home\_activity\_setting", "objects": \[ { "id": 1, "poster\_id": 1, "banner\_id": 1, "good\_left\_id": 1, "good\_right\_id": 1, "goods\_list\_id": 1, "new\_people\_status": true, "split\_layout\_status": true, "banner\_status": true, "goods\_list\_status": true } \] }
    
3. Entity Class (HomeActivitySetting.ets) typescript export class HomeActivitySetting { id: number; poster\_id: number; banner\_id: number; good\_left\_id: number; good\_right\_id: number; goods\_list\_id: number; new\_people\_status: boolean; split\_layout\_status: boolean; banner\_status: boolean; goods\_list\_status: boolean;
    
    constructor() { }
    
    // Getter methods for type mapping, class name, keys, etc. getFieldTypeMap(): Map<string, string> { let fieldTypeMap = new Map<string, string>(); // ... (mapping for all fields) return fieldTypeMap; }
    
    // Getter and setter methods for each field static parseFrom(inputObject: any): HomeActivitySetting { let result = new HomeActivitySetting(); if (!inputObject) { return result; } // ... (assignment for all fields) return result; } }
    
4. Database Class (home\_activity\_setting.db.ets) typescript import { cloudDatabase } from '@kit.CloudFoundationKit';
    

class home\_activity\_setting extends cloudDatabase.DatabaseObject { public id: number; public poster\_id: number; public banner\_id: number; public good\_left\_id: number; public good\_right\_id: number; public goods\_list\_id: number; public new\_people\_status: boolean; public split\_layout\_status: boolean; public banner\_status: boolean; public goods\_list\_status: boolean;

public naturalbase\_ClassName(): string { return 'home\_activity\_setting'; } }

export { home\_activity\_setting }; 5. Synchronize the table and data to the cloud database through the development tool. 6. Data Query and Dynamic Visibility Control typescript // Query logic in the home page component @State homeActivity: HomeActivitySetting\[\] = \[\];

async fetchHomeActivitySettings() { try { let databaseZone = [cloudDatabase.zone](http://cloudDatabase.zone)('default'); let condition3 = new cloudDatabase.DatabaseQuery(home\_activity\_setting);

let listData3 = await databaseZone.query(condition3); let json3 = JSON.stringify(listData3); let data3: HomeActivitySetting\[\] = JSON.parse(json3); this.homeActivity = data3; } catch (err) { hilog.error(0x0000, 'testTag', `Failed to query data, code: ${err.code}, message: ${err.message}`); } }

// Usage in build() method to conditionally render components build() { Column() { // Banner module (conditionally rendered) if (this.homeActivity\[0\]?.banner\_status) { BannerComponent() }

// Navigation bar (Golden Section) module if (this.homeActivity\[0\]?.split\_layout\_status) { SplitLayout({ listData: this.splitList }) }

// Other modules... } }

Implementation Result After querying the configuration data:

The navigation bar (Golden Section) is displayed when split\_layout\_status is true. Modify split\_layout\_status to false in the cloud database, and the navigation bar will dynamically disappear from the UI.

This completes the implementation of dynamic module visibility control for the home page, allowing real-time adjustments without app recompilation.