Component developed 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 SPA renderers JS libraries to render content.
- Stored in the front-end project, close to 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,
...
});
} |
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/magnolia-react-tutorialminimal/browse/src/environments/mappingmagnolia.config.js |
---|
|
const COMPONENTSconfig = {
'sample-light-module:components/title'componentMappings':{
'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
};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}> |