- Created by Dai Ha on 2020-06-22
I. Intro
Create a POC which implements a ControlPanel to replace current ActionBar
- POC requested via MGNLUI-5861 - Getting issue details... STATUS
- Mockup https://zpl.io/VqJdXjm
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
- Use M6 pages-app as one example to apply new control panel
- The changes that need to be done quite small on the side of pages-app
- Refer Pages app with control panel integrated
3. Sample configuration
actionbar-app Expand source
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
Overview
Content Tools