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

contentViews:
  - name: tree
    dropConstraint:
      $type: jcrDropConstraint
      primaryNodeType: mgnl:contact
    $type: treeView
    columns: &columns (1)
      - name: jcrName
        label: name
        $type: jcrTitleColumn
        editable: true
        nodeTypeToIcon:
          mgnl:contact: icon-people
          mgnl:content: icon-folder
        editor:
          availability:
            nodes: true
            properties: true
      - name: value
        label: value
        editable: true
        editor:
          availability:
            nodes: false
            properties: true
      - name: jcrPath
        label: path
        $type: jcrPathColumn
      - name: status
        label: status
        $type: jcrStatusColumn
      - name: mgnl:created
        $type: dateColumn
        label: date
        editable: false
        editor:
          availability:
            nodeTypes:
              - mgnl:contact
            nodes: true
            properties: false
          field:
            $type: textField
            converterClass: com.vaadin.data.converter.StringToDateConverter
  - 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

class

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.

$type

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

@ViewType("treeView")
public class TreeViewDefinition<T> implements GridViewDefinition<T> {
...
}

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

columns

required (used only in tree and list views)

See Column definition.

dropConstraint

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

Defines the acceptance criteria for move operations. By restricting the nodes that a user can move, you 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.

Table 1. Possible values
Value	Description
`alwaysTrueDropConstraint`	Basic implementation of `DropConstraint` that always returns `true`.
`jcrDropConstraint`	`DropConstraint` for JCR content apps. Returns `true` based on the defined `primaryNodeType`.

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

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

You can disable drag-and-drop by using a decoration:

subApps:
  browser:
    workbench:
      contentViews:
        tree:
          dropConstraint: !override

name

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

Name of the content view.

icon

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.

readOnly

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.

multiSelect

optional, default is true for list and thumbnail views

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

multiSelectByRowClick

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.

scrollToSelectedItem

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

$type	class
`listView`	`info.magnolia.ui.contentapp.configuration.ListViewDefinition`
`thumbnailView`	`info.magnolia.ui.contentapp.configuration.ThumbnailViewDefinition`
`treeView`	`info.magnolia.ui.contentapp.configuration.TreeViewDefinition`

listView

info.magnolia.ui.contentapp.configuration.ListViewDefinition

thumbnailView

info.magnolia.ui.contentapp.configuration.ThumbnailViewDefinition

treeView

info.magnolia.ui.contentapp.configuration.TreeViewDefinition

Feedback

DX Core

Content view definition

Example definition

Content view properties

View types

Location

Main doc sections