How to encapsulate and share functionality (dialog fields, rendered markup) between components?

[eric_estes]

Is there a way to effectively create my own UI component that can be added to a component's dialog (rendering the UI component's own specific fields) and referenced in the component's template (rendering the UI component's own markup)?

[smacdonald2008]

Sounds like you are extending component dialogs: 

http://stackoverflow.com/questions/21293839/cq5-inheriting-extended-dialogs

I personally would never do this. I find it much better to create a JCR node structure for a component dialog. You can create a TOuch UI or a Classic UI dialog. Therefore each component has its own JCR Dialog node structure (or 2 - one for Touch UI and one for Classic UI). 

However - this is my personal preference. Other community members may have different views. 

As far as rendered markup - that is not best practice - each component should have its own JSP or Sightly code! 

[eric_estes]

But if a group of component types all share a certain bit of functionality (both dialog fields and rendered markup), why should that not be shared?

Ideally I'd like to be able to encapsulate functionality, basically make a sub-component that can be utilized by components. For example, if a lot of my components had background images, I'd like to be able to make a "BackgroundImage" sub-component where I could:

• add a BackgroundImage node to a component's dialog that would create an instance of the BackgroundImage sub-component and spit out its own labels and upload fields, not unlike how you can add Granite checkboxes, etc
• add some sort of <sly-import> tag to the component's template that would render BackgroundImage's own markup that referenced that instance's fields and properties

[smacdonald2008]

As of now   -  AEM does not support component fragments.  You would have to place logic to bring in background images in each component. I see what you mean - that would be a useful feature. 

[Lokesh_Shivalingaiah]

You can extend the dialog from the other component but you can only override the rendering markup like JSP or html. If you have the different components, you can have an individual rendering markup but include the markup of the other component if needed.

[smacdonald2008]

Here is an out of the box way that a dialog tab defined in one place is used in another dialog. Look here: 

/libs/foundation/components/form/upload/dialog/items/first/items

Notice the properties:

•     xtype - cqinclude
• path  - /libs/foundation/components/form/defaults/items.infinity.json

If you look under path in the JCR - you will find where the part of the dialog is defined.

This is how you can define a dialog in 1 place and use it in other dialogs. 

Hope this helps.