Component developed Components developed in a front-end framework must be correctly linked to their Magnolia counterparts through mappings. The mappings are:
...
Example component mapping
Below are two is an example Magnolia template definitions definition of a 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: spa-lm:components/headline |
Mapping between Magnolia and Angular
| Code Block |
|---|
| title | /spa-/angular-minimal/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| /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/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,
...
}
}; |
AdditionallyAdditionally, to actually set the mappings, the COMPONENTS config object must be passed as an through the config argument of <Page directive>the<EditablePage/> component:
| Code Block |
|---|
| language | js |
|---|
| title | /spa/magnolia-react-tutorialminimal/src/apphelpers/component/HomePagePageLoader.js |
|---|
|
<Pageimport config from '../magnolia.config';
...
<EditablePage templateDefinitions={templateDefinitions} content={content} componentMappingsconfig={COMPONENTSconfig}> |