Versions Compared

Old Version 1

changes.mady.by.user Ashraf Khamis

Saved on

compared with

New Version Current

changes.mady.by.user Julie Legendre

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: MOTION-157

...

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

Localtab Group
Localtab
activetrue
titleJCR node
Advanced Tables - Table Plus
enableHeadingAttributesfalse
enableSortingfalse
classm5-configuration-tree
enableHighlightingfalse
Node nameValue

Mgnl n
columns

Mgnl n
jcrName

Mgnl p
class

info.magnolia.ui.workbench.column.definition.StatusColumnDefinition

Mgnl p
formatterClass

info.magnolia.ui.workbench.column.StatusColumnFormatter

Mgnl p
editable

true

Mgnl p
label

Name

Mgnl p
propertyName

jcrName

Mgnl p
sortable

true

Mgnl n
status

Mgnl p
width

45

Mgnl p
displayInChooseDialog

false

Mgnl p
label

Status

Mgnl p
class

info.magnolia.ui.workbench.column.definition.StatusColumnDefinition

Mgnl p
formatterClass

info.magnolia.ui.workbench.column.StatusColumnFormatter
Localtab
titleYAML
Code Block
languagejs
columns:
  - name: jcrName
    editable: true
    sortable: true
    propertyName: jcrName
    class: info.magnolia.ui.workbench.column.definition.PropertyColumnDefinition
  - name: status
    width: 45
    displayInChooseDialog: false
    formatterClass: info.magnolia.ui.workbench.column.StatusColumnFormatter
    class: info.magnolia.ui.workbench.column.definition.StatusColumnDefinition

Column definition properties

class

required

The column definition class reads the column configuration and displays the column accordingly. The class must implement the 

Javadoc
0info.magnolia.ui.workbench.column.definition.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:

  • Javadoc
    0info.magnolia.ui.workbench.column.definition.AbstractColumnDefinition
     is the base implementation for all special column definitions.
  • Javadoc
    0info.magnolia.ui.workbench.column.definition.PropertyColumnDefinition
     displays the value of a property.
  • Javadoc
    0info.magnolia.ui.workbench.column.definition.PropertyTypeColumnDefinition
     displays the type of a property.
  • Javadoc
    0info.magnolia.ui.workbench.column.definition.StatusColumnDefinition
     displays the activation status of an item.
  • Javadoc
    0info.magnolia.ui.workbench.column.definition.MetaDataColumnDefinition
     displays the last modification date.
propertyName

required only when using

Javadoc
0info.magnolia.ui.workbench.column.definition.PropertyColumnDefinition

Name of the property to display. Needed when using the 

Javadoc
0info.magnolia.ui.workbench.column.definition.PropertyColumnDefinition
 class.

editable

optional, default it false

Makes the column editable inline. You can double-click a cell to edit its value.

Inline editing is available only in the tree view, not in list, thumbnail or search views.

(warning) Defining a defaultAction will override inline editing. Double-clicking the cell with trigger the default action instead of inline edit mode.

enabled

optional , default is true

Defines whether the column is displayed in the workbench or not. 

expandRatio

optional , default is 1.0

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. In a three-column workbench with expand ratios 2, 2 and 1, the first column takes 40% of the horizontal space, the second column 40% and the third column 20%.

formatterClass

optional

Defines how the column's value is displayed in the UI. This is useful for making raw data more readable or adhering to a formatting convention.

The Contacts app implements a 

Javadoc
0info.magnolia.ui.app.contacts.column.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 is to segment a phone number such as 41612289000 as friendlier +41 61 228 9000.

The formatter class must implement the 

Javadoc
0info.magnolia.ui.workbench.column.definition.ColumnFormatter
 interface. Set the value to the fully-qualified class name.

displayInChooseDialog

optional, default is true

Display Displays the column in a choose dialog.

label

optional, default is column name, then the parent node name

Text displayed to use in the column heading. Can be the text itself or an 18n key.

name

optional, default is the parent node name

Name of the column.

sortable

optional, default is false

Allows the user to sort the data by clicking the column heading.

width

optional

Column width in pixels. Five pixels are deducted for left margin so when you define width 60 you get 55 pixels of space for data. Set the value to a number without unit.