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

This is the home page of Magnolia 6 UI documentation. Note that this Wiki space contains a lot more information on Magnolia 5 UI. Please make sure you understand the difference between Magnolia 5 UI and Magnolia 6 UI.

 What are the Magnolia 6 and Magnolia 5 UI frameworks?

The Magnolia UI project version 6.1 contains both the UI framework used in Magnolia 5.7 (referred to as Magnolia 5 UI) and the Magnolia 6 UI framework. You can use either framework.

Magnolia 5 UI

In Magnolia 6, Magnolia 5 UI has been relocated to the magnolia-ui-framework-compatibility module. Many Magnolia apps still rely on this old framework. The fully qualified class names have not changed, which ensures runtime compatibility for older custom components based on the classes from the Magnolia 5 UI framework.

Magnolia 6 UI

In the Magnolia 6 UI framework, the core components of the UI are located in the magnolia-ui-framework module inherited from Magnolia 5.7. The new magnolia-ui-framework-jcr module is also part of Magnolia 6 UI.

The Magnolia 6 UI framework has been released as a developer preview since its API may still change. Nevertheless, feel free to try it out.

UI modules

For more information on the Magnolia 6 UI modules, refer to UI module.

Should I use Magnolia 6 UI?

Magnolia 6 UI is currently available as a developer preview. The full version is still under development, and its APIs may change.

Some Magnolia modules already use Magnolia 6 UI. Since some APIs may still change, you may need to change any custom modules that use Magnolia 6 UI.

(info) Currently, we recommend using Magnolia 5 UI due to its API stability. Note that some Magnolia 5 UI classes are deprecated now, and more classes may become deprecated with subsequent major releases.

Overview of Magnolia 6 UI pages

Data binding

Form and fields

App configuration

Miscellaneous

Beyond documentation

Reference content app

This is an app built completely with Magnolia 6 UI that contains a lot of sample configuration. The app is named contacts-v8, and its app descriptor is part of the contacts-app module (git).

App descriptor of contacts-v8

contacts-app/src/main/resources/contacts/apps/contacts-v8.yaml
icon: icon-contacts-app
class: info.magnolia.ui.contentapp.configuration.ContentAppDescriptor
appClass: info.magnolia.ui.framework.app.BaseApp
label: Contacts V8
datasource:
  $type: jcrDatasource
  workspace: contacts
  includeProperties: true
  previewDefinition:
    nodeName: photo
  allowedNodeTypes:
    - mgnl:contact
    - mgnl:folder
    - mgnl:content
    - mgnl:contentNode
subApps:
  browser:
    class: info.magnolia.ui.contentapp.configuration.BrowserDescriptor
    actions:
      addFolder:
        $type: addNodeAction
        icon: icon-add-folder
        nodeType: mgnl:content
        availability:
          root: true
          nodeTypes:
            content: mgnl:content
      addNode:
        $type: addNodeAction
        icon: icon-add-node-content
        nodeType: mgnl:contentNode
        availability:
          root: true
      duplicate:
        $type: duplicateNodeAction
        icon: icon-duplicate
      add:
        label: Add contact
        icon: icon-people
        $type: openDetailSubappAction
        appName: contacts-v8
        subAppName: detail
        viewType: add
      edit:
        label: Edit
        icon: icon-edit
        $type: openDetailSubappAction
        appName: contacts-v8
        subAppName: detail
        viewType: edit
      export:
        icon: icon-export
        # see MGNLUI-5310
        class: info.magnolia.ui.framework.action.ExportActionDefinition
      rename:
        icon: icon-edit
        $type: openDialogAction
        dialogId: contacts:rename
      chainedAction:
        $type: chainedAction
        label: And and rename
        icon: icon-add-item
        actions:
          add:
            $type: addNodeAction
          open:
            $type: openDialogAction
            dialogId: contacts:rename
    actionbar:
      sections:
        - name: folder
          label: folder
          availability:
            nodeTypes:
              folder: mgnl:content
          groups:
            - name: addActions
              items:
                - name: addNode
                - name: addFolder
                - name: chainedAction
                - name: rename
                - name: duplicate
                - name: add
                - name: edit
                - name: publish
                - name: export
    workbench:
      contentViews:
        - name: tree
          dropConstraint:
            $type: jcrDropConstraint
            primaryNodeType: mgnl:contact
          $type: treeView
          columns: &columns
            - name: jcrName
              caption: name
              $type: jcrNameColumn
              editable: true
              nodeTypeToIcon:
                mgnl:contact: icon-people
                mgnl:content: icon-folder
              editor:
                availability:
                  nodes: true
                  properties: true
            - name: value
              caption: value
              editable: true
              editor:
                availability:
                  nodes: false
                  properties: true
            - name: jcrPath
              caption: path
              $type: jcrPathColumn
            - name: status
              caption: status
              $type: jcrStatusColumn
            - name: progress
              caption: progress
              renderer: com.vaadin.ui.renderers.ProgressBarRenderer
              editable: false
              editor:
                availability: &onlyContacts
                  nodeTypes:
                    - mgnl:contact
                  nodes: true
                  properties: false
                field:
                  $type: textField
                  converterClass: com.vaadin.data.converter.StringToDoubleConverter
            - name: mgnl:created
              $type: dateColumn
              caption: date
              editable: false
              editor:
                availability: *onlyContacts
                field:
                  $type: textField
                  converterClass: com.vaadin.data.converter.StringToDateConverter
            - name: email
              caption: email
              editable: true
              editor:
                availability: *onlyContacts
                field:
                  $type: textField
                  validators:
                    - $type: emailValidator
            - name: compatibility
              caption: compatibility
              # old framework types have no aliases - we'd rather encourage people to switch to the new one
              class: info.magnolia.ui.workbench.column.definition.CompatibilityColumnDefinition
              deprecatedColumnDefinition:
                class: info.magnolia.ui.workbench.column.definition.NodeTypeColumnDefinition

        - name: list
          columns: *columns
          $type: listView
  detail:
    actions:
      cancel:
        label: cancel
        $type: closeAction
      commit:
        $type: commitAction
        label: commit
    label: details
    class: info.magnolia.ui.contentapp.detail.DetailDescriptor
    itemProvider:
      $type: jcrNodeFromLocationProvider
      workspace: contacts
      nodeType: mgnl:contact
    form:
      properties:
        salutation:
          label: salutation
          $type: textField
          i18n: true
          defaultValue: Mr
          description: hello
        firstName:
          label: first name
          $type: textField
          required: true
        lastName:
          label: last name
          $type: textField
          required: true
        email:
          label: email
          $type: textField
          required: true
          validators:
            email:
              $type: emailValidator
        richtext:
          label: rich text
          $type: richTextField
        select:
          label: select
          $type: comboBoxField
          datasource:
            $type: jcrDatasource
            workspace: contacts
            describeByProperty: lastName # defaults to node path if not specified
            allowedNodeTypes:
              - mgnl:contact
        twinSelect:
          label: twinSelect
          $type: twinColSelectField
          #defaultValue: [ppicasso, aeinstein, ldavinci] # use node names to set defaults with JCR # this doesn't work, converter gets node names instead of uuids
          datasource:
            $type: jcrDatasource
            workspace: contacts
            describeByProperty: lastName
            allowedNodeTypes:
              - mgnl:contact
        multiSelect:
          label: multiSelect
          $type: listSelectField
          datasource:
            $type: jcrDatasource
            workspace: contacts
            describeByProperty: firstName
            allowedNodeTypes:
              - mgnl:contact
        radioGroup:
          label: radioButtonGroup
          $type: radioButtonGroupField
          #defaultValue: aeinstein # this doesn't work, converter gets a node name instead of an uuid
          datasource:
            $type: jcrDatasource
            workspace: contacts
            describeByProperty: lastName
            allowedNodeTypes:
              - mgnl:contact
        checkboxGroup:
          label: checkboxGroup
          $type: checkBoxGroupField
          defaultValue: # an alternative way of setting multiple default values
            - Mahler
            - Bach
          datasource:
            $type: optionListDatasource
            options:
              - name: Vivaldi
                value: Vivaldi
              - name: Bach
                value: Bach
              - name: Bartok
                value: Bartok
              - name: Stravinsky
                value: Stravinsky
              - name: Mahler
                value: Mahler
        tokens:
          label: tokens
          $type: tokenField
          i18n: true
          description: description
          comboBox:
            datasource:
              $type: optionListDatasource
              options:
                - name: foo
                  value: foo
                - name: bar
                  value: bar
        linkField:
          label: linkField
          $type: linkField
          buttonSelectNewLabel: Select new ...
          buttonSelectOtherLabel: Select another ...
          preview:
            implementationClass: info.magnolia.contacts.app.ContactPreview
          chooser:
            workbenchChooser:
              appName: contacts-v8
        multi:
          label: multi
          i18n: true
          $type: multiField
          description: >
            A multi field composed by simple fields and a composite one (address).
            Field layout can be changed by specifying a different layout definition
          orderHandler:
            $type: jcrChildNodeOrderHandler
          itemProvider:
            $type: delegateToSubNodeProvider
          form:
            properties:
              uno:
                label: uno
                $type: textField
              dos:
                label: dos
                i18n: true
                $type: textField
              tres:
                label: tres
                $type: textField
              address:
                label: address
                i18n: true
                $type: compositeField
                itemProvider:
                  $type: fetchJcrSubNodeProvider
                properties:
                  city:
                    i18n: true
                    label: city
                    $type: textField
                  country:
                    label: country
                    $type: textField
        address:
          label: address
          i18n: true
          $type: compositeField
          description: >
            A composite field made by several components.
            Field layout can be changed by specifying a different layout definition
          itemProvider:
            $type: fetchJcrSubNodeProvider
          properties:
            city:
              label: city
              $type: textField
            country:
              label: country
              i18n: true
              $type: textField
        switchable:
          label: switchable
          i18n: true
          $type: switchableField
          field:
            $type: radioButtonGroupField
            datasource:
              $type: optionListDatasource
              options:
                - name: foo
                  value: foo
                - name: bar
                  value: bar
          itemProvider:
            $type: fetchJcrSubNodeProvider
          forms:
            - name: foo
              properties:
                foo:
                  label: foo
                  $type: textField
                  i18n: true
            - name: bar
              properties:
                bar:
                  label: bar
                  $type: richTextField
                  i18n: true
        jcrName:
          label: jcrName
          $type: textField
          validators:
            - $type: nodeNameValidator
        date:
          label: date
          $type: dateField
          type: java.util.Date
          time: true
      layout:
        $type: tabbedLayout
        tabs:
          personal:
            fields:
              - name: jcrName
              - name: salutation
              - name: firstName
              - name: lastName
              - name: email
              - name: tokens
              - name: date
              - name: richtext
          address:
            fields:
              - name: address
          more:
            fields:
              - name: select
              - name: twinSelect
              - name: multiSelect
              - name: radioGroup
              - name: checkboxGroup
              - name: linkField
              - name: multi
              - name: switchable
    footerLayout:
      $type: defaultEditorActionLayout
      primaryActions:
        commit: commit

Launching contacts-v8 app

Although the contacts-v8 app is part of Magnolia webapps, its app launcher tile is hidden by default.

To enable the app:

  • Open the Configuration app.
  • Delete the contacts-v8 property on the /modules/ui-admincentral/config/appLauncherLayout/hiddenApps node.
  • Log out and in again.

To open the app, enter the command open contacts-v8 app in the Find Bar or click the contacts-v8 app launcher tile.

Tasks and notifications apps

These are apps built completely with Magnolia 6 UI that show non-JCR content apps.

App descriptor of tasks-app

tasks-app/src/main/resources/tasks-app/apps/tasks-app.yaml
appClass: info.magnolia.task.app.TasksApp
class: info.magnolia.ui.contentapp.configuration.ContentAppDescriptor
icon: icon-tasks-app
label: Tasks Content App
datasource:
  class: info.magnolia.task.app.TasksDataSourceDefinition
subApps:
  new:
    class: info.magnolia.task.app.view.TasksBrowserDescriptor
    closable: false
    icon: icon-select
    category: UNCLAIMED
    actions: &actions
      'claim':
        'class': 'info.magnolia.task.app.actions.ClaimTasksActionDefinition'
        'icon': 'icon-user-public'
        'availability':
          'multiple': 'true'
          'rules':
            'CanClaimTaskRule':
              'assignee': 'false'
              'class': info.magnolia.task.app.actions.availability.CanAssignTaskAvailabilityRuleDefinition
              'status':
                'Created': 'Created'
                'InProgress': 'InProgress'
      'abort':
        'class': info.magnolia.task.app.actions.AbortTasksActionDefinition
        'decision': 'abort'
        'icon': 'icon-publish'
        'availability':
          'multiple': 'true'
          'rules':
            'canAbort':
              'assignee': 'false'
              'class': info.magnolia.task.app.actions.availability.TaskAvailabilityRuleDefinition
              'status':
                'Created': 'Created'
                'Failed': 'Failed'
                'InProgress': 'InProgress'
                'Scheduled': 'Scheduled'
          'access':
            'roles':
              'superuser': 'superuser'
      'archive':
        'class': 'info.magnolia.task.app.actions.ArchiveTasksActionDefinition'
        'icon': 'icon-delete'
        'availability':
          'multiple': 'true'
          'access':
            'roles':
              'superuser': 'superuser'
          'rules':
            'CanArchiveTaskRule':
              'assignee': 'false'
              'class': info.magnolia.task.app.actions.availability.TaskAvailabilityRuleDefinition
              'status':
                'Resolved': 'Resolved'
      previewTask:
        icon: icon-edit
        class: info.magnolia.ui.contentapp.action.OpenDetailSubappActionDefinition
        appName: tasks-app
        subAppName: detail
        viewType: edit
        availability:
          multiple: false
          rules:
            selectedOnGrid:
              implementationClass: info.magnolia.task.app.actions.availability.SingleTaskSelectedRule
    actionbar: &actionbar
      defaultAction: previewTask
      sections:
      - name: noselection
        label: Tasks
        availability:
          root: true
          nodes: false
          properties: false
        groups:
          - name: edit
            items:
              - name: previewTask
          - name: actions
            items:
              - name: claim
              - name: abort
              - name: archive
      - name: task
        label: Task
        availability:
          multiple: false
          rules:
            selectedOnGrid:
              implementationClass: info.magnolia.task.app.actions.availability.SingleTaskSelectedRule
        groups:
        - name: edit
          items:
          - name: previewTask
        - name: actions
          items:
          - name: claim
          - name: abort
          - name: archive
      - name: tasks
        label: Tasks
        availability:
          multiple: true
          rules:
            selectedOnGrid:
              implementationClass: info.magnolia.task.app.actions.availability.TasksSelectedRule
        groups:
        - name: actions
          items:
          - name: claim
          - name: abort
          - name: archive
    workbench: &workbench
      class: info.magnolia.task.app.view.TasksWorkbenchDefinition
      contentViews:
      - name: list
        class: info.magnolia.ui.contentapp.configuration.ListViewDefinition
        implementationClass: info.magnolia.task.app.view.TasksListView
        columns:
        - name: new
          caption: New
          class: info.magnolia.task.app.view.column.TaskNewColumnDefinition
        - name: comment
          caption: Task
          class: info.magnolia.task.app.view.column.TaskDescriptionColumnDefinition
        - name: status
          caption: Status
          class: info.magnolia.task.app.view.column.TaskStatusColumnDefinition
        - name: requestor
          caption: Sender
          renderer: com.vaadin.ui.renderers.TextRenderer
        - name: sentTo
          caption: Sent to
          class: info.magnolia.task.app.view.column.TaskSendToColumnDefinition
        - name: actorId
          caption: Assigned
          renderer: com.vaadin.ui.renderers.TextRenderer
        - name: mgnl:lastModified
          caption: Last change
          class: info.magnolia.task.app.view.column.TaskDateColumnDefinition
    datasource:
      class: info.magnolia.task.app.TasksDataSourceDefinition
      category: UNCLAIMED
  assigned:
    class: info.magnolia.task.app.view.TasksBrowserDescriptor
    closable: false
    category: ONGOING
    actions: *actions
    actionbar: *actionbar
    workbench: *workbench
    datasource:
      class: info.magnolia.task.app.TasksDataSourceDefinition
      category: ONGOING
  resolved:
    class: info.magnolia.task.app.view.TasksBrowserDescriptor
    closable: false
    category: DONE
    actions: *actions
    actionbar: *actionbar
    workbench: *workbench
    datasource:
      class: info.magnolia.task.app.TasksDataSourceDefinition
      category: DONE
  failed:
    class: info.magnolia.task.app.view.TasksBrowserDescriptor
    closable: false
    category: FAILED
    actions: *actions
    actionbar: *actionbar
    workbench: *workbench
    datasource:
      class: info.magnolia.task.app.TasksDataSourceDefinition
      category: FAILED
  scheduled:
    class: info.magnolia.task.app.view.TasksBrowserDescriptor
    closable: false
    category: SCHEDULED
    actions: *actions
    actionbar: *actionbar
    workbench: *workbench
    datasource:
      class: info.magnolia.task.app.TasksDataSourceDefinition
      category: SCHEDULED
  allTasks:
    class: info.magnolia.task.app.view.TasksBrowserDescriptor
    closable: false
    actions: *actions
    actionbar: *actionbar
    workbench: *workbench
  detail:
    class: info.magnolia.task.app.view.detail.TaskDetailDescriptor

App descriptor of notifications

magnolia-admincentral/src/main/resources/admincentral/apps/notifications.yaml
appClass: info.magnolia.admincentral.apps.notifications.NotificationContentApp
class: info.magnolia.ui.contentapp.configuration.ContentAppDescriptor
icon: icon-notifications-app
htmlCaption: true
datasource:
  class: info.magnolia.admincentral.apps.notifications.NotificationDataSourceDefinition
subApps:
  browser:
    class: info.magnolia.admincentral.apps.notifications.view.NotificationBrowserDescriptor
    subAppClass: info.magnolia.admincentral.apps.notifications.view.NotificationBrowserSubApp
    closable: false
    icon: icon-notifications-app
    actions: &actions
      deleteNotification:
        class: info.magnolia.admincentral.apps.notifications.action.DeleteNotificationActionDefinition
        icon: icon-delete
        availability:
          multiple: true
          rules:
            selectedOnGrid:
              implementationClass: info.magnolia.admincentral.apps.notifications.action.NotificationsSelectedRule
      previewNotification:
        icon: icon-edit
        class: info.magnolia.ui.contentapp.action.OpenDetailSubappActionDefinition
        appName: notifications
        subAppName: detail
        viewType: edit
        availability:
          multiple: false
          rules:
            selectedOnGrid:
              implementationClass: info.magnolia.admincentral.apps.notifications.action.NotificationSingleSelectedRule
    actionbar: &actionbar
      defaultAction: previewNotification
      sections:
        - name: notifications
          groups:
            - name: previewNotification
              items:
                - name: previewNotification
            - name: deleteNotification
              items:
                - name: deleteNotification
          availability:
            root: true
            multiple: true
            writePermissionRequired: true
            nodes: false
            properties: false
    workbench: &workbench
      class: info.magnolia.admincentral.apps.notifications.view.NotificationWorkbenchDefinition
      contentViews:
        - name: list
          class: info.magnolia.ui.contentapp.configuration.ListViewDefinition
          implementationClass: info.magnolia.admincentral.apps.notifications.view.NotificationListView
          columns: &columns
            - name: cleared
              caption: New
              class: info.magnolia.admincentral.apps.notifications.view.column.NotificationStatusColumnDefinition
            - name: type
              caption: Type
              class: info.magnolia.admincentral.apps.notifications.view.column.NotificationTypeColumnDefinition
            - name: notification
              caption: Notification text
              class: info.magnolia.admincentral.apps.notifications.view.column.NotificationTextColumnDefinition
            - name: sender
              caption: Sender
              renderer: com.vaadin.ui.renderers.TextRenderer
            - name: timestamp
              caption: Last change
              renderer: info.magnolia.admincentral.apps.notifications.view.column.LongToDateRenderer
  info:
    class: info.magnolia.admincentral.apps.notifications.view.NotificationBrowserDescriptor
    closable: false
    actions: *actions
    actionbar: *actionbar
    workbench: *workbench
    datasource:
      class: info.magnolia.admincentral.apps.notifications.NotificationDataSourceDefinition
      messageTypes:
        - INFO
  problems:
    class: info.magnolia.admincentral.apps.notifications.view.NotificationBrowserDescriptor
    closable: false
    actions: *actions
    actionbar: *actionbar
    workbench: *workbench
    datasource:
      class: info.magnolia.admincentral.apps.notifications.NotificationDataSourceDefinition
      messageTypes:
        - ERROR
        - WARNING
  detail:
    actions:
      deleteNotification:
        class: info.magnolia.admincentral.apps.notifications.action.DeleteNotificationActionDefinition
        implementationClass: info.magnolia.admincentral.apps.notifications.action.DeleteNotificationAndCloseAction
        icon: icon-delete
    actionbar:
      sections:
      - name: notifications
        class: info.magnolia.ui.actionbar.definition.ConfiguredActionbarSectionDefinition
        groups:
        - name: actions
          items:
          - name: deleteNotification
    class: info.magnolia.admincentral.apps.notifications.view.detail.NotificationDetailDescriptor
    itemProvider:
      class: info.magnolia.admincentral.apps.notifications.NotificationItemProviderDefinition
    form:
      properties:
        sender:
          label: Sender
          class: info.magnolia.ui.field.TextFieldDefinition
          readOnly: true
        subject:
          label: Subject
          class: info.magnolia.ui.field.TextFieldDefinition
          readOnly: true
        message:
          label: Notification text
          class: info.magnolia.ui.field.TextFieldDefinition
          rows: 5
          readOnly: true

Source code of Magnolia UI project

If you want to try out Magnolia 6 UI, the source code of the Magnolia UI project will provide many insights.

You can clone the public version of the Magnolia UI project from our git repository.

git clone ssh://git@git.magnolia-cms.com/platform/ui.pub.git
  • No labels