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

A component is the smallest block of content that editors can edit, delete and move as a single unit. Think of a component as content that "belongs together". When you look at a typical Magnolia page, you can identify components easily. At its simplest, a component is just a heading and some text that go together.

Each component can be used on several pages and in several areas. Within an area, editors choose the components to add from a list. The list is limited to display only the components that are available in that particular area as defined in the availableComponents node. This page explains the aspects of

Creating a component definition

The textBlock component is a very simple example. It renders any text entered by the editor.

Node name

Value

 modules

 

 templating

 

 templates

 

 components

 

 textBlock

 

 dialog

templating:textBlock

 renderType

freemarker

 templateScript

/templates/components/textBlock.ftl

 title

Text Block

Creating a component script

A component script renders the content of the component. For our example component the content is just some text. The script reads the text from the repository and renders it.

  1. On your computer, browse to /<CATALINA_HOME>/webapps/<contextPath>/templates, typically this is /apache-tomcat/webapps/magnoliaAuthor/templates.
  2. Create a new folder components.
  3. In components, create a new text file textBlock.ftl.
  4. Open the file in a text editor and copy the following script to it.

Freemarker:

<p>
   ${content.text!}
</p>

JSP:

<p>
   ${content.text}
</p>

The script renders the value of the text property from the current content object. In this case the content object is not the Hello page node but the component node.

Creating a component dialog

A component dialog allows editors to edit the content of the component. You can find many examples of component dialogs in the Standard Templating Kit. Look in Templating Kit > Dialog Definitions > /components.

Node nameValue

 modules

 

 templating

 

 dialogs

 

 textBlock

 

 actions

 

 cancel

 

 class

info.magnolia.ui.admincentral.dialog.action.CancelDialogActionDefinition

 label

Cancel

 save

 

 class

info.magnolia.ui.admincentral.dialog.action.SaveDialogActionDefinition

 label

Save changes

 form

 

 tabs

 

 text

 

 fields

 

 text

 

 class

info.magnolia.ui.form.field.definition.TextFieldDefinition

 label

Component text

 rows

5

 label

Text block

If you didn't make the component available yet, do it now.

Adding a component on the page

Now you have all that is required to add a component on the page: the component is defined, has a script and a dialog, and it is available in the main area.

To add a component on the page:

  1. Reload the Hello page.
  2. Click the main area placeholder.
  3. Click the plus button in the toolbar to add a component.
  4. Select the Text Block component and click OK.
  5. Type some text into the Component text box.
  6. Save.

The component is rendered on the page.

Components also have toolbars. Click the containing area toolbar to see them.

Since the main area is of type list, you can add multiple components to it. Add a few more more and change their order by dragging the component toolbar.

Component content is stored in the website repository. Each component has a content node and properties under it. You can view them in the JCR Browser.

Next: Activating to public instance