Component developed in a front-end framework must be correctly linked to their Magnolia counterparts through mappings. The mappings are:
- A JavaScript object 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 JS libraries to render content.
- Stored in the front-end project, close to component 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/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,
});
}
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/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
};
Additionally, to actually set the mappings, the COMPONENTS object must be passed as an argument of <Page directive>:
/magnolia-react-tutorial/src/app/component/HomePage.js
<Page templateDefinitions={templateDefinitions} content={content} componentMappings={COMPONENTS}>
Overview
Content Tools