Creating an area and the quotation component

Hello Magnolia

Areas and components help modularize a project and structure pages. Once areas and components are defined, you can reuse them in many page templates.

Let’s create an area with one component to add quotations. In the end, the whole page should look like this:

Final page view

An area is a place on a template where an author can add components. The area specifies which types of components can be added, and whether only one or multiple components can be added. Both page templates and component templates can contain areas. For example, a page template could contain a main area for placing primary page content and a sidebar area for related content.

A component is the smallest block of content that authors can create, edit, delete, and move as a single unit in the Magnolia Page Editor. The following are typical examples of a component:

Creating an area

Areas are defined in the page template definition.

The main area for the quotation component is defined and created when you execute the create-component command. You’ll create the area in the next section .

Creating the quotation component

Make sure you are at the root of your module (/magnolia/light-modules/hello-magnolia). Use the following CLI command to create the quotation component and make it available in the main area of the page template:

mgnl create-component quotation -a pages/hello@main

The command creates the following files:

  • /hello-magnolia/dialogs/components/quotation.yaml
    This definition configures the elements of the dialog.

  • /hello-magnolia/templates/components/quotation.yaml
    This definition gives the component a name and makes the component available to the system.

  • /hello-magnolia/templates/components/quotation.ftl
    The template script renders the content of the component.

The command also modifies the /hello-magnolia/templates/pages/hello.yaml file, in which it creates the main area and adds the availability of the quotation component by appending the following piece of code to it:

        id: hello-magnolia:components/quotation

Specify the location of the main area on the page

With @main, the mgnl create-component command also adds [@cms.area name="main"/] to the end of the hello.ftl page template script.

We want the main area just below the page heading. For this, edit the /hello-magnolia/templates/pages/hello.ftl template script and add a <div/> element with the area just below the <h1/> element:

<!DOCTYPE html>
<html xml:lang="${cmsfn.language()}" lang="${cmsfn.language()}">
    [ /]
    <link rel="stylesheet" type="text/css" href="${ctx.contextPath}/.resources/hello-magnolia/webresources/css/hello-style.css" media="all" />

    <div class="container ">
      <h1>${content.windowTitle!content.title!} works!</h1>
      <div class="main">
         [@cms.area name="main"/]


Configure the dialog fields

The CLI command mgnl create-component creates a dialog definition with field types that you do not need. Open the dialog definition file /hello-magnolia/dialogs/components/quotation.yaml for editing, and edit it to appear as follows:

      $type: richTextField
      i18n: true
      $type: textField
      i18n: true

Be careful with the type of whitespace in this code. All the whitespace to the left of the text should be formed using the SPACE character, not the TAB character. For more details on this topic, see the 6.1. Indentation Spaces section in YAML v1.2 specification.

The key content elements in the above dialogue definition – quotation (lines 3 to 5) and citedPerson (lines 6 to 8) – are stored in the JCR repository and rendered in the page by the following code, the component’s script.

Edit the component’s template script

Replace the quotation.ftl template script with the following code:

[#if content.quotation?has_content]
    [#if content.citedPerson?has_content]<cite>${content.citedPerson}</cite>[/#if]

The final structure of your hello-magnolia module in the light-modules folder should look like this:

β”œβ”€β”€ decorations/
β”œβ”€β”€ dialogs/
β”‚   β”œβ”€β”€ components/
β”‚   β”‚   └── quotation.yaml
β”‚   └── pages/
β”‚       └── hello.yaml
β”œβ”€β”€ i18n/
β”‚   └──
β”œβ”€β”€ includes
β”‚   └── README.txt
β”œβ”€β”€ templates/
β”‚   β”œβ”€β”€ components/
β”‚   β”‚   β”œβ”€β”€ quotation.ftl
β”‚   β”‚   └── quotation.yaml
β”‚   └── pages/
β”‚       β”œβ”€β”€ hello.ftl
β”‚       └── hello.yaml
└── webresources/
    └── css/
        └── hello-style.css

DX Core



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
6.3 beta

Magnolia 6.3 beta

Magnolia 6.3 is in beta. We are updating docs based on development and feedback. Consider the 6.3 docs currently in a state of progress and not final.

We are working on some 6.3-beta known issues during this phase.