Dynamic Layout Solution Using the Apollo Configuration Platform

With modular development becoming mainstream, many projects now integrate existing functional modules to reduce duplicate work and improve efficiency, but this introduces diverse customization needs, especially varied UI layout styles that are challenging for front‑end developers.

Pain Points

Multiple layout style requirements

Complexity of modifying module layouts

Low value of layout changes in production releases

Solution

Leveraging the Apollo configuration platform, a dynamic layout solution is designed with the following capabilities:

Rich controls: standard components, unlimited combinations, continuously expanding features.

Instant effect: simple configuration, WYSIWYG preview, direct online rendering.

No release dependency: cloud‑based configuration, gray‑scale publishing, platform‑ and version‑controlled activation.

Cross‑platform support: a single configuration adapts to multiple terminals via an elastic layout protocol.

Examples of business‑specific product detail pages are shown below.

Technical Implementation

The dynamic layout relies on the Apollo configuration platform, which delivers layout, logic, and data from the server. A Dynamic Layout SDK decouples and renders this information, enabling template reuse and significant development cost savings.

Platform Implementation Flowchart

The Dynamic Layout SDK transforms the hierarchical data from Apollo into front‑end pages by:

Parsing the JSON attrs for style parameters (margin, color, radius, etc.).

Parsing the JSON struct for view hierarchy (parent‑child relationships).

Recursively constructing components from the root (id=0) down to leaf nodes, generating a view model for each component.

Assembling the final component tree and rendering it.

Configuration Interface

The configuration page consists of three parts:

Control bar with common containers and functional components (text box, image box, etc.).

Layout creation area where controls are dragged onto a canvas; an "XML" button toggles a code view to inspect generated layout code.

Property panel for the selected component, allowing adjustments of name, size, margin, click events, and other attributes.

After saving the configuration, the layout is rendered on a real device as shown.

Parsing Process

The SDK parses the XML text delivered by Apollo into JSON, then generates the view hierarchy, binds data, registers events, and finally renders the view.

Overall Flowchart

Rendering on Mobile Devices

The platform sends layout data as XML, which is fetched, converted to JSON, and then used by language‑specific rendering methods to generate the final UI on mobile devices.

Conclusion

The Apollo dynamic layout solution efficiently supports diverse business layout demands, automatically renders floor styles on the client without additional coding, reduces release overhead, offers rich component types, and provides flexible layout attributes with a true‑WYSIWYG experience.