Skip to content

Commit fccd1c9

Browse files
rismehtarismehta
authored
panel label not updated on initialize (#1395)
* panel label not updated on initialize * panel label not updated on initialize
1 parent da0b04e commit fccd1c9

File tree

6 files changed

+213
-1
lines changed
  • it
    • apps/src/main/content/jcr_root/apps/forms-core-components-it/clientlibs/clientlib-it-custom-function/js
    • content/src/main/content/jcr_root/content
      • dam/formsanddocuments/core-components-it/samples/panelcontainer/repeatability-tests/repeatedpanelcount
      • forms/af/core-components-it/samples/panelcontainer/repeatability-tests/repeatedpanelcount
  • jsdocs
  • ui.frontend/src/view
  • ui.tests/test-module/specs/repeatable

6 files changed

+213
-1
lines changed

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

+36
Original file line numberDiff line numberDiff line change
@@ -238,3 +238,39 @@ function customMessageUsingInvalidApi(field, globals) {
238238
globals.functions.setProperty(field, {valid : true});
239239
}
240240
}
241+
242+
243+
/**
244+
* updatePanelLabel
245+
* @name updatePanelLabel
246+
* @param {object} repeatablePanel
247+
* @param {scope} globals
248+
*/
249+
function updatePanelLabel(repeatablePanel, globals) {
250+
var label = globals.field.who_lives_name.$label.value;//field is current field
251+
var panelLabel = globals.field.$label.value;
252+
var currentIndex = globals.field.$index; // to prevent unnecessary dom update
253+
254+
globals.functions.setProperty(globals.field,{label : {"value" : panelLabel + (globals.field.$index+1)}}); // on initialize panel label not working right now, will be fixed soon
255+
globals.functions.setProperty(globals.field.who_lives_name,{label : {"value" : label+"<b>"+(globals.field.$index+1)+"</b>"}});
256+
// walk through other instances and update their label
257+
repeatablePanel.$parent.forEach(panel => {
258+
if (currentIndex != panel.$index) {
259+
globals.functions.setProperty(panel,{label : {"value" : panelLabel + (panel.$index+1)}});
260+
globals.functions.setProperty(panel.who_lives_name,{label : {"value" : label+"<b>"+(panel.$index+1)+"</b>"}});
261+
}
262+
});
263+
}
264+
265+
266+
267+
/**
268+
* Tests add instance with dispatchEvent
269+
* @name addPanelInstance
270+
* @param {object} panel
271+
* @param {scope} globals
272+
*/
273+
function addPanelInstance(panel,globals)
274+
{
275+
globals.functions.dispatchEvent(panel,'addInstance', globals.field.$parent.$index + 1);
276+
}

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

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<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"
3+
jcr:primaryType="dam:Asset">
4+
<jcr:content
5+
cq:conf="\0"
6+
jcr:lastModified="{Date}2024-09-12T05:06:37.740Z"
7+
jcr:primaryType="dam:AssetContent"
8+
sling:resourceType="fd/fm/af/render"
9+
guide="1"
10+
type="guide">
11+
<metadata
12+
fd:version="2.1"
13+
jcr:language="en"
14+
jcr:primaryType="nt:unstructured"
15+
xmp:CreatorTool="AEM Forms AF Wizard"
16+
allowedRenderFormat="HTML"
17+
author="admin"
18+
dorType="none"
19+
formmodel="none"
20+
themeRef="/libs/fd/af/themes/canvas"
21+
title="RepeatedPanelCountAndUpdateLabel"/>
22+
</jcr:content>
23+
</jcr:root>

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

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<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"
3+
jcr:primaryType="cq:Page">
4+
<jcr:content
5+
cq:deviceGroups="[/etc/mobile/groups/responsive]"
6+
cq:lastModified="{Date}2024-09-12T05:06:37.741Z"
7+
cq:lastModifiedBy="admin"
8+
cq:template="/conf/core-components-examples/settings/wcm/templates/af-blank-v2"
9+
fd:ignoreTranslationInvalidation="{Boolean}true"
10+
jcr:language="en"
11+
jcr:primaryType="cq:PageContent"
12+
jcr:title="RepeatedPanelCount"
13+
sling:configRef="/conf/forms/core-components-it/samples/panelcontainer/repeatability-tests/basic/"
14+
sling:resourceType="forms-components-examples/components/page">
15+
<guideContainer
16+
fd:version="2.1"
17+
jcr:lastModified="{Date}2024-09-10T23:31:27.238Z"
18+
jcr:lastModifiedBy="admin"
19+
jcr:primaryType="nt:unstructured"
20+
sling:resourceType="forms-components-examples/components/form/container"
21+
clientLibRef="corecomponent.it.customfunction"
22+
dorType="none"
23+
fieldType="form"
24+
schemaType="none"
25+
specVersion="0.14.0"
26+
textIsRich="true"
27+
thankYouMessage="Thank you for submitting the form."
28+
thankYouOption="page"
29+
themeRef="/libs/fd/af/themes/canvas"
30+
title="RepeatedPanelCount">
31+
<panelcontainer
32+
jcr:created="{Date}2024-09-10T23:13:17.911Z"
33+
jcr:createdBy="admin"
34+
jcr:lastModified="{Date}2024-09-10T23:25:26.487Z"
35+
jcr:lastModifiedBy="admin"
36+
jcr:primaryType="nt:unstructured"
37+
jcr:title="Panel"
38+
sling:resourceType="forms-components-examples/components/form/panelcontainer"
39+
enabled="{Boolean}true"
40+
fieldType="panel"
41+
hideTitle="false"
42+
maxOccur="5"
43+
minOccur="1"
44+
name="repeat_panel"
45+
readOnly="{Boolean}false"
46+
repeatable="true"
47+
textIsRich="[true,true,true]"
48+
visible="{Boolean}true"
49+
wrapData="{Boolean}false">
50+
<textinput
51+
jcr:created="{Date}2024-09-10T23:26:44.690Z"
52+
jcr:createdBy="admin"
53+
jcr:lastModified="{Date}2024-09-10T23:29:40.354Z"
54+
jcr:lastModifiedBy="admin"
55+
jcr:primaryType="nt:unstructured"
56+
jcr:title="Text Input"
57+
sling:resourceType="forms-components-examples/components/form/textinput"
58+
enabled="{Boolean}true"
59+
fieldType="text-input"
60+
hideTitle="false"
61+
name="who_lives_name"
62+
readOnly="{Boolean}false"
63+
textIsRich="[true,true,true]"
64+
unboundFormElement="{Boolean}false"
65+
visible="{Boolean}true"/>
66+
<button
67+
jcr:created="{Date}2024-09-10T23:26:56.233Z"
68+
jcr:createdBy="admin"
69+
jcr:lastModified="{Date}2024-09-10T23:26:56.233Z"
70+
jcr:lastModifiedBy="admin"
71+
jcr:primaryType="nt:unstructured"
72+
jcr:title="Button"
73+
sling:resourceType="forms-components-examples/components/form/button"
74+
fieldType="button"
75+
name="button1726010816552">
76+
<fd:rules
77+
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;}]"
78+
jcr:primaryType="nt:unstructured"
79+
validationStatus="valid"/>
80+
<fd:events
81+
jcr:primaryType="nt:unstructured"
82+
click="[addPanelInstance($form.repeat_panel)]"/>
83+
</button>
84+
<fd:rules
85+
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;}]"
86+
jcr:primaryType="nt:unstructured"
87+
validationStatus="valid"/>
88+
<fd:events
89+
jcr:primaryType="nt:unstructured"
90+
initialize="[updatePanelLabel($field)]"/>
91+
</panelcontainer>
92+
</guideContainer>
93+
</jcr:content>
94+
</jcr:root>

‎jsdocs/package-lock.json

+2-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui.frontend/src/view/FormPanel.js

+1
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,7 @@ class FormPanel extends FormFieldBase {
142142
this.updateVisible(state.visible);
143143
this.updateEnabled(state.enabled);
144144
this.initializeHelpContent(state);
145+
this.updateLabel(state.label);
145146
}
146147

147148
/**

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

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/*******************************************************************************
2+
* Copyright 2024 Adobe
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
******************************************************************************/
16+
describe("Form Runtime with Panel Container", () => {
17+
const pagePath = "content/forms/af/core-components-it/samples/panelcontainer/repeatability-tests/repeatedpanelcount.html";
18+
let formContainer = null;
19+
20+
beforeEach(() => {
21+
cy.previewFormWithPanel(pagePath).then(p => {
22+
formContainer = p;
23+
});
24+
});
25+
26+
const checkLabelText = (textInputId, panelId, textInputLabel, panelLabel) => {
27+
const panelLabelSelector = ".cmp-container__label";
28+
const textInputLabelSelector = ".cmp-adaptiveform-textinput__label";
29+
cy.get(`#${textInputId} ${textInputLabelSelector}`).should('have.text', textInputLabel);
30+
cy.get(`#${panelId} ${panelLabelSelector}`).should('have.text', panelLabel);
31+
};
32+
33+
it("add instance should add instance at correct index and label should be correctly updated", () => {
34+
expect(formContainer, "formcontainer is initialized").to.not.be.null;
35+
const [buttonid, fieldView] = Object.entries(formContainer._fields)[3];
36+
const [textinputid, fieldView1] = Object.entries(formContainer._fields)[0];
37+
const [panelid, fieldView2] = Object.entries(formContainer._fields)[1];
38+
39+
checkLabelText(textinputid, panelid, 'Text Input1', 'Panel1');
40+
41+
cy.get(`#${buttonid}`).find("button").click().then(() => {
42+
const [textinputid1, fieldView3] = Object.entries(formContainer._fields)[4];
43+
const [panelid1, fieldView4] = Object.entries(formContainer._fields)[5];
44+
const [buttonid1, fieldView5] = Object.entries(formContainer._fields)[3];
45+
46+
checkLabelText(textinputid1, panelid1, 'Text Input2', 'Panel2');
47+
48+
cy.get(`#${buttonid1}`).find("button").click().then(() => {
49+
const [textinputid2, fieldView6] = Object.entries(formContainer._fields)[7];
50+
const [panelid2, fieldView7] = Object.entries(formContainer._fields)[8];
51+
52+
checkLabelText(textinputid1, panelid1, 'Text Input3', 'Panel3');
53+
checkLabelText(textinputid2, panelid2, 'Text Input2', 'Panel2');
54+
});
55+
});
56+
});
57+
});

0 commit comments

Comments
 (0)