Magnolia 5.3 reached end of life on June 30, 2017. This branch is no longer supported, see End-of-life policy.

Page tree
Skip to end of metadata
Go to start of metadata

Inheritable components are added on a parent page and are automatically displayed on child pages. This is an example of content reuse that saves time and effort and helps display consistent information across the site.

An editor can add an inheritable component at a section page, for example. The component will be displayed on each child page in that section. The component is only editable on the parent page; the component has no toolbar on the child pages. Inheritance is configurable and requires no coding. Promos are a common example of inheritable component. Promos are used to promote special events or deals. Since promotional content changes often, you want to edit them once and have the change reflected on the whole site.

Enabling inheritance for an area

Inheritance is enabled and configured at area level as opposed to component level, and it is available in all areas. There are different component behavior options. In the demo websites, inheritance is enabled in the footermetaNavigationpromosextras and sectionHeader areas by default.

Inheritance is typically configured in the template prototype where the area is defined globally. This sets the behavior for all configured sites. We use this configuration location in the examples below. It is also possible to configure inheritance in the site definition for a particular site or in the template definitions for a particular template.

The enabled property in the area definition enables inheritance for components in the area. Set the value to true or false.

Node nameValue

 default

 

 templates

 

 prototype

 

 areas

 

 promos

 

 availableComponents

 

 inheritance

 

 components

filtered

 enabled

true

Selecting components to inherit

The components property defines which components in the area are inherited. The implementing class  ConfiguredInheritance  provides three options:

  • none: No components are inheritable. This has the same effect as disabling inheritance by setting the enabled property in the area to false.
  • filtered: Components added to the area are inherited to child pages only if the Show in subpage box is checked in the component dialog.

all

When the components property is set to all, all components in the area are automatically inherited to child pages. The metaNavigation area is an example of this behavior.

Node nameValue

 default

 

 templates

 

 prototype

 

 areas

 

 branding

 

 areas

 

 metaNavigation

 

 inheritance

 

 components

all

 enabled

true

The metaNavigation area and its components can only be edited on the home page.

The area and all its components are inherited to child pages where they are not editable.

filtered

When the components property is set to filtered, making a component inheritable is an editorial decision. The extras1 area is an example of this behavior.

Node nameValue

 default

 

 templates

 

 prototype

 

 areas

 

 extras

 

 areas

 

 module

 

 extras1

 

 inheritance

 

 components

filtered

 enabled

true

To make the component inherit to child pages the editor checks the Show in subpage box in the component dialog. This creates an inheritable property under the component in the website workspace and sets the value to true. Only nodes with the property set to true are inherited to child pages.

To provide editors with this option, add a Show in subpage field to your component's dialog definition. Magnolia provides a generic field /modules/standard-templating-kit/dialogs/generic/controls/inheritable that you can extend. The example below shows how the stkExtrasInternalPage component dialog extends the generic field.

Node nameValue

 components

 

 extras

 

 stkExtrasInternalPage

 

 form

 

 tabs

 

 tabTeaser

 

 fields

 

 inheritable

 

 extends

/modules/standard-templating-kit/dialogs/generic/controls/inheritable

The "Articles" extra component below is an example what an inherited component looks like on a child page. You can tell it is inherited because it does not have a toolbar. The "History" component below it has a toolbar because it is not inherited.

You can view a component's properties in Tools > JCR. Here the inheritable property is true under the component node.

Example: Enabling inheritance in the base area

The base area can contain optional components that use the full width of the page such as a tag cloud or a carousel. By default, inheritance is not available in the base area. Here is how to enable it.

Enable inheritance in the template prototype

To enable inheritance in the template prototype:

  1. Go to STK > Site Definitions /default/templates/prototype/areas/base
  2. Add a new node inheritance.
  3. Under inheritance, add a property enabled and set it to true.
  4. Under inheritance, add a property componentsand set it to:
Node nameValue

 default

 

 templates

 

 prototype

 

 areas

 

 base

 

 inheritance

 

 components

filtered

 enabled

true

Add the Show in subpage checkbox to component dialogs

If you set the components property to filtered above, add Show in subpage checkbox to the component dialogs. Two kinds of components are available in the base area: stkTeaserCarousel and catCloudWide. You will find their dialogs in:

  • /modules/categorization/dialogs/catCloud
  • /modules/standard-templating-kit/dialogs/components/teasers/stkTeaserCarousel

To add the checkbox:

  1. Under fields, add a new node inheritable.
  2. Under inheritable, add a property extends and set it to /modules/standard-templating-kit/dialogs/generic/controls/inheritable. You are extending the generic Show in subpage checkbox control.
Node nameValue
 modules 

 categorization

 

 dialogs

 

 catCloud

 

 form

 

 tabs

 

 tavMain

 

 fields

 

 catCloudTitle

 

 catCloud

 

 order

 

 inheritable

 

 extends

/modules/standard-templating-kit/dialogs/generic/controls/inheritable

The base area is not the only place where editors can add the stkTeaserCarousel component. The component is also available in the main area on the stkSection template. When you add the Show in subpage checkbox in the component dialog, editors will also see the field when adding the component to the main area. Since inheritance is only configured in base this is not intuitive. To work around this issue add a note next to the checkbox field using the description property, for example "This option is only applicable to base area". Alternatively, you can configure two different components and dialogs, one for each area. For more information about configuring dialog definitions and assigning them to components see Dialog definitions.

Test

To test, add a component in the base area on the home page. If your components property is set to filtered, check the Show in subpage checkbox in the component dialog. Verify that the component is inherited to child pages. Verify also that the component does not have a toolbar on the child pages.

Implementation classes

Classes that make inheritance possible are:

  • AreaElement : Renders an area and provides the isInherit() method.
  • DefaultInheritanceContentDecorator : Provides an inheritance model that can be customized with configuration on the nodes. Inheritance can be completely turned off or inheritance of nodes or properties can be turned off separately.
  • InheritanceConfiguration : Provides an inheritance configuration that allows separate configuration of properties and components. Can also control whether specific components are included and their final order.
  • ConfiguredInheritance : Defines inheritance behavior and allows for enabling of inheritance.