Content view definition

Magnolia provides view implementations for JCR data that allow tree, list and thumbnail views. A content view must implement the info.magnolia.ui.contentapp.browser.ContentView interface.

This content view definition is part of the Magnolia 6 UI framework. The fully qualified class name is info.magnolia.ui.contentapp.configuration.ContentViewDefinition.

If you work with the Magnolia 5 UI framework, see Content view definition for Magnolia 5 UI instead.

Example definition

  - name: tree
      $type: jcrDropConstraint
      primaryNodeType: mgnl:contact
    $type: treeView
    columns: &columns (1)
      - name: jcrName
        label: name
        $type: titleColumn
        editable: true
          mgnl:contact: icon-people
          mgnl:content: icon-folder
            nodes: true
            properties: true
      - name: value
        label: value
        editable: true
            nodes: false
            properties: true
      - name: jcrPath
        label: path
        $type: pathColumn
      - name: status
        label: status
        $type: statusColumn
      - name: mgnl:created
        $type: dateColumn
        label: date
        editable: false
              - mgnl:contact
            nodes: true
            properties: false
            $type: textField
  - name: list
    columns: *columns (2)
    $type: listView
  - $type: thumbnailView
1 &columns - a YAML anchor that allows you to reuse the configuration elsewhere through a similarly formed YAML alias.
2 *columns - the YAML alias marking the position where the configuration should be reused.

Content view properties

Property Description


required (unless $type is used)

Class extending info.magnolia.ui.contentapp.configuration.ContentViewDefinition to define the type of view. Set the value to the fully qualified class name. See View types for possible values.


You can use this as a shortcut for class if the definition class is annotated with info.magnolia.ui.ViewType. The proper value is defined by the annotation.

Example class annotation
public class TreeViewDefinition<T> implements GridViewDefinition<T> {

To use the $type property in YAML, see Example definition.


required (used only in tree and list views)


optional (used only in tree and list views), default is no drag-and-drop capability.

Default caveat

When an app is created with the !content-type directive, a jcrDropConstraint is provided by default.

Defines acceptance criteria for move operations. By restricting the nodes that a user can move, you can enforce a certain node hierarchy. For example, you might want to allow moving content under folders but not folders under content. If no value is defined, the view will have no drag-and-drop capability. Possible values are:

  • alwaysTrueDropConstraint: basic implementation of DropConstraint that always returns true.

  • jcrDropConstraint: DropConstraint for JCR content apps that returns true based on the defined primaryNodeType.

The property mode indicates potential locations for drag-and-drop targets relative to nodes and the grid. If no specific value is defined, the mode: ON_TOP_OR_BETWEEN will be used as default. Possible values are: ON_TOP_OR_BETWEEN, BETWEEN, ON_TOP, and ON_GRID.

Example definition
  $type: alwaysTrueDropConstraint
  primaryNodeType: mgnl:contact

When you write your own class, implement the info.magnolia.ui.contentapp.browser.drop.DropConstraint interface.


optional, default is tree, list or thumbnail depending on view type

Name of the content view.


optional, default is icon-view-tree, icon-view-list or icon-view-thumbnails depending on view type

CSS class that identifies an icon used for the view tab. For available names, see Icons.


optional, default is false

Defines whether the workbench is editable inline. You can double-click a cell to edit its value.

You cannot define defaultAction and use inline editing at the same time.


optional, default is true for list and thumbnail views

When true, items are rendered as checkboxes. When false, items are rendered as radio buttons.


optional, default is false

When true, multiple items can be selected by clicking rows rather than checkboxes. For this to work, multiSelect must be set to true.


optional (used only in tree and list views), default is true for tree view or false for list view

Defines whether the selected item is scrolled into view when opening the content app.

Setting scrollToSelectedItem to true for the list view may lead to performance issues with large data sets.

View types

$type class








DX Core



This widget lets you know where you are on the docs site.

You are currently perusing through the DX Core docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules
6.3 beta

Magnolia 6.3 beta

Magnolia 6.3 is in beta. We are updating docs based on development and feedback. Consider the 6.3 docs currently in a state of progress and not final.

We are working on some 6.3-beta known issues during this phase.