Consider an example where you want to create 5 different components. The components are functionally different but the dialog structure they use is somewhat the same. There is a requirement to add a new tab named “Navigation” in dialog of each component. The new tab named “Navigation” will define “Name of the button”, “color of the button”, “Page address it will redirect to” and so on.
From a development perspective, the task seems to be repetitive. If, it takes 45 min to develop a new tab for one component. It will consume (45*5 min) 4 hrs. 15 min. of a developer to complete the task.
What if you can create the tab for one dialog and use it for others using just a two-line of code?
If you have created a “Navigation” tab once, you do not need to recreate it for other components. You can leverage the power of AEM, where “everything is a resource”. Every node in the repository has its own path. Using path one can get hold of a node and its properties and hence can reuse it.
We can utilize”cqinclude” property in AEM to reuse the “Navigation” tab for other components.
If you have created a “Navigation” tab once, you do not need to recreate it for other components. You can leverage the power of AEM, where “everything is a resource”. Every node in the repository has its own path. Using path one can get hold of a node and its properties and hence can reuse it.
We can utilize”cqinclude” property in AEM to reuse the “Navigation” tab for other components.
Advantages of cqinclude
· Same properties, labels and validations as the parent copy
· Consistent authoring experience as copied dialog are replica of each other
· Same properties, labels and validations as the parent copy
· Consistent authoring experience as copied dialog are replica of each other
How?
Example: we want to copy “tab3” [title: Advanced Image Properties] from “mobiletextimage” out-of-the-box component to my custom made component.
1. Navigate to the Dialog field you want to copy. Here we want to copy “tab3” [title: Advanced Image Properties] of the “mobiletextimage” component. The path of the highlighted resource can be copied from the address bar. Copy the path of the dialog tab from the address bar below the menu items.
Path is /libs/foundation/components/mobiletextimage/dialog/items/tab3
2. The copied path will be pasted in the property on the new dialog field with .infinity.json extension
/libs/foundation/components/mobiletextimage/dialog/items/tab3.infinity.json
<url>.infinity.json return JSON related to that particular node with all its sub child data.
3. On your custom components dialog, create a new node, the type of new node should match the type of the field you want to copy.
In this example, we are coping the field of type [jcr:primaryType : cq:widget] hence, the new node type must be [jcr:primaryType : cq:widget].
Once the node is added, add below properties.
Example: we want to copy “tab3” [title: Advanced Image Properties] from “mobiletextimage” out-of-the-box component to my custom made component.
1. Navigate to the Dialog field you want to copy. Here we want to copy “tab3” [title: Advanced Image Properties] of the “mobiletextimage” component. The path of the highlighted resource can be copied from the address bar. Copy the path of the dialog tab from the address bar below the menu items.
Path is /libs/foundation/components/mobiletextimage/dialog/items/tab3
2. The copied path will be pasted in the property on the new dialog field with .infinity.json extension
/libs/foundation/components/mobiletextimage/dialog/items/tab3.infinity.json
<url>.infinity.json return JSON related to that particular node with all its sub child data.
3. On your custom components dialog, create a new node, the type of new node should match the type of the field you want to copy.
In this example, we are coping the field of type [jcr:primaryType : cq:widget] hence, the new node type must be [jcr:primaryType : cq:widget].
Once the node is added, add below properties.
------------------------------------------------------------------------
Name Type Value
Name Type Value
------------------------------------------------------------------------
xtype String cqinclude
path String /libs/foundation/components
xtype String cqinclude
path String /libs/foundation/components
/mobiletextimage/dialog/items/tab3.infinity.json
------------------------------------------------------------------------
After saving the changes, If you refresh the dialog, it will reflect the new changes as below.
No comments:
Post a Comment
If you have any doubts or questions, please let us know.