Page, area and component templates developed in a front-end framework must be correctly linked to their Magnolia counterparts through mappings. The mappings are:
- Passed to the Magnolia SPA renderers to render content.
- JavaScript objects containing entries whose key is the template id string, and whose value is a direct JavaScript reference to the component type.
- 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/:
Code Block |
---|
language | yml |
---|
title | <magnolia-resource-dir>/light-modules/angular-magnolia-int/templates/components/title.yaml |
---|
|
title: Title component
dialog: angular-magnolia-int:components/title |
Code Block |
---|
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/
Code Block |
---|
language | yml |
---|
title | <magnolia-resource-dir>/light-modules/sample-light-module/templates/components/title.yaml |
---|
|
renderType: spa
title: Title
dialog: sample-light-module:components/title |
Code Block |
---|
title | /spa-angular-minimal/browse/src/app/root.component.ts |
---|
|
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; |