Page History

...

Create a component definition:

Dialog definition

Create a dialog with the following fields:

• title for the cars section on the page.
• subText to enter some introduction text about this particular selection of cars.
• productFolderRef link field that allows the user to select a folder of cars from the Products app. The template displays all cars from the selected folder.
• sectionName to display in the navigation menu.

Template script

The template script should do the following things:

...

To understand what the script needs to output, have another look at the static HTML prototype:

Turning this into a FreeMarker script we end up with:

In the script we make heavy use of  cmsfn and  damfn  templating functions. They make common templating tasks such as creating links easier:

• Line 16: cmsfn.contentById(content.productFolderRef, "products") gets the folder of cars the user selected. You can find the folder in the products  workspace using its unique ID (UUID) which is stored in the productFolderRef property.
• Line 18: cmsfn.children(productFolder, "mgnl:product") builds a list of cars in the selected folder.
• Line 21: damfn.getAsset(product.image!"") gets an asset from the Magnolia DAM. This is the car photo. It is linked to the car (product) by the image property.
• Line 28: damfn.getAssetLink(product.image, "large") builds a hyperlink to the asset so we can display a car image on the page. We also pass a variation name large that you will create in Using a site definition.
• Line 44: cmsfn.decode(product).description decodes content entered in the rich text field. See: Decode text.

Make the component available to the page template

Components are meant to be added to areas which are defined in a page template.

Edit the template definition of the page template main and make the new component available at the content-sections area:

templateScript: /one-pager-module/templates/pages/main.ftl
renderType: freemarker
visible: true
title: One pager template
dialog: one-pager-module:pages/main
areas:
  content-sections:
    availableComponents:
      content-items-list:
        id: one-pager-module:components/content-items-list

Now you can use the component.

Add the component on the page

Add the new component on the page. In the dialog, select the the /cars/classics folder from the Products app. Add another component using cars from the the /cars/007 folder.

Added files overview

...

 one-pager-module/
├── dialogs/
│   ├── components/
│   │   ├── content-items-list.yaml
└── templates/
    └── components/
        ├── content-items-list.ftl
        └── content-items-list.yaml

...

Next: Creating a text and image component