Mapping between Magnolia and SPA components
- Related topics
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 and ReactJS components.
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
/magnolia/light-modules/spa-lm/templates/components/headline.yaml
title: Headline
dialog: spa-lm:components/headline
Mapping between Magnolia and Angular
/spa/angular-minimal/src/magnolia.config.js
export const config = { 'componentMapping': { 'angular-minimal-lm:pages/basic': BasicComponent, 'angular-minimal-lm:pages/contact': ContactComponent, 'spa-lm:components/headline': HeadlineComponent, 'spa-lm:components/image': ImageComponent, 'spa-lm:components/paragraph': ParagraphComponent, ... } };
Additionally, to set the mappings, setComponentMapping()
must be
called on the EditorContextService
:
/spa/angular-minimal/src/app/root.component.ts
this.editorContext.setComponentMapping(config.componentMapping);
Mapping between Magnolia and ReactJS
/spa/react-minimal/src/magnolia.config.js
const config = { 'componentMappings':{ 'react-minimal-lm:pages/basic': Basic, 'react-minimal-lm:pages/contact': Contact, 'spa-lm:components/headline': Headline, 'spa-lm:components/image': Image, 'spa-lm:components/paragraph': Paragraph, ... } };
Additionally, to set the mappings, the config
object must be passed
through the config
argument of the`<EditablePage/>` component:
/spa/react-minimal/src/helpers/PageLoader.js
import config from '../magnolia.config';
...
<EditablePage templateDefinitions={templateDefinitions} content={content} config={config}>