My first content app Part II
Creating a basic content app
Prerequisites
For development and testing you need a running instance of Magnolia. In this tutorial, we suppose that it is installed in a directory called magnolia.
| 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. |
Creating the bookshelf light module
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 bookshelfThe command creates the
bookshelflight module.└── bookshelf ├── decorations ├── dialogs │ ├── components │ └── pages ├── i18n │ └── bookshelf-messages_en.properties ├── includes │ └── README.txt ├── README.md ├── templates │ ├── components │ └── pages └── webresources
Creating the app
Change to the bookshelf folder and enter the following command:
mgnl create-app bookshelf-appThis command creates the apps and 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
The 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.
|
The |
Customizing the content type definition
In the contentTypes folder, open the book.yaml file and replace its content with the following:
datasource: (1)
workspace: books
rootPath: /
namespaces:
lib: https://www.magnolia-cms.com/jcr/mgnl/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 ed property to Boolean since it is more appropriate in regard to the values the system can store (true, false). |
||
| 5 | Set the data type of the publish_date property to Date so that the value would be stored in the JCR as calendar object. |
Customizing the app descriptor
In the 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 book content type definition. |
| 2 | You give the app the name bookshelf-app, under which the app is known to other resources and systems in Magnolia. |
Check the app in the Definitions app
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 apps folder).
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).
Starting the app
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.
App launcher tiles list
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
-
The
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.
