Add DataRef in Image Component (#1512)

Co-authored-by: Pavitra Khatri <[email protected]>

Author: 2 people

bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v1/form/StaticImageImpl.java

@@ -109,11 +109,6 @@ public String getAltText() {
         return translate("altText", altText);
     }
 
-    @Override
-    public String getDataRef() {
-        return null;
-    }
-
     @Override
     @JsonIgnore
     public String getDescription() {

bundles/af-core/src/test/java/com/adobe/cq/forms/core/components/internal/models/v1/form/StaticImageImplTest.java

@@ -94,7 +94,7 @@ void testGetName() {
     @Test
     void testGetDataRef() {
         StaticImage staticImage = Utils.getComponentUnderTest(PATH_IMAGE_CUSTOMIZED, StaticImage.class, context);
-        assertEquals(null, staticImage.getDataRef());
+        assertEquals("a.b", staticImage.getDataRef());
         StaticImage staticImageMock = Mockito.mock(StaticImage.class);
         Mockito.when(staticImageMock.getDataRef()).thenCallRealMethod();
         assertEquals(null, staticImageMock.getDataRef());

bundles/af-core/src/test/resources/form/image/exporter-image-customized.json

@@ -1,5 +1,6 @@
 {
   "id": "image-ad1e095fba",
+  "dataRef" : "a.b",
   "fieldType": "image",
   "name": "abc",
   "value": "/content/image-customized.img.png",

bundles/af-core/src/test/resources/form/image/test-content.json

@@ -18,6 +18,7 @@
     "jcr:title" : "def",
     "hideTitle" : false,
     "visible" : false,
+    "dataRef" : "a.b",
     "altText": "abc",
     "file": {
       "jcr:content": {

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

@@ -175,6 +175,16 @@ function testTextImportData(globals)
     globals.functions.importData({'a' : {'b' : 'prefilled'}});
 }
 
+/**
+ * Tests static image import data
+ * @name testImageImportData
+ * @param {scope} globals
+ */
+function testImageImportData(globals)
+{
+    globals.functions.importData({'a' : {'b' : '/content/dam/reference-fragments/visa%402x.png'}})
+}
+
 /**
  * Tests set focus
  * @name testSetFocus

it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/image/basic/.content.xml

@@ -1,44 +1,82 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:fd="http://www.adobe.com/aemfd/fd/1.0"
-          xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
-          jcr:primaryType="cq:Page">
-    <jcr:content
-            cq:deviceGroups="[mobile/groups/responsive]"
-            cq:lastModified="{Date}2021-12-02T15:12:59.900+05:30"
-            cq:lastModifiedBy="admin"
-            cq:template="/conf/core-components-examples/settings/wcm/templates/af-blank-v2"
-            jcr:language="en"
-            jcr:primaryType="cq:PageContent"
-            jcr:title="Adaptive Form V2 (IT)"
-            sling:resourceType="forms-components-examples/components/page">
-        <guideContainer
-                fd:version="2.1"
-                fieldType="form"
-                jcr:primaryType="nt:unstructured"
-                sling:resourceType="forms-components-examples/components/form/container">
-            <textinput
-                    fieldType="text-input"
-                    jcr:primaryType="nt:unstructured"
-                    name="textinput1"
-                    jcr:title="Text Input 1"
-                    sling:resourceType="forms-components-examples/components/form/textinput"/>
-            <image
-                    jcr:created="{Date}2022-10-13T14:31:23.772+05:30"
-                    jcr:createdBy="admin"
-                    jcr:lastModified="{Date}2022-10-13T14:31:23.772+05:30"
-                    jcr:lastModifiedBy="admin"
-                    jcr:primaryType="nt:unstructured"
-                    jcr:title="Image"
-                    sling:resourceType="forms-components-examples/components/form/image"
-                    fieldType="image"
-                    name="image1665651689720">
-                <fd:rules
-                        jcr:primaryType="nt:unstructured"
-                        visible="!(textinput1 == 'Hide me') || textinput1 == 'Show me'"/>
-                <fd:events jcr:primaryType="nt:unstructured"/>
-            </image>
-
-        </guideContainer>
-    </jcr:content>
-</jcr:root>
+<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:fd="http://www.adobe.com/aemfd/fd/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
+jcr:primaryType="cq:Page">
+<jcr:content
+cq:deviceGroups="[mobile/groups/responsive]"
+cq:lastModified="{Date}2025-01-23T19:42:45.919+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="Adaptive Form V2 (IT)"
+sling:resourceType="forms-components-examples/components/page">
+<guideContainer
+fd:version="2.1"
+jcr:lastModified="{Date}2025-01-23T19:40:52.901+05:30"
+jcr:lastModifiedBy="admin"
+jcr:primaryType="nt:unstructured"
+sling:resourceType="forms-components-examples/components/form/container"
+clientLibRef="corecomponent.it.customfunction"
+fieldType="form"
+schemaType="none"
+specVersion="0.14.2"
+textIsRich="true"
+thankYouMessage="&lt;p>Thank you for submitting the form.&lt;/p>&#xd;&#xa;"
+thankYouOption="page">
+<textinput
+jcr:primaryType="nt:unstructured"
+jcr:title="Text Input 1"
+sling:resourceType="forms-components-examples/components/form/textinput"
+fieldType="text-input"
+name="textinput1"/>
+<image
+jcr:created="{Date}2022-10-13T14:31:23.772+05:30"
+jcr:createdBy="admin"
+jcr:lastModified="{Date}2022-10-13T14:31:23.772+05:30"
+jcr:lastModifiedBy="admin"
+jcr:primaryType="nt:unstructured"
+jcr:title="Image"
+sling:resourceType="forms-components-examples/components/form/image"
+fieldType="image"
+name="image1665651689720">
+<fd:rules
+jcr:primaryType="nt:unstructured"
+visible="!(textinput1 == 'Hide me') || textinput1 == 'Show me'"/>
+<fd:events jcr:primaryType="nt:unstructured"/>
+</image>
+<image_1118656190
+jcr:created="{Date}2025-01-23T19:41:02.563+05:30"
+jcr:createdBy="admin"
+jcr:lastModified="{Date}2025-01-23T19:42:29.946+05:30"
+jcr:lastModifiedBy="admin"
+jcr:primaryType="nt:unstructured"
+jcr:title="Image"
+sling:resourceType="forms-components-examples/components/form/image"
+dataRef="$.a.b"
+fieldType="image"
+fileReference="/content/dam/reference-fragments/[email protected]"
+name="image_11186561901737641462594"
+visible="{Boolean}true"/>
+<button
+jcr:created="{Date}2025-01-23T19:41:38.650+05:30"
+jcr:createdBy="admin"
+jcr:lastModified="{Date}2025-01-23T19:41:38.650+05:30"
+jcr:lastModifiedBy="admin"
+jcr:primaryType="nt:unstructured"
+jcr:title="Button"
+sling:resourceType="forms-components-examples/components/form/button"
+dorExclusion="true"
+fieldType="button"
+name="button1737641498676">
+<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.button1737641498676&quot;\,&quot;type&quot;:&quot;BUTTON&quot;\,&quot;name&quot;:&quot;button1737641498676&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;testImageImportData&quot;\,&quot;displayName&quot;:&quot;testImageImportData&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;impl&quot;:&quot;$0()&quot;}\,&quot;params&quot;:[]}}]}]}}]\,&quot;isValid&quot;:true\,&quot;enabled&quot;:true\,&quot;version&quot;:1\,&quot;script&quot;:[&quot;testImageImportData()&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="[testImageImportData()]"/>
+</button>
+</guideContainer>
+</jcr:content>
+</jcr:root>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/image/v1/image/_cq_dialog/.content.xml

@@ -44,9 +44,6 @@
                                             <placeholder
                                                     jcr:primaryType="nt:unstructured"
                                                     sling:hideResource="{Boolean}true"/>
-                                            <bindref
-                                                    jcr:primaryType="nt:unstructured"
-                                                    sling:hideResource="{Boolean}true"/>
                                             <description
                                                     jcr:primaryType="nt:unstructured"
                                                     sling:orderBefore="visible"

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/image/v1/image/clientlibs/site/js/imageview.js

@@ -61,6 +61,16 @@
             setFocus() {
                 this.setActive();
             }
+
+            updateValue(value) {
+                if (this.element) {
+                    this.element.setAttribute('data-cmp-src', value);
+                    const imgElement = this.element.querySelector('img');
+                    if (imgElement) {
+                        imgElement.setAttribute('src', value);
+                    }
+                }
+            }
     }
 
     FormView.Utils.setupField(({element, formContainer}) => {

ui.tests/test-module/specs/image/image.authoring.cy.js

@@ -58,7 +58,7 @@ describe('Page - Authoring', function () {
     cy.get("[name='./name']")
       .should("exist");
     cy.get("[name='./dataRef']")
-        .should("not.exist");
+        .should("exist");
     cy.get("[name='./readOnly']")
         .should("not.exist");
     cy.get("[name='./unboundFormElement']")

ui.tests/test-module/specs/image/image.runtime.cy.js

@@ -91,4 +91,14 @@
 
     })
 
+    it("prefill test", () => {
+        const [id, fieldView] = Object.entries(formContainer._fields)[3];
+        const [buttonId, buttonFieldView] = Object.entries(formContainer._fields)[1];
+        const model = formContainer._model.getElement(id);
+        cy.get(`#${buttonId}-widget`).should("be.visible").click().then(() => {
+            expect(model.value).contains("/content/dam/reference-fragments/visa%402x.png");
+            cy.get(`#${id}`).find('img.cmp-image__image').should('have.attr', 'src', '/content/dam/reference-fragments/visa%402x.png');
+        })
+    })
+
  })