diff --git a/it/apps/src/main/content/jcr_root/apps/forms-core-components-it/clientlibs/clientlib-it-custom-function/js/functions.js b/it/apps/src/main/content/jcr_root/apps/forms-core-components-it/clientlibs/clientlib-it-custom-function/js/functions.js
index 58a0f5f6c4..d06dfa3414 100644
--- a/it/apps/src/main/content/jcr_root/apps/forms-core-components-it/clientlibs/clientlib-it-custom-function/js/functions.js
+++ b/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+""+(globals.field.$index+1)+""}});
+ // 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+""+(panel.$index+1)+""}});
+ }
+ });
+}
+
+
+
+/**
+ * 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);
+}
diff --git a/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/panelcontainer/repeatability-tests/repeatedpanelcount/.content.xml b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/panelcontainer/repeatability-tests/repeatedpanelcount/.content.xml
new file mode 100755
index 0000000000..25868ddb03
--- /dev/null
+++ b/it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/panelcontainer/repeatability-tests/repeatedpanelcount/.content.xml
@@ -0,0 +1,23 @@
+
+
+
+
+
+
diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/panelcontainer/repeatability-tests/repeatedpanelcount/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/panelcontainer/repeatability-tests/repeatedpanelcount/.content.xml
new file mode 100755
index 0000000000..7fcffb1741
--- /dev/null
+++ b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/panelcontainer/repeatability-tests/repeatedpanelcount/.content.xml
@@ -0,0 +1,94 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/jsdocs/package-lock.json b/jsdocs/package-lock.json
index 84483bc404..355d5ba7dd 100644
--- a/jsdocs/package-lock.json
+++ b/jsdocs/package-lock.json
@@ -5050,7 +5050,8 @@
"version": "8.6.7",
"resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-8.6.7.tgz",
"integrity": "sha512-FlCHFwNnutLgVTflOYHPW2pPcl2AACqVzExlkGQNsi4CJgqOHN7YTgDd4LuhgN1BFO3TS0vLAruV1Td6dwWPJA==",
- "dev": true
+ "dev": true,
+ "requires": {}
},
"marked": {
"version": "4.3.0",
diff --git a/ui.frontend/src/view/FormPanel.js b/ui.frontend/src/view/FormPanel.js
index b55f2dbdec..0c39a3037d 100644
--- a/ui.frontend/src/view/FormPanel.js
+++ b/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);
}
/**
diff --git a/ui.tests/test-module/specs/repeatable/repeatable.updatelabel.spec.js b/ui.tests/test-module/specs/repeatable/repeatable.updatelabel.spec.js
new file mode 100644
index 0000000000..357d5f8deb
--- /dev/null
+++ b/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');
+ });
+ });
+ });
+});
\ No newline at end of file