Reuse Common Dialog Parts in AEM Components

[#1]

Reuse Common Dialog Parts in AEM Components

  by Mahedi Sabuj

Overview

One of the recurring challenges in AEM development? 𝗗𝘂𝗽𝗹𝗶𝗰𝗮𝘁𝗶𝗻𝗴 𝗱𝗶𝗮𝗹𝗼𝗴 𝗳𝗶𝗲𝗹𝗱𝘀 like text color, background color, or alt text across multiple components. It’s repetitive and error-prone.

𝗧𝗵𝗲 𝘀𝗺𝗮𝗿𝘁𝗲𝗿 𝘄𝗮𝘆: Create 𝗿𝗲𝘂𝘀𝗮𝗯𝗹𝗲 𝗱𝗶𝗮𝗹𝗼𝗴 𝗳𝗿𝗮𝗴𝗺𝗲𝗻𝘁𝘀 that can be included across different components.

In this article, I dive into:

• How to reuse a common dialog 𝘢𝘴 𝘪𝘴 using 𝚐𝚛𝚊𝚗𝚒𝚝𝚎/𝚞𝚒/𝚌𝚘𝚖𝚙𝚘𝚗𝚎𝚗𝚝𝚜/𝚌𝚘𝚛𝚊𝚕/𝚏𝚘𝚞𝚗𝚍𝚊𝚝𝚒𝚘𝚗/𝚒𝚗𝚌𝚕𝚞𝚍𝚎
• How to 𝗲𝘅𝘁𝗲𝗻𝗱 𝗼𝗿 𝗼𝘃𝗲𝗿𝗿𝗶𝗱𝗲 dialog properties using 𝚜𝚕𝚒𝚗𝚐:𝚛𝚎𝚜𝚘𝚞𝚛𝚌𝚎𝚂𝚞𝚙𝚎𝚛𝚃𝚢𝚙𝚎 — adding flexibility without losing reusability.

For example, a 𝗰𝗼𝗹𝗼𝗿 𝗽𝗶𝗰𝗸𝗲𝗿 𝗱𝗶𝗮𝗹𝗼𝗴 𝗳𝗿𝗮𝗴𝗺𝗲𝗻𝘁 can be reused in any component, ensuring consistency and making updates a breeze. Even better, by extending these dialogs, you can customize fields while keeping a clean, maintainable structure.

If you're developing in AEM and still copy-pasting dialog fields, it’s time to rethink your strategy.

Read the full article here https://ms-29.com/aem/sites/reuse-common-dialog-parts-in-aem-components

Q&A

Please use this thread to ask questions relating to this article

[#2]

Helpful, thanks @Mahedi_Sabuj 

[#3]

Thanks @Mahedi_Sabuj for sharing this. Reusing dialog fragments is such a smart way to cut down duplication and keep things consistent across components. One question I had: when you’re extending these reusable dialogs with sling:resourceSuperType, how do you usually handle versioning or changes later on (say if a shared field like a color picker gets updated, but one component needs to stick with the old behavior)? Curious how you balance reusability with flexibility over time.