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

I. Intro 

Create a POC which implements a ControlPanel to replace current ActionBar

II. New ControlPanel

1. Class diagram

  • Introduce ControlPanel which reads ControlPanelDefinition (and it sub/child definitions/implementation). This ControlPanel  should be used as 1-1 replacement wherever a ActionBar  need to be removed. Main component of ControlPanel  is a TabSheet.
  • TabPanel is a wrapped VerticalLayout  which reads TabPanelDefinition for necessary nested actions/components. TabPanel presents a Tab of the TabSheet in ControlPanel .
  • By default, there are PreviewTabPanel to present a TabPanel has preview control and GroupActionTabPanel to present a TabPanel with actions. 
  • The PreviewTabPanel communicates with DetailSubappPresenter  by PreviewContext by manipulating PreviewPayload 

Main code change on UI side: ControlPanel facilities

2. Usage in M6 Pages app

3. Sample configuration

actionbar-app
icon: icon-webpages-app
class: info.magnolia.ui.contentapp.configuration.ContentAppDescriptor
appClass: info.magnolia.ui.framework.app.BaseApp
datasource:
  $type: jcrDatasource
  workspace: website
  allowedNodeTypes:
    - mgnl:page
subApps:
  browser:
    class: info.magnolia.ui.contentapp.configuration.BrowserDescriptor
    actions:
      add:
        $type: openDialogAction
        icon: icon-add-item
        populate: false
        dialogId: pages-app:createPage
        availability:
          root: true
          writePermissionRequired: true
          nodeTypes:
            page: mgnl:page
          rules:
            notDeleted: ¬Deleted
              $type: jcrIsDeletedRule
              negate: true
      confirmDeletion:
        $type: deleteNodesConfirmationAction
        icon: icon-delete
        successActionName: delete
        availability:
          multiple: true
          writePermissionRequired: true
          nodeTypes:
            page: mgnl:page
          rules:
            notDeleted: *notDeleted
      delete:
        $type: markAsDeletedAction
        availability: ¬DeletedAvailability
          rules:
            notDeleted: *notDeleted
      preview:
        icon: icon-instant_preview
        $type: openDetailSubappAction
        appName: pages-app
        subAppName: detail
        viewType: view
        availability: *notDeletedAvailability
      edit: &edit
        icon: icon-edit
        $type: openDetailSubappAction
        appName: actionbar-app
        subAppName: detail
        viewType: edit
        availability: *notDeletedAvailability
      rename:
        icon: icon-edit
        $type: openDialogAction
        dialogId: pages-app:renamePage
        availability: *notDeletedAvailability
      duplicate:
        icon: icon-duplicate
        $type: duplicateNodeAction
        availability: *notDeletedAvailability
      changeTemplate:
        icon:  icon-templating-app
        $type: openDialogAction
        dialogId: pages-app:changePageTemplate
        availability: *notDeletedAvailability
      move:
        icon: icon-move
        class: info.magnolia.ui.contentapp.action.MoveActionDefinition
        availability: ¬DeletedMultipleAvailability
          multiple: true
          rules:
            notDeleted: *notDeleted
      copy:
        icon: icon-copy
        $type: copyContentAction
        availability: *notDeletedMultipleAvailability
#      paste:
#        icon: icon-paste
#        $type: pasteContentAction
#        availability:
#          root: true
#          nodeTypes:
#            page: mgnl:page
#          rules:
#            canPasteRule:
#              $type: canPasteContentRule
#            notDeleted: *notDeleted
      publish: &publish
        icon: icon-publish
        $type: jcrCommandAction
        command: publish
        catalog: versioned
        availability:
          rules:
            notDeleted: *notDeleted
            isPublishable: &isPublishable
              $type: jcrPublishableRule
      publishDeletion:
        icon: icon-publish
        $type: jcrCommandAction
        command: publish
        availability:
          multiple: true
          rules:
            isDeleted: &isDeleted
              $type: jcrIsDeletedRule
              negate: false
      publishRecursive:
        icon: icon-publish-incl-sub
        $type: jcrCommandAction
        command: publish
        asynchronous: true
        params:
          recursive: true
        availability:
          rules:
            notDeleted: *notDeleted
            hasSubPages:
              $type: jcrHasChildrenRule
            isPublishable: *isPublishable
      unpublish: &unpublish
        icon: icon-unpublish
        $type: jcrCommandAction
        command: unpublish
        availability:
          rules:
            notDeleted: *notDeleted
            isPublished:
              $type: jcrPublishedRule
      export:
        icon: icon-export
        $type: exportAction
        availability: *notDeletedAvailability
      import:
        icon: icon-import
        $type: openDialogAction
        dialogId: ui-framework-jcr:import
        availability:
          root: true
          rules:
            notDeleted: *notDeleted
      versionShow:
        icon: icon-show-versions
        $type: openDialogAction
        dialogId: pages-app:versions
        availability:
          rules:
            notDeleted: *notDeleted
            hasVersionsRule: &hasVersionsRule
              class: info.magnolia.ui.availability.rule.JcrHasVersionsRuleDefinition
      versionRestore:
        icon: icon-retrieve-versions
        $type: openDialogAction
        dialogId: ui-framework-jcr:restoreVersion
        availability:
          writePermissionRequired: true
          rules:
            hasVersionsRule: *hasVersionsRule
            isDeleted: *notDeleted
      restorePreviousVersion:
        icon: icon-undo
        parentNodeTypeOnly: true
        $type: restorePreviousJcrVersionAction
        availability:
          writePermissionRequired: true
          rules:
            hasVersionsRule: *hasVersionsRule
            isDeleted: *isDeleted
      showPreviousVersion:
        icon: icon-view
        $type: showPreviousJcrVersionAction
        appName: pages-app
        subAppName: detail
        viewType: version
        availability:
          writePermissionRequired: true
          rules:
            hasVersionsRule: *hasVersionsRule
            isDeleted: *isDeleted

    actionbar:
      defaultAction: edit
      deleteAction: confirmDeletion
      sections:
        - name: crud
          availability:
            root: true
            rules:
              notDeleted: *notDeleted
          groups:
            - name: add-delete
              items:
                - name: add
                - name: confirmDeletion
            - name: edit
              items:
                - name: preview
                - name: edit
                - name: rename
                - name: duplicate
                - name: changeTemplate
                - name: move
                - name: copy
                - name: paste
            - name: publish
              items:
                - name: publish
                - name: publishRecursive
                - name: unpublish
            - name: exportimport
              items:
                - name: export
                - name: import
            - name: versioning
              items:
                - name: versionShow
                - name: versionRestore
        - name: pageDelete
          availability:
            rules:
              isDeleted: *isDeleted
          groups:
            - name: add-delete
              items:
                - name: add
                - name: confirmDeletion
            - name: edit
              items:
                - name: preview
                - name: edit
                - name: rename
                - name: duplicate
                - name: changeTemplate
                - name: move
                - name: copy
                - name: paste
            - name: publish
              items:
                - name: publishDeletion
                - name: publishRecursive
                - name: unpublish
            - name: exportimport
              items:
                - name: export
                - name: import
            - name: versioning
              items:
                - name: showPreviousVersion
                - name: restorePreviousVersion
    workbench:
      contentViews:
        - name: tree
          dropConstraint:
            class: info.magnolia.pages.app.TemplateTypeRestrictionDropConstraintDefinition
          multiSelect: true
          $type: treeView
          columns:
            jcrName: &jcrNameColumn
              $type: jcrTitleColumn
              nodeTypeToIcon:
                mgnl:page: icon-webpages-app
            title: &titleColumn
              filterComponent:
                $type: textField
            mgnl:template: &templateColumn
              editable: false
              class: info.magnolia.pages.app.column.TemplateNameColumnDefinition
              filterComponent:
                $type: comboBoxField
                emptySelectionAllowed: true
                textInputAllowed: true
                filteringMode: CONTAINS
                datasource:
                  name: available-page-templates
            jcrPublishingStatus: &activationStatusColumn
              $type: jcrStatusColumn
              width: 130
            mgnl:lastModified: &lastModifiedColumn
              $type: dateColumn
              editable: false
              width: 200
        - name: list
          $type: listView
          multiSelect: true
          columns:
            jcrName: *jcrNameColumn
            jcrPath:
              $type: jcrPathColumn
            title: *titleColumn
            mgnl:template: *templateColumn
            jcrPublishingStatus: *activationStatusColumn
            mgnl:lastModified: *lastModifiedColumn

  detail:
    class: info.magnolia.pages.app.detail.PageDetailDescriptor
    extensionViews:
      title:
        class: info.magnolia.pages.app.detail.extension.PageTitleViewDefinition
      status:
        class: info.magnolia.pages.app.detail.extension.PublishingStatusViewDefinition
      platform:
        class: info.magnolia.pages.app.detail.extension.PlatformSelectorViewDefinition
      link:
        class: info.magnolia.pages.app.detail.extension.NativePagePreviewLinkViewDefinition
      language:
        class: info.magnolia.pages.app.detail.extension.LanguageSelectorViewDefinition
    datasource:
      $type: jcrDatasource
      workspace: website
    itemProvider:
      $type: jcrNodeFromLocationProvider
    actions:
      editComponent: &edit
        icon: icon-edit
        class: info.magnolia.pages.app.detail.action.EditElementActionDefinition
        availability:
          rules:
            editable: &isEditable
              class: info.magnolia.pages.app.detail.action.availability.IsElementEditableRuleDefinition
      editPage: *edit
      editElement: *edit
      editArea:
        icon: icon-edit
        class: info.magnolia.pages.app.detail.action.EditElementActionDefinition
        availability:
          rules:
            editable: *isEditable
            created:
              class: info.magnolia.pages.app.detail.action.availability.IsAreaCreatedRuleDefinition
      startMoveComponent:
        class: info.magnolia.pages.app.detail.action.MoveComponentActionDefinition
        icon: icon-move
        start: true
        availability:
          rules:
            movable:
              class: info.magnolia.pages.app.detail.action.availability.IsComponentMovableRuleDefinition
            isNotMoving:
              class: info.magnolia.pages.app.detail.action.availability.IsComponentMovingRuleDefinition
              negate: true
      stopMoveComponent:
        class: info.magnolia.pages.app.detail.action.MoveComponentActionDefinition
        icon: icon-delete
        start: false
        serverSide: true
        availability:
          rules:
            isMoving:
              class: info.magnolia.pages.app.detail.action.availability.IsComponentMovingRuleDefinition
      sortComponent:
        class: info.magnolia.pages.app.detail.action.SortComponentActionDefinition
      preview:
        class: info.magnolia.pages.app.detail.action.ReopenPageActionDefinition
        appName: actionbar-app
        icon: icon-switch-preview
        viewType: view
      editMode:
        class: info.magnolia.pages.app.detail.action.ReopenPageActionDefinition
        appName: actionbar-app
        icon: icon-edit
        viewType: edit
      delete:
        class: info.magnolia.pages.app.detail.action.DeleteElementActionDefinition
      deleteComponent:
        icon: icon-delete
        $type: confirmationAction
        successActionName: delete
        availability:
          rules:
            deletable:
              class: info.magnolia.pages.app.detail.action.availability.IsComponentDeletableRuleDefinition
      deleteArea:
        icon: icon-delete
        $type: confirmationAction
        successActionName: delete
        availability:
          rules:
            isOptional:
              class: info.magnolia.pages.app.detail.action.availability.IsAreaOptionalRuleDefinition
            created:
              class: info.magnolia.pages.app.detail.action.availability.IsAreaCreatedRuleDefinition
      addArea:
        class: info.magnolia.pages.app.detail.action.CreateAreaActionDefinition
        icon: icon-add-item
        availability:
          rules:
            isOptional:
              class: info.magnolia.pages.app.detail.action.availability.IsAreaOptionalRuleDefinition
            notCreated:
              class: info.magnolia.pages.app.detail.action.availability.IsAreaCreatedRuleDefinition
              negate: true
      addComponent:
        $type: openDialogAction
        dialogId: pages-app:newComponent
        icon: icon-add-item
        availability:
          rules:
            addible:
              class: info.magnolia.pages.app.detail.action.availability.IsAreaAddibleRuleDefinition
      changeComponentTemplate:
        $type: openDialogAction
        dialogId: pages-app:componentTemplate
        icon: icon-edit
      copy:
        $type: copyContentAction
        icon: icon-copy
        availability:
          root: true
          rules:
            CanCopyContentRuleDefinition:
              class: info.magnolia.ui.contentapp.action.clipboard.CanCopyContentRuleDefinition
      paste:
        class: info.magnolia.pages.app.detail.action.PasteComponentsActionDefinition
        icon: icon-paste
      activate: *publish
      deactivate: *unpublish
    controlPanel:
      panels:
        edit:
          label: Edit
          panelActiveAction: editMode
          icon: icon-edit
          class: info.magnolia.ui.controlpanel.definition.GroupActionTabPanelDefinition
          sections:
            pageActions:
              groups:
                edit:
                  items:
                    - name: editPage
                    - name: preview
              availability:
                nodeTypes:
                  page: mgnl:page
                rules:
                  inEdit:
                    class: info.magnolia.pages.app.detail.action.availability.IsEditRuleDefinition
            pagePreviewActions:
              groups:
                preview:
                  items:
                    - name: editMode
                publish:
                  items:
                    - name: activate
                    - name: deactivate
              availability:
                rules:
                  inPreview:
                    class: info.magnolia.pages.app.detail.action.availability.IsPreviewRuleDefinition
            areaActions:
              groups:
                preview:
                  items:
                    - name: preview
                addingActions:
                  items:
                    - name: addArea
                    - name: deleteArea
                    - name: addComponent
                edit:
                  items:
                    - name: editArea
                    - name: copy
                    - name: paste
              availability:
                nodeTypes:
                  area: mgnl:area
            componentActions:
              groups:
                preview:
                  items:
                    - name: preview
                delete:
                  items:
                    - name: deleteComponent
                edit:
                  items:
                    - name: editComponent
                    - name: changeComponentTemplate
                    - name: startMoveComponent
                    - name: stopMoveComponent
                    - name: copy
              availability:
                nodeTypes:
                  area: mgnl:component
        preview:
          label: Preview
          panelActiveAction: preview
          icon: icon-instant_preview
          class: info.magnolia.ui.controlpanel.definition.PreviewTabPanelDefinition
          previewPayloadClass: info.magnolia.ui.controlpanel.context.DefaultPreviewPayload
          fields:
#            channel:
#              $type: channelCompositeView
            template:
              $type: comboBoxField
              label: Template
              datasource:
                name: available-page-templates
            country:
              $type: comboBoxField
              label: Country
              datasource:
                $type: optionListDatasource
                options:
                  - name: vi
                    value: vn
                    label: Vietnam
                  - name: de
                    value: de
                    label: Germany
            visitorType:
              $type: comboBoxField
              label: Visistor Type
              datasource:
                $type: optionListDatasource
                options:
                  - name: new-visistors
                    value: new-visistors
                    label: New visistors
                  - name: public-users
                    value: public-users
                    label: Users
            date:
              $type: dateField
              label: Date
            travelInterest:
              $type: comboBoxField
              label: Travel Interest
              datasource:
                $type: optionListDatasource
                options:
                  - name: active
                    value: active
                    label: Active
                  - name: sporty
                    value: Sporty
                    label: Sporty

4. POC Outcome samples


  • No labels