Mapping between Magnolia and SPA components
Components 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 is an example Magnolia template definition of a component called headline, and their respective JavaScript (TypeScript) mappings in Angular, ReactJS and Vue components.
| The excerpts are adapted from https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/. |
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
title: Headline
dialog: spa-lm:components/headlineMapping between Magnolia and Angular
export const config = {
'componentMapping': {
'angular-minimal-lm:pages/basic': BasicComponent,
'angular-minimal-lm:pages/contact': ContactComponent,
'spa-lm:components/headline': HeadlineComponent,
...
}
};
Additionally, to set the mappings, setComponentMapping() must be
called on the EditorContextService:
this.editorContext.setComponentMapping(config.componentMapping);Mapping between Magnolia and ReactJS
const config = {
'componentMappings':{
'react-minimal-lm:pages/basic': Basic,
'react-minimal-lm:pages/contact': Contact,
'spa-lm:components/headline': Headline,
...
}
};Additionally, to set the mappings, the config object must be passed
through the config argument of the <EditablePage/> component:
import config from '../magnolia.config';
...
<EditablePage templateDefinitions={templateDefinitions} content={content} config={config}>Mapping between Magnolia and Vue
const config = {
componentMappings: {
// Pages
'vue-minimal-lm:pages/basic': Basic,
'vue-minimal-lm:pages/contact': Contact,
// Components
'spa-lm:components/headline': Headline,
},
};
...Additionally, to set the mappings, the config object must be passed to the EditablePage component:
import config from "../magnolia.config";
...
export default {
name: "PageLoader",
components: {
EditablePage
},
data: function() {
return {
content: undefined,
config,
templateDefinitions: {}
};
},
...
};