The content app user interface consists of subapps, a workbench and an action bar. These reusable parts let you build content apps quickly.


What is a content app?

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.


A content app always has at least two subapps: browser and detail. A subapp is typically displayed to users as a tab.

Browser subapp

A browser subapp gives you a workbench that displays the content of a workspace. It can display the content in tree, list and thumbnail views. It also provides an action bar with action for managing the content items.  

Detail subapp

A detail subapp provides an editor for editing the items.


Workbench is a view that displays a list of content items in a workspace. It is part of the content app framework, typically defined in the browser subapp. The workbench contains at list of content views. Typical view types are tree, list and thumbnail. The workbench also provides a search box; results from search are displayed in the search view.

Action bar

An action bar makes actions available to users. The action bar is typically displayed on the right-hand side of the browser subapp. The action bar definition organizes actions into sections (green label) and groups (between horizontal lines). Availability rules determine which section is displayed to the user. For example, when the user selects a content item in the browser subapp, availability rules display only actions that are relevant to working with that item. A group contains actions that have something in common, such as actions for adding things.

Action popup

Action popup is a context menu that is displayed when the user right-clicks an item. You should only display often used actions in the popup so that it remains usable. If your app only has a few actions, you may want to simply extend the action bar. This way the popup displays the same actions as the action bar. Extending also allows you to manage the items in one place (action bar definition) rather than two.

Image provider

Image provider is a component that renders images used in apps. It generates the portrait image at the bottom of the action bar and the thumbnails for the thumbnail view. 


Editor is a component that edits a content item. The editor typically contains a form. In a content app, you should create an editor definition under the detail subapp. Define the node types the editor edits, a form for editing them, and actions for saving the edit.

#trackbackRdf ($trackbackUtils.getContentIdentifier($page) $page.title $trackbackUtils.getPingUrl($page))