[#25] 5 things: cq:design_dialog [And how is it different from cq:dialog]
2 min readMay 7, 2023
- What is a design dialog in AEM?
A designDialog is a special kind of dialog that is available only at page design mode in Adobe Experience Manager (AEM). It allows authors to customize the design of a component by adjusting properties like colors, images, and layout.
In contrast, a cq:dialog is also a user interface element in AEM but is used to configure the functional aspects of a component, such as data sources and page properties. - Who uses the design dialog and cq:dialog, and for what purpose?
Content authors and editors use the design dialog to configure the visual aspects of a component, such as colors, images, and layout. Developers use the cq:dialog to configure the functional aspects of a component, such as data sources, behaviors, and page properties. - How is it different from a cq:dialog?
The main difference between a dialog and a designDialog is that for a dialog, content is stored at the page level, whereas for a designDialog, content is stored at the template level.
Additionally, a dialog is available to an author in the edit mode of the page while a designDialog is available to an author only in page design mode. - Why would I use a design dialog, why not do everything in cq:dialog only?
I would say, we can do everything in cq:dialog itself,a dn it would work the same way. But, using design dialog is more for aesthetics I feel.
It provides a separation of concerns, thecq:dialogshould be used to edit the content and functionality of a component, while thecq:designDialogis used to modify its layout, design, and styling. Keeping these concerns separate makes it easier to maintain and update your components over time. - How do you create a cq:design_dialog?
In the same way, we created a dialog in the last article. They are created in exactly the same way, the only difference being the node name. ( cq:design_dialog)
