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 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/src/app/rootmagnolia.componentconfig.tsjs |
---|
|
constructor(private http: HttpClient, private router: Router, private rendererContext: RendererContextService) {
this.rendererContext.setComponentMapping(export const config = {
'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/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}> |