Versions Compared

Old Version 1

changes.mady.by.user Christoph Meier

Saved on

compared with

New Version Current

changes.mady.by.user Martin Drápela

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Make sure you have installed Magnolia before starting. We also assume you have read and understood the concepts explained in Magnolia basics for front-end developers.

Download the light module

Download this zip:

Aui button
TypeNormal
IconClassaui-iconfont-devtools-clone

Artifact guess (!) resource link
artifactFileNameProposed$artifactId-$version.zip
groupIdinfo.magnolia.documentation
artifactIdhello-magnolia
label$artifactId.zip
renderTypedownload_link

...

If you haven't already done so, make sure that Magnolia is started and log in. 

Include Page
DOCS56:_LoginDOCS56:
_Login

View the module files in the Resource Files app

...

The template script contains the rendering instructions. A script can be completely static but it usually includes editable content fragments or other dynamically assigned values provided by templating functions (for instance cmsfn to fetch content) or Rendering context objects. Here we use FreeMarker to create template scripts.

...

Code Block
- name: quoteSource
         class: info.magnolia.ui.form.field.definition.TextFieldDefinition
         label: Quotation source

Include Page
_reference fields by name
_reference fields by name

Edit your component on your Hello Magnolia page. You see the field you added at the bottom of the dialog. 

...

Tip

Alternatively, you can use  resfn  to link to all the CSS files in the hello-magnolia module by replacing lines 8 and 9 with a pattern such as:

Code Block
${resfn.css("/hello-magnolia/.*css")}

...

Now you have completed this tutorial, have a look at:

  • Hello Magnolia - A step by step walkthrough of creating the Hello Magnolia light module.
  • CLI overview - Watch the CLI Video to learn how to quickly create modules, and page and component templates.
  • Magnolia CLI walkthrough - Walks you through the basic steps and commands required to create a Magnolia light module using our CLI and reuse an exisiting module from npm. 
  • Working with images in Magnolia - Learn how to handle images with Magnolia, including both storing the image or a reference to an asset with a dialog and rendering the image in a template script.
  • Creating a website with Magnolia - Learn how to create templates and how to display content from a content app.

...