Component 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 rendererContext: RendererContextService) { this.rendererContext.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/
renderType: spa 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 as an argument of <Page directive>
:
<Page templateDefinitions={templateDefinitions} content={content} componentMappings={COMPONENTS}>