Expand my Community achievements bar.

AEM - Touch UI Dialog - Assets Panel

Avatar

Community Advisor

7/31/22


AEM - Touch UI Dialog - Assets Panel

  by <Arun Patidar>

Overview

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.
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?

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 dialog.sidepanel.js file.
Full blog is here https://aemlab.blogspot.com/2019/07/aem-touch-ui-dialog-assets-panel.html 

Q&A

Please use this thread to ask questions

3 Comments

Avatar

Adobe Champion

8/1/22

Thanks for sharing - this is a great little addition to the UI.

Avatar

Administrator

8/2/22

@arunpatidar , Great use case. I have seen a few Qs in the community related to this. Thank you for sharing this with the community.