Page, area and component templates developed in a front-end framework must be correctly linked to their Magnolia counterparts through mappings. The mappings are:
- JavaScript objects containing entries whose key is the template id string, and whose value is a direct JavaScript reference to the component type.
- Passed to the Magnolia SPA renderers to render content.
- Stored in the front-end project, close to template implementations.
Example component mapping
Below are two example Magnolia template definitions of a page component called title
, and their respective JavaScript (TypeScript) mappings in Angular and ReactJS components.
Mapping between Magnolia and Angular
Excerpted from: https://git.magnolia-cms.com/users/rsiska/repos/spa-angular-minimal/:
<magnolia-resource-dir>/light-modules/angular-magnolia-int/templates/components/title.yaml
title: Title component dialog: angular-magnolia-int:components/title
/spa-angular-minimal/browse/src/app/root.component.ts
constructor(private http: HttpClient, private router: Router, private rendererContext: RendererContextService) { this.rendererContext.setComponentMapping({ 'angular-magnolia-int:pages/home': HomeComponent, 'angular-magnolia-int:pages/about': AboutComponent, 'angular-magnolia-int:components/title': TitleComponent, 'angular-magnolia-int:components/componentWithArea': ComponentWithAreaComponent, 'angular-magnolia-int:components/navigation': NavigationComponent, }); // refresh the content on navigation event this.router.events.subscribe((event) => { if (event instanceof NavigationEnd) { this.getContent(event.url); } }
Mapping between Magnolia and ReactJS
Excerpted from: https://git.magnolia-cms.com/users/canh.nguyen/repos/magnolia-react-tutorial/
<magnolia-resource-dir>/light-modules/sample-light-module/templates/components/title.yaml
renderType: spa title: Title dialog: sample-light-module:components/title
/magnolia-react-tutorial/browse/src/environments/mapping.js
const COMPONENTS = { 'sample-light-module:components/title': Title, 'sample-light-module:components/text-image': TextImage, 'sample-light-module:components/nested': Nested, 'sample-light-module:components/navigation': Navigation }; export default COMPONENTS;
Overview
Content Tools