This is the third and final part of the My first content app tutorial. The content type allows you to define the actual content model. Magnolia then creates an editing interface automatically, but you have the ability to tune every aspect of the interface to its final form as required by a specific use case.
On this page you fine-tune the app to the requirements ask for by the use case defined for this tutorial. You also add and polish the i18n labels and descriptions for the elements of the app's UI.
Fine-tune the app descriptor
First you change the
bookshelf-app.yaml app descriptor, to:
- Add an app icon
- Tailor the properties
- Remove the thumbnail view
Open the file, located in the
bookshelf light module
apps folder, and edit it as follows:
Changing the app icon
On line 3 above, you assign the Bookshelf app a new icon called
icon-content-app, which symbolizes a bookshelf.
Icons in Magnolia
icon-content-app is one of the icons we provide as part of the UI framework and you can see them all here: https://dev.magnolia-cms.com/svg-app-icons-gallery/.
Tailoring the properties in the detail subapp
- Line 10: Give the
defaulttab a new name.
The app generator creates the
defaulttab in the Book detail subapp. You assign the tab (node) a more meaningful name,
bookDetailsTab, which makes it easier to address the app components and i18n labels.
- Lines 12 and 13: Change the
You change the field type of this property from the default text to the checkbox field type.
- Lines 14 and 15: Set the height of the field for the
You set the
rowsfield property of the
titlecontent type property to
2. Some book titles are longer and in most cases a two-row text field allows the user to read the whole title compared to just a one-row field.
- Lines 16-18: Define the height and maximum length of the field for the
Similarly, you set the number of rows for the
You also limit the maximum length of a description to 5 000 characters to comply with data import restrictions of the libib.com cloud service, in case the user decides to transfer data between the Bookshelf app and libib.com.
- Lines 19-20: Change the
Set the field type to date to help the user find a book publication date with a pull-down calendar.
- Lines 21-26: Length setting and a validator related to the
We set the
13characters to provide the user with a digit counter for entering the ISBN-13 number.
On lines 23-26 we add a regex-based field validator for the ISBN-13 field. This validation makes sure that the number entered complies with the basic syntax of ISBN-13 numbers.
Hiding the thumbnail view
By default the app generator creates three view types in the Browser subapp:
- Tree view
- List view
- Thumbnail view
ines 27-31 overrides the default using the
!override directive and renders only the tree and list views.
Adding an i18n message bundle
Now add and polish the i18n labels and descriptions for the elements of the UI in the Bookshelf app by adding a new message bundle to the
bookshelf light module.
What is a message bundle?
.propertiesfiles. Each file contains key-value pairs of translated user interface text such as labels and messages. The keys in all files of the same bundle are identical but the values are language specific translations.
A message bundle must contain at least one
.properties file. The files are named after the language (locale):
<bundle-name>_<locale>.properties, for example
app-pages-messages_en.properties. Every Magnolia module should provide its own message bundle. If a module installs several apps, each app should have its own message bundle.
Since you've assigned a new name (
bookDetailsTab) to the
default tab in the detail subapp, you have to create new labels even for the message keys that supply label values from the
i18n subfolder, create a new file called
bookshelf-app-messages_en.properties and save it with the following content (click the filename link to see the content):
To apply the new labels and descriptions, close and reopen the Bookshelf app in Magnolia.
Compare the labels in the Book Detail subapp before and after adding the message bundle:
Congratulations! The Bookshelf is now ready for use.
You can tweak the app's configuration further to expand its capabilities:
- Sample book data
If you would like to see some book data in the app, you may either add it yourself or download it as a sample file called books.My-Good-Reads.xml from the
_sampleContentfolder in the bookshelf repository. Import the sample data to the Bookshelf app using the Import action in the Book browser subapp.
- Compatibility with online library management services
Except for the
namecontent properties, all the other properties make the design of the Bookshelf app compatible with the data nomenclature used by the libib.com service. This makes a file-based or a REST-based exchange of book data between the Bookshelf app and the Libib cloud service possible.