When the default layout of an object-related page cannot meet business requirements, you can use layout enhancement to insert custom components into specific page areas and add display and interaction capabilities.

Typical scenarios include:

• Add business analysis cards to an object detail page
• Add auxiliary display modules to an object list page
• Add custom form areas to an object create/edit page

Applicable Scenarios

This approach is suitable when an object-related page already exists, but its original layout and presentation capabilities are insufficient and additional custom display blocks or interaction modules are needed.

Applicable Pages

• Object detail pages
• Object list pages
• Object create/edit pages

When to Use Layout Enhancement

If you encounter the following requirements, layout enhancement is usually the preferred option:

• You want to add new display blocks to an existing page
• You want to insert charts, cards, status descriptions, or externally embedded content
• You want to turn certain high-frequency actions into local interaction modules
• You want to improve information presentation without changing the overall structure of the object page

Development Approach

Layout enhancement can usually be understood in three steps:

1. Identify the enhancement scenario and the target area
2. Develop the custom component
3. Publish the component and configure it on the target page

Development Workflow

1. Clarify the Scenario and Component Goal

   Before you begin, confirm the following:

   • Which page will the component be placed on?
   • Is the component for display enhancement or interaction enhancement?
   • What input data does the component need?
   • Does the component need to interact with the host page?

2. Create the Component

   Go to the admin console to create a custom component and fill in the component name, supported terminal, component type, and the applicable scope for object pages.

   On the Web side, components are generally developed as Vue 2 components. On the mobile side, mini program components are generally developed in the online IDE.

   

   

3. Write the Component Code

   During component development, prioritize the following:

   • Page structure (template)
   • Data input (properties / context)
   • Interaction behavior (events and callbacks)
   • Style presentation

4. Publish and Configure It on the Page

   After development is complete, publish the component and mount it in the corresponding area through the target page designer or scenario configuration.

   

   

5. Online Preview and Debugging

   • Mobile: use the Preview button in the upper-right corner of the online IDE to view the result
   • Web: use the local development environment and browser debugging tools to inspect the result

Recommended Entries

Mobile

• Component Guide
• Mobile Component Overview

Web

• Component Guide
• Web Component Overview

FAQ

Q: When should I use layout enhancement instead of directly modifying a plugin?

If your goal is mainly to add a new display block or a local interaction module, prefer layout enhancement.
If your goal is to modify the existing content and behavior of the host page, prefer plugins.

Q: Is layout enhancement suitable for complex business pages?

Yes, but it is recommended to split a complex page into multiple components instead of putting all logic into a single component.

Q: What is the relationship between layout enhancement and custom pages?

Layout enhancement is more suitable for adding a block of content to an existing object page. If you need to organize an entire page from scratch, that usually falls outside the current object-page scenario.

Next Step

• To further distinguish between components and plugins, see the Component Guide and the Plugin Guide