Mapping between Magnolia and SPA components

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, ReactJS and Vue components.

The excerpts are adapted from the minimal-headless-spa-demos.

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,

...
    }
  };

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,

...
    }
};

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}>

Mapping between Magnolia and Vue

/spa/vue-minimal/src/magnolia.config.js
const config = {
  componentMappings: {
    // Pages
    'vue-minimal-lm:pages/basic': Basic,
    'vue-minimal-lm:pages/contact': Contact,

    // Components
    'spa-lm:components/headline': Headline,

  },
};

...

Additionally, to set the mappings, the config object must be passed to the EditablePage component:

/spa/vue-minimal/src/helpers/PageLoader.vue
import config from "../magnolia.config";
...
export default {
  name: "PageLoader",
  components: {
    EditablePage
  },
  data: function() {
    return {
      content: undefined,
      config,
      templateDefinitions: {}
    };
  },
...
};
Related topics

Some topics below may take you to a different part of the docs site and away from the current product-docs section.

Feedback

DX Core

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the DX Core docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules