Magnolia 5.3 reached end of life on June 30, 2017. This branch is no longer supported, see End-of-life policy.

Page tree
Skip to end of metadata
Go to start of metadata

Columns define what content is displayed in tree and list views in the browser subapp. Here is an example of column configuration from the Contacts app.

Node nameValue
 workbench 

 contentViews

 

 tree

 

 columns

 

 name

 

 class

info.magnolia.ui.app.contacts.column.ContactNameColumnDefinition

 editable

true

 expandRatio

2

 formatterClass

info.magnolia.ui.app.contacts.column.ContactNameColumnFormatter

 label

Name

 propertyName

jcrName

 sortable

true

 path

 

 email

 

 status

 

 moddate

 

Properties:

  • class: The column definition class reads the column configuration and displays the column accordingly. The class must implement the  ColumnDefinition  interface. You can write your own class or use one of the ready-made classes. Set the value to the fully-qualified class name. Examples:
    • AbstractColumnDefinition  is the base implementation for all special column definitions.
    • PropertyColumnDefinition  displays the value of a property.
    • PropertyTypeColumnDefinition  displays the type of a property.
    • StatusColumnDefinition  displays the activation status of an item.
    • MetaDataColumnDefinition  displays the last modification date.
  • editable: Makes the data displayed in the column editable inline. When the user double-clicks the data, the value turns into an editable field. This works for simple data. If you have a detail subapp, you want to set the editable property to false and configure a defaultAction instead. The defaultAction would launch the detail subapp where the data can be edited in a form, for example.
  • enabled: Defines whether the column is displayed or not. Default is true
  • expandRatio: Defines how excess space is divided among columns. A table can have excess space if its width is defined and there is more horizontal space than is occupied by the column data. For example, assume you have three columns with expand ratios 2, 2 and 1. The first column takes 40% of the horizontal space, the second column also takes 40% and the last column takes 20%. The default expand ratio is 1.0.
  • formatterClass: Defines how the column's value is displayed in the UI. This is useful for making the raw data more readable or making it adhere to a formatting convention. For example, the Contacts app implements a  ContactNameColumnFormatter  which concatenates the first name and last name of the contact person and displays them as full name in one column. So Vincent + Van Gogh is displayed as Vincent Van Gogh. Another example would be to segment a phone number such as 41612289000 as +41 61 228 9000. The formatter class must implement the  ColumnFormatter  interface. Set the value to the fully-qualified class name.
  • displayInChooseDialog: Display the column in a choose dialog. true or false.

  • label: Text displayed in the column heading.
  • propertyName: Name of the property to display. Needed when using the  PropertyColumnDefinition  class.
  • sortable: Allows the user to sort the data by clicking the column heading.
  • width: Column width in pixels. Five pixels are deducted for left margin. So when you define a column width of 60 you get 55 pixels of space for data. Set the value to a number without unit.