Page, area and component templates developed Components 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 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 template component implementations.
Example component mapping
Below are two is an example Magnolia template definitions definition of a page component called Title headline, and their respective JavaScript (TypeScript) mappings in Angular and ReactJS components.
Mapping between Magnolia and Angular
Excerpted Excerpts from: https://git.magnolia-cms.com/usersprojects/rsiskaDEMOS/repos/spa-angular-minimal/:minimal-headless-spa-demos/.
| Info |
|---|
To create a mapping, the important thing is the Magnolia template id of the template, a combination of the module name and the template path. |
For the following template definition, the Magnolia template id is spa-lm:components/headline
| Code Block |
|---|
| language | yml |
|---|
| title | <magnolia-resource-dir>/magnolia/light-modules/angularspa-magnolia-intlm/templates/components/titleheadline.yaml |
|---|
|
title: Title componentHeadline
dialog: angularspa-magnolia-intlm:components/titleheadline |
Mapping between Magnolia and Angular
| Code Block |
|---|
| title | /spa-/angular-minimal/browse/src/app/rootmagnolia.componentconfig.tsjs |
|---|
|
constructor(private http: HttpClient, private router: Router, private rendererContext: RendererContextService)export const config = {
this.rendererContext.setComponentMapping('componentMapping': {
'angular-magnoliaminimal-intlm:pages/homebasic': HomeComponentBasicComponent,
'angular-magnoliaminimal-intlm:pages/aboutcontact': AboutComponentContactComponent,
'angularspa-magnolia-intlm:components/titleheadline': TitleComponentHeadlineComponent,
'angularspa-magnolia-intlm:components/componentWithAreaimage': ComponentWithAreaComponentImageComponent,
'angularspa-magnolia-intlm:components/navigationparagraph': NavigationComponentParagraphComponent,
});
// refresh the content on navigation event
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
this.getContent(event.url);
}
} |
Mapping between Magnolia and ReactJS
Additionally, to set the mappings, setComponentMapping() must be called on the EditorContextService:Excerpted from: https://git.magnolia-cms.com/users/canh.nguyen/repos/magnolia-react-tutorial/
| Code Block |
|---|
| language | ymljs |
|---|
| title | <magnolia-resource-dir>/light-modules/sample-light-module/templates/components/title.yaml |
|---|
| renderType: spa
title: Title
dialog: sample-light-module:components/title| /spa/angular-minimal/src/app/root.component.ts |
|
this.editorContext.setComponentMapping(config.componentMapping); |
Mapping between Magnolia and ReactJS
| Code Block |
|---|
| title | /spa-angular/react-minimal/browse/src/app/rootmagnolia.componentconfig.tsjs |
|---|
|
const COMPONENTSconfig = {
'sample-light-module:components/titlecomponentMappings':{
'react-minimal-lm:pages/basic': TitleBasic,
'sample-light-module:components/text-image': TextImage,
react-minimal-lm:pages/contact': Contact,
'spa-lm:components/headline': Headline,
'samplespa-light-modulelm:components/nestedimage': NestedImage,
'samplespa-light-modulelm:components/navigationparagraph': Navigation
};
export default COMPONENTS;Paragraph,
...
}
}; |
Additionally, to set the mappings, the config object must be passed through the config argument of the<EditablePage/> component:
| Code Block |
|---|
| language | js |
|---|
| title | /spa/react-minimal/src/helpers/PageLoader.js |
|---|
|
import config from '../magnolia.config';
...
<EditablePage templateDefinitions={templateDefinitions} content={content} config={config}> |