Fallback component

Existing content can be rendered in a page even if the frontend component has not been built or provisioned yet. This functionality is handled by the fallback component. Introduced with version 1.3.1 of the Magnolia front-end helpers, fallback components receive metadata properties in the metadata property and the other properties in the data property.

There is a default fallback component in each of the helper libraries. See, for example, the one for Angular named default-fallback.component.ts.

Usage

  • Angular

  • React

  • Vue

Add the following line to root.component.ts.

this.editorContext.setFallbackComponent(value);

In App.js, use the value in the config object in the fallbackComponent attribute:

<EditablePage templateAnnotations={data.templateAnnotations} content={data.content} config={config} />

In PageLoader.vue, the SPAs must set the fallbackComponent in the config object:

this.config.fallbackComponent = value

The value can be one of the following:

  • A function that returns a component or a boolean value.

  • A boolean value.

Using the default fallback component

To use the default fallback component, you must set the fallbackComponent to the true value or to a function that returns the true value.

Using a custom fallback component

You can also define and use your own custom fallback component. A custom fallback component receives two properties:

  • metadata, for example @path, mgnl:template.

  • data, which includes all properties not included in metadata, for example title, text, image and so on.

To use a custom fallback component, you must set the fallbackComponent to a function that returns the custom fallback component.

In Angular (and by analogy also in React and Vue)

  • If setFallbackComponent(false); or setFallbackComponent(<function-that-returns-false>); then nothing is displayed.

  • If setFallbackComponent(true); or setFallbackComponent(<function-that-returns-true>); then the default fallback component is displayed.

  • If setFallbackComponent(<function-that-returns-a-component>); then the component is displayed.

Examples

Examples in the angular-sample in the Magnolia frontend-helpers repository:

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