AEM - Touch UI Dialog - Assets Panel

In Touch UI dailog when we use file upload type e.g. cq/gui/components/authoring/dialog/fileupload or granite/ui/components/foundation/form/fileupload field to allow authoring assets from the side panel.
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.

1. Create a clientlibs of category 'cq.authoring.dialog'
2. 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 For AEMaaCS

https://github.com/arunpatidar02/aemaacs-aemlab/blob/master/ui.apps/src/main/content/jcr_root/apps/aemlab/oneweb/concept/clientlibs/author/clientlib-dialog-sidepanel-toggle/js/dialog.sidepanel.js 

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, more details at https://aemlab.blogspot.com/2019/07/aem-touch-ui-dialog-fields-in-same-row.html.

• /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