Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

how to automate generate property in aem dialog

Avatar

Level 2

Hi All,

We have a nav tab component and it has multifield and multifield has 2 text field (navid and navname).

We need to add one more property like some thing tabcount whenever the nav tab component used on the page.

and this property will not be shown in the dialog.

we need to auto generate this field in the backend.

we have created one test page and dropped nav tab component and we have authored 2 tabs.

each tab is multifield that contains nav id and nav name fields.

can we add one more property for each tab below navid and navname in crxde using java code.

Could you please assist on this and need your help urgent.

can we set property using resource?

gayatrik8153299_0-1601894831210.png

 

1 Accepted Solution

Avatar

Correct answer by
Level 8

@gayatrik8153299 

We have 2 options.

 

1. If this autogenerated tabcount need to be secured then add below mentioned afteredit listener in cq:listeners of component & whenever component is updated this generateTabCount() function will be triggered, you can write ajax request call to servlet in this method & in servlet you can iterate multifield resource node & using ModifiableValueMap you can add this tabcount if its not generated/exist.

 

<cq:listeners
jcr:primaryType="cq:EditListenersConfig"
afterdelete="function(){generateTabCount()}"
afterinsert="REFRESH_PAGE"
aftermove="REFRESH_SELF"/>

 

2. If this autogenerated tabcount can be exposed to client side/less secured, then you can create additional field in multifield as mentioned below with hidden class name so it will be hidden, write author clientlib listener & on dialog submit generate tabcount & assign values to these hidden tabcount dialog fields.

 

<tabCount
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
granite:class="unique-tab-count hidden"
name="./tabCount"/>

 

listener js

(function ($, $document) {
"use strict";
$(document).on("click", ".cq-dialog-submit", function (e) {
$('.unique-tab-count').each(function(index){
var tabCount = $(this).val();

if(!tabCount){ //if tab count not generated previously
tabCount = 'unique-id';// generate & assign unique id here
$(this).val(tabCount);
}
});
});
})($, $(document));

 

-Manjunath

View solution in original post

6 Replies

Avatar

Correct answer by
Level 8

@gayatrik8153299 

We have 2 options.

 

1. If this autogenerated tabcount need to be secured then add below mentioned afteredit listener in cq:listeners of component & whenever component is updated this generateTabCount() function will be triggered, you can write ajax request call to servlet in this method & in servlet you can iterate multifield resource node & using ModifiableValueMap you can add this tabcount if its not generated/exist.

 

<cq:listeners
jcr:primaryType="cq:EditListenersConfig"
afterdelete="function(){generateTabCount()}"
afterinsert="REFRESH_PAGE"
aftermove="REFRESH_SELF"/>

 

2. If this autogenerated tabcount can be exposed to client side/less secured, then you can create additional field in multifield as mentioned below with hidden class name so it will be hidden, write author clientlib listener & on dialog submit generate tabcount & assign values to these hidden tabcount dialog fields.

 

<tabCount
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
granite:class="unique-tab-count hidden"
name="./tabCount"/>

 

listener js

(function ($, $document) {
"use strict";
$(document).on("click", ".cq-dialog-submit", function (e) {
$('.unique-tab-count').each(function(index){
var tabCount = $(this).val();

if(!tabCount){ //if tab count not generated previously
tabCount = 'unique-id';// generate & assign unique id here
$(this).val(tabCount);
}
});
});
})($, $(document));

 

-Manjunath

Avatar

Level 2

Thank you Manjunath.. We need to make this tabCount as first property before navid and navname when we submit dialog.

Avatar

Level 8

@gayatrik8153299 

If you have any other specific requirement on order of this field in multifield then define this before navid and navname else placing order of this field in dialog doesn't matter since its as hidden field.

Avatar

Level 2

@Manjunath_K 

I tried the second option below with listener js but property is not getting created.. please suggest us.

gayatrik8153299_0-1601906376892.png

 

gayatrik8153299_1-1601906404724.png

We are using AEM 6.4.5 instance

 

Avatar

Level 8

@gayatrik8153299 

The way you have included listener js in 2nd screenshot is not correct. If you are following 2nd option then

 

1. create authoring clientlib at component level.
2. include listener js file in that clientlib with below mentioned clientlib category name.

 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:ClientLibraryFolder"
categories="cq.authoring.dialog"/>