Part II - Creating a basic content app
This page is the second part of the My first content app tutorial and describes how to configure and create a basic Bookshelf, a Magnolia content app. The configuration is done using Magnolia content types – formal definitions for types of content in Magnolia including the properties the type may contain and its relationships to other types of content.
For development and testing you need a running instance of Magnolia. In this tutorial, we suppose that it is installed in a directory called
|If you don’t have Magnolia installed and running, go to the page called Installing Magnolia through npm CLI and complete the steps described on it. Then, return and proceed from here.|
Magnolia light modules usually define page, area and component templates and many more things. In this tutorial, we use a light module called
bookshelf to create a content app. The module contains both a definition of content types and the app descriptor.
Open a terminal.
Go to the
light-modulesfolder of your Magnolia installation:
Run the following command:
mgnl create-light-module bookshelf
The command creates the
└── bookshelf ├── decorations ├── dialogs │ ├── components │ └── pages ├── i18n │ └── bookshelf-messages_en.properties ├── includes │ └── README.txt ├── README.md ├── templates │ ├── components │ └── pages └── webresources
Change to the
bookshelf folder and enter the following command:
mgnl create-app bookshelf-app
This command creates the
contentTypes subfolders in the light module and adds the
bookshelf-app.yaml file to both of them.
└── bookshelf ├── apps │ └── bookshelf-app.yaml ├── contentTypes │ └── bookshelf-app.yaml ├── decorations ├── dialogs │ ├── components │ └── pages ├── i18n │ └── bookshelf-messages_en.properties ├── includes │ └── README.txt ├── README.md ├── templates │ ├── components │ └── pages └── webresources
bookshelf-app.yaml file in the
apps subfolder is an app descriptor, while the
bookshelf-app.yaml file in the
contentTypes subfolder contains a content type definition for the app.
As the function of the content type definition in this module is to describe a book, rename the content type definition file to
book.yaml. The structure of the light module folder will then look as follows:
└── bookshelf ├── apps │ └── bookshelf-app.yaml ├── contentTypes │ └── book.yaml ├── decorations ├── dialogs │ ├── components │ └── pages ├── i18n │ └── bookshelf-messages_en.properties ├── includes │ └── README.txt ├── README.md ├── templates │ ├── components │ └── pages └── webresources
In the next steps, you modify these files to meet the design requirements for the Bookshelf app.
contentTypes folder, open the
book.yaml file and replace its content with the following:
datasource: (1) workspace: books rootPath: / namespaces: lib: https://www.magnolia-travel.com/jcr/1.0/lib autoCreate: true model: (2) nodeType: lib:book properties: (3) - name: authors - name: ed (4) type: Boolean - name: title - name: description - name: publisher - name: publish_date (5) type: Date - name: isbn13
When working with
|1||Define how the content type items are persisted.
|2||Define the node type and the properties of the new content item for the Bookshelf app.|
|3||Defines the app properties.
|4||Set the type of the
|5||Set the data type of the
|For more details, see the Content type Model definition page.|
apps subfolder, open the
bookshelf-app.yaml file and make sure it contains only the following two lines:
!content-type:book (1) name: bookshelf-app (2)
|1||The app descriptor instructs the app generator to construct the app from the
|2||You give the app the name
After saving the changes, run
mgnl start again. Then go to the Definitions app in your instance to check that the app’s definitions have been loaded by Magnolia (the
bookshelf-app should appear in the
In case the
bookshelf-app isn’t visible or there’s a problem notification next to it, please double-check all your
yaml files have been copied exactly as they appear in this documentation (no additional spaces or extra characters).
Magnolia adds a tile for your new app to the App launcher automatically when registering the app. However, to make the tile appear in the App launcher, you must first restart your Magnolia session once by logging out and logging in again. For further details see App launcher layout.
To see the list of the app tiles, click the app launcher icon to the right of the Find Bar.
To start using the app, log into Magnolia again and click the bookshelf-app tile in the App launcher.
- i18n message keys and the Name, Title and Description labels
magnolia-ui-frameworkmodule already contains several generic i18n message keys whose values are applied as labels in the UI of the Bookshelf app. You will create new label values in Adding an i18n message bundle on the third page of the tutorial.