M6.4 - Content Types and Content Apps

”In this course, you will learn how to define structured content in Magnolia and manage it using content apps built with Light Development. You will see how quickly content types can be created and how they serve as the foundation for generating content apps. The main focus is on configuring content apps in detail, including browser and detail subapps, fields, actions, and layout options in AdminCentral.

The course also covers how to expose content through Delivery REST endpoints for use in websites, headless frontends, or external systems. All topics are taught using Light Development, emphasizing file-based configuration, fast iteration, and a clear understanding of how content modeling, app configuration, and content delivery work together.

Total time: ~Half a day

Start with Chapter 1

Prerequisites

”Basic familiarity with web development concepts is recommended. It is helpful to have completed the M6.4 – Magnolia Author and Content Editor training to be familiar with AdminCentral basics such as navigating apps, creating content, and editing items.

This course introduces the Magnolia CLI jumpstart and the initial Light Development setup used throughout the Front-End curriculum.”

Chapters

No need to watch in order — jump straight to what aligns with your goals.

Getting started with light development

Preparation: Setting up the environment

Exercise: Create a light module

Knowledge check

Resource files app

Exercise: Check the light module in the app

Content Type & Content App: Usecase Overview

Content Types and Content Apps

Basics of a Content Type

Datasource Definition

Exercise: Create a new ContentType Event & Its Datasource

Model Definition

Exercise: Define the event's data Model

Basics of a Content App

Automatically Generated Apps

Exercise: Create the Events Content App

Exercise: Translate the Events App Labels

Exercise: Check entries in the JCR browser

Content App Configuration

App: Datasource & Permission

Exercise: Define Permissions and Datasource

App: Browser and Detail Subapps

Intro: Forms in AdminCentral

Detail Subapp: Actions, ItemProvider, Form

Exercise: Enhance the Location & Date Fields of the Detail Subapp

Browser SubApp: General, Actions, Actionbar

Actions: Configuration and Availability

Exercise: Enhance the Activate Action of the Browser Subapp

Browser SubApp: Workbench's Configuration

Exercise: Enhance the Workbench' s Configuration

Actionbar: Configurations & Availability

Definition decorator

Exercise: Decorate an app label

Definitions App

Admin central: App Launcher Layout

Exercise: Change Where Events App is Shown in Admincentral

The RestEndpoint

Exercise: Create a new Events RestEndpoint

Retrieving Data From a Workspace

Congratulations!

About the teacher

Tu Bo Xuan

Senior Solution Architect