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 are two example Magnolia template definitions of a component called
title
, and their respective JavaScript (TypeScript) mappings in Angular and ReactJS components.
Mapping between Magnolia and Angular
Excerpted from: https://git.magnolia-cms.com/users/rsiska/repos/spa-angular-minimal/:
title: Title component
constructor(private http: HttpClient, private router: Router, private editorContext: EditorContextService) { this.editorContext.setComponentMapping({ 'angular-magnolia-int:pages/home': HomeComponent, 'angular-magnolia-int:pages/about': AboutComponent, 'angular-magnolia-int:components/title': TitleComponent, 'angular-magnolia-int:components/componentWithArea': ComponentWithAreaComponent, 'angular-magnolia-int:components/navigation': NavigationComponent, }); }
Mapping between Magnolia and ReactJS
Excerpted from: https://git.magnolia-cms.com/users/canh.nguyen/repos/magnolia-react-tutorial/
title: Title
const COMPONENTS = { 'sample-light-module:components/title': Title, 'sample-light-module:components/text-image': TextImage, 'sample-light-module:components/nested': Nested, 'sample-light-module:components/navigation': Navigation };
Additionally, to actually set the mappings, the COMPONENTS
object must be passed through the config
argument of <Page directive>
:
const config = { componentMappings: COMPONENTS }; ... <Page templateDefinitions={templateDefinitions} content={content} config={config}>