panel label not updated on initialize

it/apps/src/main/content/jcr_root/apps/forms-core-components-it/clientlibs/clientlib-it-custom-function/js/functions.js

@@ -238,3 +238,39 @@ function customMessageUsingInvalidApi(field, globals) {
         globals.functions.setProperty(field, {valid : true});
     }
 }
+
+
+/**
+ * updatePanelLabel
+ * @name updatePanelLabel
+ * @param {object} repeatablePanel
+ * @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>"}});
+    // 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>"}});
+        }
+    });
+}
+
+
+
+/**
+ * Tests add instance with dispatchEvent
+ * @name addPanelInstance
+ * @param {object} panel
+ * @param {scope} globals
+ */
+function addPanelInstance(panel,globals)
+{
+    globals.functions.dispatchEvent(panel,'addInstance', globals.field.$parent.$index + 1);
+}

it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/panelcontainer/repeatability-tests/repeatedpanelcount/.content.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:dam="http://www.day.com/dam/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:fd="http://www.adobe.com/aemfd/fd/1.0"
+    jcr:primaryType="dam:Asset">
+    <jcr:content
+        cq:conf="\0"
+        jcr:lastModified="{Date}2024-09-12T05:06:37.740Z"
+        jcr:primaryType="dam:AssetContent"
+        sling:resourceType="fd/fm/af/render"
+        guide="1"
+        type="guide">
+        <metadata
+            fd:version="2.1"
+            jcr:language="en"
+            jcr:primaryType="nt:unstructured"
+            xmp:CreatorTool="AEM Forms AF Wizard"
+            allowedRenderFormat="HTML"
+            author="admin"
+            dorType="none"
+            formmodel="none"
+            themeRef="/libs/fd/af/themes/canvas"
+            title="RepeatedPanelCountAndUpdateLabel"/>
+    </jcr:content>
+</jcr:root>

it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/panelcontainer/repeatability-tests/repeatedpanelcount/.content.xml

@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:fd="http://www.adobe.com/aemfd/fd/1.0"
+    jcr:primaryType="cq:Page">
+    <jcr:content
+        cq:deviceGroups="[/etc/mobile/groups/responsive]"
+        cq:lastModified="{Date}2024-09-12T05:06:37.741Z"
+        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"
+        sling:configRef="/conf/forms/core-components-it/samples/panelcontainer/repeatability-tests/basic/"
+        sling:resourceType="forms-components-examples/components/page">
+        <guideContainer
+            fd:version="2.1"
+            jcr:lastModified="{Date}2024-09-10T23:31:27.238Z"
+            jcr:lastModifiedBy="admin"
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="forms-components-examples/components/form/container"
+            clientLibRef="corecomponent.it.customfunction"
+            dorType="none"
+            fieldType="form"
+            schemaType="none"
+            specVersion="0.14.0"
+            textIsRich="true"
+            thankYouMessage="Thank you for submitting the form."
+            thankYouOption="page"
+            themeRef="/libs/fd/af/themes/canvas"
+            title="RepeatedPanelCount">
+            <panelcontainer
+                jcr:created="{Date}2024-09-10T23:13:17.911Z"
+                jcr:createdBy="admin"
+                jcr:lastModified="{Date}2024-09-10T23:25:26.487Z"
+                jcr:lastModifiedBy="admin"
+                jcr:primaryType="nt:unstructured"
+                jcr:title="Panel"
+                sling:resourceType="forms-components-examples/components/form/panelcontainer"
+                enabled="{Boolean}true"
+                fieldType="panel"
+                hideTitle="false"
+                maxOccur="5"
+                minOccur="1"
+                name="repeat_panel"
+                readOnly="{Boolean}false"
+                repeatable="true"
+                textIsRich="[true,true,true]"
+                visible="{Boolean}true"
+                wrapData="{Boolean}false">
+                <textinput
+                    jcr:created="{Date}2024-09-10T23:26:44.690Z"
+                    jcr:createdBy="admin"
+                    jcr:lastModified="{Date}2024-09-10T23:29:40.354Z"
+                    jcr:lastModifiedBy="admin"
+                    jcr:primaryType="nt:unstructured"
+                    jcr:title="Text Input"
+                    sling:resourceType="forms-components-examples/components/form/textinput"
+                    enabled="{Boolean}true"
+                    fieldType="text-input"
+                    hideTitle="false"
+                    name="who_lives_name"
+                    readOnly="{Boolean}false"
+                    textIsRich="[true,true,true]"
+                    unboundFormElement="{Boolean}false"
+                    visible="{Boolean}true"/>
+                <button
+                    jcr:created="{Date}2024-09-10T23:26:56.233Z"
+                    jcr:createdBy="admin"
+                    jcr:lastModified="{Date}2024-09-10T23:26:56.233Z"
+                    jcr:lastModifiedBy="admin"
+                    jcr:primaryType="nt:unstructured"
+                    jcr:title="Button"
+                    sling:resourceType="forms-components-examples/components/form/button"
+                    fieldType="button"
+                    name="button1726010816552">
+                    <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].button1726010816552&quot;\,&quot;type&quot;:&quot;BUTTON&quot;\,&quot;name&quot;:&quot;button1726010816552&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;addPanelInstance&quot;\,&quot;displayName&quot;:&quot;addPanelInstance&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;metadata&quot;:{&quot;isAncestorRepeatable&quot;:false}}}}]}}]}]}}]\,&quot;isValid&quot;:true\,&quot;enabled&quot;:true\,&quot;version&quot;:1\,&quot;script&quot;:[&quot;addPanelInstance($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="[addPanelInstance($form.repeat_panel)]"/>
+                </button>
+                <fd:rules
+                    fd:init="[{&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&quot;\,&quot;type&quot;:&quot;AFCOMPONENT|PANEL&quot;\,&quot;name&quot;:&quot;repeat_panel&quot;}}\,{&quot;nodeName&quot;:&quot;EVENT_AND_COMPARISON_OPERATOR&quot;\,&quot;choice&quot;:{&quot;nodeName&quot;:&quot;is initialized&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;updatePanelLabel&quot;\,&quot;displayName&quot;:&quot;updatePanelLabel&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;repeatablePanel&quot;\,&quot;description&quot;:&quot;repeatablePanel&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;metadata&quot;:{&quot;isAncestorRepeatable&quot;:false}}}}]}}]}]}}]\,&quot;isValid&quot;:true\,&quot;enabled&quot;:true\,&quot;version&quot;:1\,&quot;script&quot;:[&quot;updatePanelLabel($field)&quot;]\,&quot;eventName&quot;:&quot;Initialize&quot;\,&quot;ruleType&quot;:&quot;&quot;\,&quot;description&quot;:&quot;&quot;}]"
+                    jcr:primaryType="nt:unstructured"
+                    validationStatus="valid"/>
+                <fd:events
+                    jcr:primaryType="nt:unstructured"
+                    initialize="[updatePanelLabel($field)]"/>
+            </panelcontainer>
+        </guideContainer>
+    </jcr:content>
+</jcr:root>

ui.frontend/src/view/FormPanel.js

@@ -142,6 +142,7 @@ class FormPanel extends FormFieldBase {
         this.updateVisible(state.visible);
         this.updateEnabled(state.enabled);
         this.initializeHelpContent(state);
+        this.updateLabel(state.label);
     }
 
     /**

ui.tests/test-module/specs/repeatable/repeatable.updatelabel.spec.js

@@ -0,0 +1,57 @@
+/*******************************************************************************
+ * Copyright 2024 Adobe
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ******************************************************************************/
+describe("Form Runtime with Panel Container", () => {
+    const pagePath = "content/forms/af/core-components-it/samples/panelcontainer/repeatability-tests/repeatedpanelcount.html";
+    let formContainer = null;
+
+    beforeEach(() => {
+        cy.previewFormWithPanel(pagePath).then(p => {
+            formContainer = p;
+        });
+    });
+
+    const checkLabelText = (textInputId, panelId, textInputLabel, panelLabel) => {
+        const panelLabelSelector = ".cmp-container__label";
+        const textInputLabelSelector = ".cmp-adaptiveform-textinput__label";
+        cy.get(`#${textInputId} ${textInputLabelSelector}`).should('have.text', textInputLabel);
+        cy.get(`#${panelId} ${panelLabelSelector}`).should('have.text', panelLabel);
+    };
+
+    it("add instance should add 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];
+        const [panelid, fieldView2] = Object.entries(formContainer._fields)[1];
+
+        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 [buttonid1, fieldView5] = Object.entries(formContainer._fields)[3];
+
+            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];
+
+                checkLabelText(textinputid1, panelid1, 'Text Input3', 'Panel3');
+                checkLabelText(textinputid2, panelid2, 'Text Input2', 'Panel2');
+            });
+        });
+    });
+});