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 content view definition

contentViews:
  - name: tree
    dropConstraint:
      $type: jcrDropConstraint
      primaryNodeType: mgnl:contact
    $type: treeView
    columns: &columns
      - 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
    $type: listView
  - $type: thumbnailView

Content view properties

`class`	required (unless `$type` is used) Class extending 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 Expand source @ViewType("treeView") public class TreeViewDefinition<T> implements GridViewDefinition<T> { ... } To use the `$type` property in YAML, see Example content view 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 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`. When you write your own class, implement the `info.magnolia.ui.contentapp.browser.drop.DropConstraint` interface.
`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.
`multiSelect`	optional, default is `true` for list and thumbnail views When `true`, views are rendered as checkboxes. When `false`, views are rendered as radio buttons.
`name`	optional, default is `tree`, `list` or `thumbnail` depending on view type Name of the content view.
`readOnly`	optional, default is `false` for tree and list views or `true` for thumbnail view 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.

View types

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

Page tree

Content view definition

Example content view definition

Content view properties

View types