adobe · rismehta · Sep 18, 2024 · Sep 17, 2024
diff --git a/...oot/apps/forms-core-components-it/clientlibs/clientlib-it-custom-function/js/functions.js b/...oot/apps/forms-core-components-it/clientlibs/clientlib-it-custom-function/js/functions.js
@@ -239,6 +239,8 @@ function customMessageUsingInvalidApi(field, globals) {
     }
 }
 
+let label = '',
+    panelLabel = '';
 
 /**
  * updatePanelLabel
@@ -247,18 +249,18 @@ function customMessageUsingInvalidApi(field, globals) {
  * @param {scope} globals
  */
 function updatePanelLabel(repeatablePanel, globals) {
-    var label = globals.field.who_lives_name.$label.value;//field is current field
-    var panelLabel = globals.field.$label.value;
-    var currentIndex = globals.field.$index; // to prevent unnecessary dom update
 
-    globals.functions.setProperty(globals.field,{label : {"value" : panelLabel + (globals.field.$index+1)}}); // on initialize panel label not working right now, will be fixed soon
-    globals.functions.setProperty(globals.field.who_lives_name,{label : {"value" : label+"<b>"+(globals.field.$index+1)+"</b>"}});
+    if (globals.field.$fieldType === 'panel' && label === '') {
+        label = globals.field.who_lives_name.$label.value;
+        panelLabel = globals.field.$label.value;
+        globals.functions.setProperty(globals.field, {label: {"value": panelLabel + (globals.field.$index + 1)}});
+        globals.functions.setProperty(globals.field.who_lives_name, {label: {"value": label + "<b>" + (globals.field.$index + 1) + "</b>"}});
+    }
+
     // walk through other instances and update their label
     repeatablePanel.$parent.forEach(panel => {
-        if (currentIndex != panel.$index) {
-            globals.functions.setProperty(panel,{label : {"value" : panelLabel + (panel.$index+1)}});
-            globals.functions.setProperty(panel.who_lives_name,{label : {"value" : label+"<b>"+(panel.$index+1)+"</b>"}});
-        }
+        globals.functions.setProperty(panel,{label : {"value" : panelLabel + (panel.$index+1)}});
+        globals.functions.setProperty(panel.who_lives_name,{label : {"value" : label+"<b>"+(panel.$index+1)+"</b>"}});
     });
 }
 
@@ -274,3 +276,18 @@ function addPanelInstance(panel,globals)
 {
     globals.functions.dispatchEvent(panel,'addInstance', globals.field.$parent.$index + 1);
 }
+
+
+/**
+ * Tests remove instance with dispatchEvent
+ * @name removePanelInstance
+ * @param {object} panel
+ * @param {scope} globals
+ */
+function removePanelInstance(panel,globals)
+{
+    globals.functions.dispatchEvent(panel, 'removeInstance', globals.field.$parent.$index);
+    panel.forEach(p => {
+        globals.functions.dispatchEvent(p, 'initialize');
+    })
+}
diff --git a/...-components-it/samples/panelcontainer/repeatability-tests/repeatedpanelcount/.content.xml b/...-components-it/samples/panelcontainer/repeatability-tests/repeatedpanelcount/.content.xml
@@ -3,10 +3,9 @@
     jcr:primaryType="cq:Page">
     <jcr:content
         cq:deviceGroups="[/etc/mobile/groups/responsive]"
-        cq:lastModified="{Date}2024-09-12T05:06:37.741Z"
+        cq:lastModified="{Date}2024-09-17T11:02:14.953+05:30"
         cq:lastModifiedBy="admin"
         cq:template="/conf/core-components-examples/settings/wcm/templates/af-blank-v2"
-        fd:ignoreTranslationInvalidation="{Boolean}true"
         jcr:language="en"
         jcr:primaryType="cq:PageContent"
         jcr:title="RepeatedPanelCount"
@@ -69,7 +68,7 @@
                     jcr:lastModified="{Date}2024-09-10T23:26:56.233Z"
                     jcr:lastModifiedBy="admin"
                     jcr:primaryType="nt:unstructured"
-                    jcr:title="Button"
+                    jcr:title="Add"
                     sling:resourceType="forms-components-examples/components/form/button"
                     fieldType="button"
                     name="button1726010816552">
@@ -88,6 +87,25 @@
                 <fd:events
                     jcr:primaryType="nt:unstructured"
                     initialize="[updatePanelLabel($field)]"/>
+                <button_1941974904
+                    jcr:created="{Date}2024-09-17T10:30:05.285+05:30"
+                    jcr:createdBy="admin"
+                    jcr:lastModified="{Date}2024-09-17T10:30:05.285+05:30"
+                    jcr:lastModifiedBy="admin"
+                    jcr:primaryType="nt:unstructured"
+                    jcr:title="Remove"
+                    sling:resourceType="forms-components-examples/components/form/button"
+                    dorExclusion="true"
+                    fieldType="button"
+                    name="button_19419749041726549205324">
+                    <fd:rules
+                        fd:click="[{&quot;nodeName&quot;:&quot;ROOT&quot;\,&quot;items&quot;:[{&quot;nodeName&quot;:&quot;STATEMENT&quot;\,&quot;choice&quot;:{&quot;nodeName&quot;:&quot;EVENT_SCRIPTS&quot;\,&quot;items&quot;:[{&quot;nodeName&quot;:&quot;EVENT_CONDITION&quot;\,&quot;choice&quot;:{&quot;nodeName&quot;:&quot;EVENT_AND_COMPARISON&quot;\,&quot;items&quot;:[{&quot;nodeName&quot;:&quot;COMPONENT&quot;\,&quot;value&quot;:{&quot;id&quot;:&quot;$form.repeat_panel[length($form.repeat_panel) - 1].button_19419749041726549205324&quot;\,&quot;type&quot;:&quot;BUTTON&quot;\,&quot;name&quot;:&quot;button_19419749041726549205324&quot;}}\,{&quot;nodeName&quot;:&quot;EVENT_AND_COMPARISON_OPERATOR&quot;\,&quot;choice&quot;:{&quot;nodeName&quot;:&quot;is clicked&quot;\,&quot;value&quot;:null}}\,{&quot;nodeName&quot;:&quot;PRIMITIVE_EXPRESSION&quot;\,&quot;choice&quot;:null}]}\,&quot;nested&quot;:false}\,{&quot;nodeName&quot;:&quot;Then&quot;\,&quot;value&quot;:null}\,{&quot;nodeName&quot;:&quot;BLOCK_STATEMENTS&quot;\,&quot;items&quot;:[{&quot;nodeName&quot;:&quot;BLOCK_STATEMENT&quot;\,&quot;choice&quot;:{&quot;nodeName&quot;:&quot;FUNCTION_CALL&quot;\,&quot;parentNodeName&quot;:&quot;BLOCK_STATEMENT&quot;\,&quot;functionName&quot;:{&quot;id&quot;:&quot;removePanelInstance&quot;\,&quot;displayName&quot;:&quot;removePanelInstance&quot;\,&quot;type&quot;:&quot;STRING|NUMBER|BOOLEAN|DATE|ARRAY|OBJECT&quot;\,&quot;isDuplicate&quot;:false\,&quot;displayPath&quot;:&quot;&quot;\,&quot;args&quot;:[{&quot;type&quot;:&quot;OBJECT|AFCOMPONENT&quot;\,&quot;name&quot;:&quot;panel&quot;\,&quot;description&quot;:&quot;panel&quot;\,&quot;isMandatory&quot;:true}]\,&quot;impl&quot;:&quot;$0($1)&quot;}\,&quot;params&quot;:[{&quot;nodeName&quot;:&quot;EXPRESSION&quot;\,&quot;choice&quot;:{&quot;nodeName&quot;:&quot;COMPONENT&quot;\,&quot;value&quot;:{&quot;id&quot;:&quot;$form.repeat_panel&quot;\,&quot;displayName&quot;:&quot;Panel&quot;\,&quot;type&quot;:&quot;AFCOMPONENT&quot;\,&quot;displayPath&quot;:&quot;FORM/Panel/&quot;\,&quot;name&quot;:&quot;repeat_panel&quot;\,&quot;parent&quot;:&quot;$form&quot;}}}]}}]}]}}]\,&quot;isValid&quot;:true\,&quot;enabled&quot;:true\,&quot;version&quot;:1\,&quot;script&quot;:[&quot;removePanelInstance($form.repeat_panel)&quot;]\,&quot;eventName&quot;:&quot;Click&quot;\,&quot;ruleType&quot;:&quot;&quot;\,&quot;description&quot;:&quot;&quot;}]"
+                        jcr:primaryType="nt:unstructured"
+                        validationStatus="valid"/>
+                    <fd:events
+                        jcr:primaryType="nt:unstructured"
+                        click="[removePanelInstance($form.repeat_panel)]"/>
+                </button_1941974904>
             </panelcontainer>
         </guideContainer>
     </jcr:content>

diff --git a/ui.tests/test-module/specs/repeatable/repeatable.updatelabel.cy.js b/ui.tests/test-module/specs/repeatable/repeatable.updatelabel.cy.js
@@ -30,7 +30,7 @@ describe("Form Runtime with Panel Container", () => {
         cy.get(`#${panelId} ${panelLabelSelector}`).should('have.text', panelLabel);
     };
 
-    it("add instance should add instance at correct index and label should be correctly updated", () => {
+    it("add and remove instance should add/remove instance at correct index and label should be correctly updated", () => {
         expect(formContainer, "formcontainer is initialized").to.not.be.null;
         const [buttonid, fieldView] = Object.entries(formContainer._fields)[3];
         const [textinputid, fieldView1] = Object.entries(formContainer._fields)[0];
@@ -39,18 +39,26 @@ describe("Form Runtime with Panel Container", () => {
         checkLabelText(textinputid, panelid, 'Text Input1', 'Panel1');
 
         cy.get(`#${buttonid}`).find("button").click().then(() => {
-            const [textinputid1, fieldView3] = Object.entries(formContainer._fields)[4];
-            const [panelid1, fieldView4] = Object.entries(formContainer._fields)[5];
+            const [textinputid1, fieldView3] = Object.entries(formContainer._fields)[5];
+            const [panelid1, fieldView4] = Object.entries(formContainer._fields)[6];
             const [buttonid1, fieldView5] = Object.entries(formContainer._fields)[3];
+            const [removeButton, removeFieldView] = Object.entries(formContainer._fields)[4];
 
             checkLabelText(textinputid1, panelid1, 'Text Input2', 'Panel2');
 
             cy.get(`#${buttonid1}`).find("button").click().then(() => {
-                const [textinputid2, fieldView6] = Object.entries(formContainer._fields)[7];
-                const [panelid2, fieldView7] = Object.entries(formContainer._fields)[8];
+                const [textinputid2, fieldView6] = Object.entries(formContainer._fields)[9];
+                const [panelid2, fieldView7] = Object.entries(formContainer._fields)[10];
 
                 checkLabelText(textinputid1, panelid1, 'Text Input3', 'Panel3');
                 checkLabelText(textinputid2, panelid2, 'Text Input2', 'Panel2');
+
+                // remove instance and check label update
+                cy.get(`#${removeButton}`).find("button").click().then(() => {
+                    const [textinputid11, fieldView10] = Object.entries(formContainer._fields)[4];
+                    const [panelid11, fieldView11] = Object.entries(formContainer._fields)[5];
+                    checkLabelText(textinputid11, panelid11, 'Text Input2', 'Panel2');
+                });
             });
         });
     });