This documentation is still in progress. We are working hard to update all our screenshots to the new Magnolia 6 style. Please bear with us.

Page tree
Skip to end of metadata
Go to start of metadata

This tutorial guides you through the process of creating a content app in Magnolia. The app you create is called the Bookshelf app and you create it as a Magnolia light module from a custom content type definition.

Tutorial overview

The tutorial consists of three pages:

Going through the tutorial you will learn:

  • How to define content types and use them to quickly create a content app.
  • The basics of configuring fields and setting field validators.
  • How to override configuration properties.
  • How to make the elements of the app's UI ready for internationalization.

If you want to skip the tutorial and install the final app immediately, clone the repository containing the ready-made Bookshelf app as a light module directly into your Magnolia light module folder with the command:

git clone https://git.magnolia-cms.com/scm/documentation/bookshelf.git

Bookshelf app use case

The Bookshelf app you create in this tutorial is an example of content app. It is a simple book catalog allowing the user to store bibliographic data about each book: its title, the names of the author(s), publisher's name and the ISBN-13 number. The app also allows you to group selected book items into folders called shelves in the app. 

What is a content app?

A Content app is a specialized app type for managing structured content. The content app user interface consists of a browser subapp and one or more detail subapps. Content apps make it easy to enter items such as products or events. Many native Magnolia apps such as Tours and Contacts are content apps. Because this app style is used often, the framework provides convenience classes to make building a content app faster.

Bookshelf app subapps

The Bookshelf app consists of two subapps.

Book browser

In the Book Browser subapp, you can:

  • Browse in the book catalog.
  • Add, rename and delete books.
  • Add, rename and delete shelves (folders for organizing books).

Book detail

The Book Detail subapp is a place where you can create and edit a book's bibliographic properties using text fields and a checkbox field.

Book properties

For each book item, the Bookshelf app stores and retrieves the following content properties:

  • Short cataloging name (a required content property).
  • Full book title.
  • Author(s)' name(s).
  • Whether the author(s) role is editorial or not.
  • Book description.
  • Publisher's name.
  • ISBN-13 number.

Bookshelf app and Magnolia content types

The Bookshelf app is based on Magnolia content types. Expand the following link to see more details about the app's design parameters.

 Click to see details.

The books workspace

Magnolia stores content in the magnolia repository, a JCR repository that is divided into workspaces. We will store all of our book items in a new workspace called books.

Custom lib:book content type

In the books workspace, we will store each book item under a node (content) type called lib:book.

Content properties in the content type model

Each book item of the lib:book type will have the following content properties:

Property nameUsageData typeRestriction

authors

Name(s) of the author(s) of the book.Stringnone
edThe property to store the true value if the primary role of the Author(s) is editorial.Booleannone
titleOfficial book title.Stringnone
descriptionDescription of what the book is about.String5000 characters max.
publisherBook publisher's name.Stringnone
publish_dateDate of publication of the book.Date

Display format:

YYYY-MM-DD


isbn13International Standard Book Number in the 13-character variant.String

13 characters

  • The first 12 characters can only be numerals, the last character can be a numeral or "X".
  • The first three numerals can only be either "978" or "979".
  • We don't need to perform the validity check against the number's checksum digit.
The name property

When you create an app from a content type definition, the name property is generated automatically. Then the JCR node name is automatically deduced from the name.

We make use of this auto-generated name property in the Bookshelf app by:

  • Setting it to be a required property.
  • Referring to it via the Cataloging name label in user dialogs.
  • Using it for creating a short and hyphenated book identifier (JCR node name) such as:

    Hawking-2005-God-Created-the-Integers

    Therefore, in the Bookshelf app, the data in the Cataloging name field must be entered using the following syntax:

    <first-author's-surname> <publication-year> <short-form-of-the-book's-full-title>

    For example:

    Hawking 2005 God Created the Integers

    Magnolia automatically replaces the spaces with hyphens when creating a node name from the name property.


Book data in the books workspace and in the Book Detail subapp

Compare the following images, which show an example book item of type lib:book and its various bibliographic data stored in the books repository as seen through the interface of JCR Browser app (on the left), and the book data in the fields of the Book Detail subapp (on the right). Note especially the correspondences between the property names in the books workspace and the fields in the Book Details tab:

On the next page, you create a basic Bookshelf app.