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
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 inmetadata
, for exampletitle
,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);
orsetFallbackComponent(<function-that-returns-false>);
then nothing is displayed. -
If
setFallbackComponent(true);
orsetFallbackComponent(<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:
-
A custom fallback component:
fallback.component.ts
-
A normal component:
title.component.ts