Column definition

Columns define what content is displayed in tree and list views in the browser subapp.

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

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

Example definitions

Simple column definitions

  • Title column

  • Date column

columns:
  jcrName:
    $type: jcrTitleColumn
    nodeTypeToIcon:
      mgnl:page: icon-file-webpage
columns:
  mgnl:lastModified:
    $type: dateColumn

Columns with filter definitions

  • With a default filter value

  • With a checkbox filter

columns:
  value:
    filterComponent:
      $type: textField
      defaultValue: '10'
      converterClass: info.magnolia.ui.editor.converter.StartsWithFilteringModeConverter`
columns:
  mgnl:activationStatus:
    $type: columnComponent
    type: java.lang.Boolean
    filterComponent:
      $type: checkBoxField
      defaultValue: true

Columns with combobox filters and datasource definitions

  • With an enumeration

  • With options

  • With a list of JCR nodes

columns:
  layout:
    filterComponent:
      $type: comboBoxField
      emptySelectionAllowed: true
      datasource:
        $type: enumDatasource
        enumeration: info.magnolia.ui.field.Layout
columns:
  isFeatured:
    filterComponent:
      $type: comboBoxField
      emptySelectionAllowed:
      datasource:
        $type: optionListDat
        options:
          - name: true
            value: true
            label: Featured
columns:
  destination:
    filterComponent:
      $type: comboBoxField
      emptySelectionAllowed: tr
      datasource:
        $type: jcrDatasource
        rootPath: /destinations
        workspace: category

Column properties

Property Description

class

required (unless $type is used)

The column definition class reads the column configuration and displays the column accordingly. The class must implement the info.magnolia.ui.contentapp.configuration.column.ColumnDefinition interface. You can write your own class or use one of the ready-made classes. See Column types for possible values.

$type

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

Example class annotation
@ColumnType("dateColumn")
public class DateColumnDefinition extends ConfiguredColumnDefinition<Date> {
...
}

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

type

required, default is java.lang.String

Data type of the column. Use the fully qualified class name. See PropertyType for possible values.

A default type is typically hard-coded in each definition class. You only need to add this property if you want to override the default implementation.

Make sure that type is set to a value that matches the type of data you entered (for example, java.lang.Long for long values).

name

optional, default is parent node name

Name of the column.

label

optional

Text displayed in the column heading. The value can be literal or a key of a message bundle.

If you do not provide the property, Magnolia will fall back to a generated i18n key.

descriptionGenerator

optional

Generates a description for the column.

editable

optional, default is false

When true, the column can be edited inline. You can double-click a cell to edit its value.

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

editor

optional

Defines the inline editor component. For this to work, you have to set editable to true. See the info.magnolia.ui.contentapp.configuration.column.ColumnEditorDefinition interface.

     field

required, default is textField

Type of the field definition item. See Field types for possible values.

     availability

optional

Outlines when inline editing is permitted. See Action availability for more information.

Availability is resolved against the selected row, not the selected column or property.

filterComponent

optional

Adds a filter field to the column. Only text, checkbox and combobox fields are supported (see Example definitions). The default value and converter of combobox field are not supported.

A node identifier is applied to filtering if the field value is javax.jcr.Node. That is, if the destination column in Example definitions is configured with jcrDatasource, the combobox field options will be populated with javax.jcr.Node.

Use converterClass: info.magnolia.ui.editor.converter.StartsWithFilteringModeConverter to change the filtering mode from CONTAINS to STARTSWITH to improve the performance of textField filters in huge JCR workspaces.
Column filtering is not supported in REST-based elements of the UI.

expandRatio

optional

Defines the ratio with which the column expands. By default, all columns expand equally.

maximumWidth

optional

Defines the maximum allowed pixel width of the column when it is set to expand.

minimumWidth

optional

Defines the minimum guaranteed pixel width of the column when it is set to expand.

minimumWidthFromContent

optional, default is false

Sets whether the width of the content in the column is the minimum width of the column. When false, the column shrinks down to the width defined in minimumWidth if necessary.

width

optional

Defines the width (in pixels). When set, overrides any configuration from expandRatio, maximumWidth and minimumWidth.

sortable

optional, default is true

When false, the column cannot be sorted.

renderer

optional, default is com.vaadin.ui.renderers.TextRenderer

Class extending Vaadin AbstractRenderer.

com.vaadin.ui.renderers.ComponentRenderer is used by columnComponent. info.magnolia.ui.contentapp.configuration.column.renderer.DefaultDateRenderer is used by dateColumn.

valueProvider

optional

Class extending Vaadin ValueProvider.

We don’t recommend configuring type, renderer and valueProvider through YAML. This will not be possible in future major versions.

Rather, create a custom column definition instead to prevent misconfiguration errors such as configuring a correct renderer but a wrong type:

public class ProgressColumnDefinition<T> extends ConfiguredColumnDefinition {
    public ProgressColumnDefinition() {
        setType(Double.class);
        setRenderer(ProgressBarRenderer.class);
    }
}
columns:
  scale:
    class: my.package.ProgressColumnDefinition

Column types

$type class

dateColumn

info.magnolia.ui.contentapp.configuration.column.DateColumnDefinition

iconColumn

info.magnolia.ui.contentapp.configuration.column.icon.IconColumnDefinition

iconAndValueColumn

info.magnolia.ui.contentapp.configuration.column.icon.IconAndValueColumnDefinition

columnComponent

info.magnolia.ui.contentapp.configuration.column.component.ColumnComponentDefinition

jcrPathColumn

info.magnolia.ui.contentapp.column.jcr.JcrPathColumnDefinition

jcrStatusColumn

info.magnolia.ui.contentapp.column.jcr.JcrStatusColumnDefinition

If you want to use jcrStatusColumn inside a DAM chooser dialog definition, you must use a custom linkField type instead of the damLinkField type in the respective image definition.

In addition, you’ll need to use a custom DAM chooser definition, for example:

ui-framework-jcr/dialogs/customChooser.yaml
class: info.magnolia.ui.chooser.definition.SingleItemWorkbenchChooserDefinition

workbenchChooser:
    workbench:
      extensionViews:
          - name: fullTextSearch
            class: info.magnolia.ui.chooser.definition.FullTextSearchExtensionViewDefinition
      contentViews:
          - name: tree
            $type: treeView
            dropConstraint:
              $type: jcrDropConstraint
              primaryNodeType: mgnl:asset
            columns:
              name: &name
                class: info.magnolia.dam.app.contentview.column.JcrAssetNameColumnDefinition
                nodeTypeToIcon:
                  mgnl:folder: icon-folder
                  mgnl:asset: icon-assets-app
              title: &title
                filterComponent:
                  $type: textField
              jcrPublishingStatus: &status
                $type: jcrStatusColumn (1)
          - name: list
            $type: listView
            columns:
              name: *name
              title: *title
              jcrPublishingStatus: *status
              jcrPath:
                $type: jcrPathColumn

          - $type: thumbnailView
1 The jcrStatusColumn property shows the publishing status and enables column filtering by status.


Then, you’ll want to have an image definition that contains the linkField type and references the custom DAM chooser above, for example:

tours/apps/tours.yaml
form:
  properties:
    image:
      $type: linkField (1)
      chooserId: ui-framework-jcr:customChooser (2)
      converterClass: info.magnolia.ui.editor.converter.JcrAssetConverter
      datasource: &datasource
        $type: jcrDatasource
        workspace: dam
        allowedNodeTypes:
          folder: mgnl:folder
          asset: mgnl:asset
        preview:
          nodeName: jcr:content
...
1 linkField replaces damLinkField in the context of DAM choosers and the jcrStatusColumn property.
2 Where the chooserId ui-framework-jcr:customChooser references the previous YAML snippet.

jcrTitleColumn

info.magnolia.ui.contentapp.column.jcr.JcrTitleColumnDefinition

N/A

info.magnolia.ui.contentapp.configuration.column.AbstractSafeHtmlColumnDefinition

Extend this class to implement a column with HTML support. The developer is responsible for escaping of external content by extending info.magnolia.ui.contentapp.configuration.column.AbstractSafeHtmlColumnDefinition.AbstractValueProvider and using its escapeHtml method.
Feedback

DX Core

×

Location

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