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
textBlock component is a very simple example. It renders any text entered by the editor.
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.
- On your computer, browse to
/<CATALINA_HOME>/webapps/<contextPath>/templates, typically this is
- Create a new folder
components, create a new text file
- Open the file in a text editor and copy the following script to it.
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 >
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:
- Reload the Hello page.
- Click the main area placeholder.
- Click the plus button in the toolbar to add a component.
- Select the Text Block component and click OK.
- Type some text into the Component text box.
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.