In order to author the images, side panel should be opened before editing via dialog.
AEM Page editor with side panel and dialog opened
Authoring image using drag and drop
If you forgot to open the side panel before opening the dialog then you need to close the dialog, open side panel and open the dialog again to author assets.
This is kind of annoying to close the dialog and open it again just to author images/Assets.
Why can't the side panel open from the dialog without closing the dialog?
That's it, here you go -
Side panel toggle button in dialog header
side panel toggle from dailog
How to do it
This can be achieved by simply adding a side panel toggle button in the dialog header alongside help or other buttons. When clicking on this button, the click event will be triggered on the actual side panel toggle button and rest will be OOTB.
Create a clientlibs of category 'cq.authoring.dialog'
Create js.txt and dialog.sidepanel.js files with below content or click on file name to get file from github.
js.txt
dialog.sidepanel.js
dialog.sidepanel.js
(function($, $document) {
"use strict";
var flag = true;
$document.on("dialog-ready", function() {
var buttonHTML = '<button is="coral-button" icon="railLeft" variant="minimal" class="cq-dialog-header-action cq-dialog-railLeft coral-Button" type="button" title="Toggle Side Panel" size="M">';
buttonHTML += '<coral-icon class="coral-Icon coral-Icon--sizeS coral-Icon--railLeft coral3-Icon--railLeft" icon="railLeft" size="S" role="img" aria-label="rail left"></coral-icon>';
buttonHTML += '<coral-button-label></coral-button-label>';
buttonHTML += '</button>';
$('.cq-Dialog coral-dialog-header.cq-dialog-header>div.cq-dialog-actions > button:nth-child(1)').after(buttonHTML);
if (flag)
$(document).on('click', 'button.cq-dialog-railLeft', toggleLeftRail);
function toggleLeftRail() {
flag = false;
$('.editor-GlobalBar coral-actionbar-primary coral-actionbar-item button.toggle-sidepanel').click();
}
});
})($, $(document));
Or
Package
You can install below packages from GitHub to enable side panel option in touch ui dialog. These works in AEM 6.3+
However, packages contain:
1. Clientlibs to enable side panel option in touch ui dialog.
2. Clientlibs to enable displaying touch ui field in two-column layout in floating touch UI dialog
If you install this package, Below files will be installed in the repository at
/apps/commons/clientlibs/dialog/js.txt
/apps/commons/clientlibs/dialog/js/dialog.sidepanel.js
Other files are getting used to showing field in the same row.
/apps/commons/clientlibs/dialog/js/dialog.field.2column-layout.js
/apps/commons/clientlibs/dialog/css.txt
/apps/commons/clientlibs/dialog/css/dialog.field.2column-layout.css
No comments:
Post a Comment
If you have any doubts or questions, please let us know.