Wednesday, 25 June 2014

Dialog using widgets from another Dialog in CQ5

In this post, I will show you 

how to use existing widgets in one dialog into another dialog in CQ5i.e. 
Use of widgets of one dialog into another dialog in CQ5.

My project structure is - 
For this demo I have created a component named as customDialogDemo under /apps/blogs/content.

Under this component I have created a dialog with two tabs.
1. textTab
2. NewFields

I have show you the use of NewFields tab in my last blog where, I create a combobox with dinamically generated options

for this post, I will use textTab. create a cq:WidgetCollection, named as items under textTab node.

Under this items node create a cq:Widget node & name it as text.

Now, this text widget points to the Out Of The Box (OOTB) text component. i.e. you don't have to create the child node and config nodes for new dialog you can directly include these properties from OOTB Text component.

for including a widget from one dialog into another dialog you have to use two properties.
xtype = cqinclude
path = <url to parent widget node>.infinity.json

<url>.infinity.json return JSON related to that particular node with its all sub child data.

just set these two properties as show below -

Your dialog is ready just drop your component and check it will show you a rich textbox under textTab tab.

you output screen will be same as that of original text component. this text value will be stored under this component node with property name text.

Note : use similar nodes types for including i.e. panel for panel, cq:Widget for cq:Widget, cq:WidgetCollection for cq:WidgetCollection.

Namah Shivay