Magnolia 5.7 reached extended end of life on May 31, 2022. Support for this branch is limited, see End-of-life policy. Please note that to cover the extra maintenance effort, this EEoL period is a paid extension in the life of the branch. Customers who opt for the extended maintenance will need a new license key to run future versions of Magnolia 5.7. If you have any questions or to subscribe to the extended maintenance, please get in touch with your local contact at Magnolia.
Light developers can use the create-component
command in the Magnolia CLI to create page templates.
A component is the smallest block of content that editors can edit, delete and move as a single unit on the page. A component definition is similar to a page definition and uses the same definition object. You can configure a template in a YAML file or a JCR node.
At its simplest, a component may be just text. However, a component can contain almost anything: a related image, a list of links or a teaser to another page. Components render content entered by editors in dialogs
Component properties
Simple example definition:
renderType: freemarker templateScript: /my-module/templates/components/text.ftl dialog: my-module:components/text modelClass: com.example.templates.TextComponentModel deletable: false moveable: false personalizable: false class: com.example.templates.TextComponentDefinition
Node name | Value |
---|---|
text | |
class | com.example.templates.TextComponentDefinition |
deletable | false |
dialog | my-module:components/text |
modelClass | com.example.templates.TextComponentModel |
moveable | false |
personalizable | false |
renderType | freemarker |
templateScript | /my-module/templates/components/text.ftl |
You can use common template properties and the following properties in a component definition:
deletable | optional, default is Determines if component can be deleted. Set to |
escapeHtml | optional, default is Escapes any HTML code entered into the component if the component contains an input field. This is a security feature that prevents XSS attacks. Default is |
fragmentDefinition | optional (EE only) Allows you to mark a component as dynamic. See Advanced Cache Dynamic Page Caching and SiteMesh module. Properties:
|
moveable | optional, default is Determines if component can be moved. Set to |
personalizable | optional (5.4.9+ EE Pro), default is Determines if component can be personalized. Set to |
writable | optional, default is Determines if component can be edited. Set to |
Location of component definitions
Put your component definitions here:
- YAML file:
$magnolia.home/<module-name>/templates/components
- JCR node:
/modules/<module-name>/templates/components
Component templates can be provided by more than one module, and you can configure new component definitions in existing modules.
Component availability
Component availability is configured in an area definition. The area can then be used on many page definitions.
Configure a content map of components in each area definition using the id
property to link to the component definition. See Restricting component availability in an area template.
Nested components
You can create composite components with nested subcomponents. The nested components are configured under an areas
item or node. This part of the configuration follows the same pattern as an area definition.
Example: Two link components inside a composite link list component.
renderType: freemarker templateScript: /my-module/components/linkList.ftl dialog: my-module:components/compositeLink i18nBasename: info.magnolia.module.my-module.messages title: components.compositeLink.title description: components.compositeLink.description areas: linkList: type: list templateScript: /my-module/components/linkList.ftl title: components.compositeLink.title description: components.link-list.description availableComponents: internalLink: id: my-module:components/internalLink externalLink: id: my-module:components/externalLink
Node name | Value |
---|---|
compositeLink | |
areas | |
linkList | |
availableComponents | |
internalLink | |
id | my-module:components/internalLink |
externalLink | |
id | my-module:components/externalLink |
templateScript | /my-module/components/linkList.ftl |
type | list |
dialog | my-module:components/compositeLink |
renderType | freemarker |
templateScript | /my-module/components/linkList.ftl |
Nodes and properties:
<component name> | |
| Marks the configuration as an area. |
| |
| Components available in the area. |
| Map of nested components available in the area. |
| Component definition ID in <module-name>:<path to component definition> format. |
| All properties available in list and single area definitions can be used. |
| All properties available in component definitions can be used. |