how to automate generate property in aem dialog

[gayatrik8153299]

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]

Need urgent help.

[Manjunath_K · Accepted solution]

@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

[gayatrik8153299]

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

[Manjunath_K]

@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.

[gayatrik8153299]

@Manjunath_K 

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

We are using AEM 6.4.5 instance

[Manjunath_K]

@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"/>