AEM 6.5 Designer not displaying ImageField

[plummer6699]

Hi.  Here is my scenario.  I have a couple of ImageFields that point to different images that are watermarks and they both are bound to the same data binding element.  Now using JavaScript in designer....i would like to display one or the other, (possibly more) depending on value of the bound field.  ie:  If element is 'A' then use imageField1, or if 'B' use imageField2, etc.    When I add the binding, and JavaScript below.....it does not seem to work at all when I preview.

Any help is appreciated.

javascript:

Document_Instance.Page1.ImageField1::initialize - (JavaScript, client)
var watermark_name = ImageField1.rawValue;
if (watermark_name == 'draft') {
this.access="readOnly";
this.presence="visible";
}

[SachinJa4]

May be try this

Ensure that you access the data binding field correctly. You should retrieve the value from the bound field and use it to decide which image to display.

In your JavaScript, you'll need to set the source of the image field based on the value retrieved from the bound field.

Though your code don't have problem but this legacy tool is sometime working weird. Try the below code snippet

/**************
var watermark_name = this.resolveNode("Page1.boundFieldName").rawValue;

// Replace 'boundFieldName' with the actual name of your bound field.

if (watermark_name == 'A') {
this.resolveNode("Page1.ImageField1").presence = "visible";
this.resolveNode("Page1.ImageField2").presence = "hidden";
this.resolveNode("Page1.ImageField1").rawValue = "path/to/your/imageA.png"; // Set the source to image A.
} else if (watermark_name == 'B') {
this.resolveNode("Page1.ImageField1").presence = "hidden";
this.resolveNode("Page1.ImageField2").presence = "visible";
this.resolveNode("Page1.ImageField2").rawValue = "path/to/your/imageB.png"; // Set the source to image B.
} else {
// Handle cases where watermark_name does not match 'A' or 'B'
this.resolveNode("Page1.ImageField1").presence = "hidden";
this.resolveNode("Page1.ImageField2").presence = "hidden";
}

***********************************/

Also , Use console.log to print out values and ensure the data is being accessed correctly.

[plummer6699]

Hey thanks for replying!  

Unfortunately it does not solve my problem.  

Couple of things: 
1.

---

var watermark_name = this.resolveNode("Page1.boundFieldName").rawValue;

// Replace 'boundFieldName' with the actual name of your bound field.

ImageField1 is bound to $.Document_Description.Watermark_Name which brings back the correct watermark name of 'draft'.

2. this.resolveNode("Page1.ImageField1").rawValue = "path/to/your/imageA.png"; // Set the source to image A.

I don't want to replace the value of ImageField1.  I think you want change the URL to the 'path/to/your/imageA.png'

and how do i do that?

I do not get any errors in the console.

I guess I am confused on how to reference (through JavaScript) ..... the DataView elements as well.

Anymore comments are greatly appreciated!

Thanks.

[plummer6699]

UPDATE:

so spitting out some messagebox's......I found this.

this.resolveNode("Page1.ImageField1").rawValue = "..\common\images\DRAFT.png";

resolves to this.... '..commonimagesDRAFT.png' (yes without the slashes).  Any idea around this?

Thx.

[plummer6699]

UPDATE: 

ok.....i found that double slashes will get around that.  

However issue still exists.  with watermark not being applied.

[Vijay_Katoch]

Share your form at vkatoch07@gmail.com, I'll have a look.

One approach is bind the image fields with the images you want and then show/hide the image fields based on your conditions.

[radzmar]

You can't change the path during runtime. Just add multiple image fields on top of each other an change their  presence as needed. 

[VijaySr1]

Hi @plummer6699 ,

Can you please try to apply below solutions:

Sol 1.Use data binding reference and avoid using named data binding.

Sol 2. You can also add the mergeMode to "matchTemplate" as attribute in root subform as " <subform layout="tb" locale="es_ES" name="name" mergeMode="matchTemplate">

Possible explanation why it is not visible in preview? is below:

By Default when we use "use name" data binding it always exclude data Nodes which are already bound. That may be the reason why the same data node is not bind to second image field.

Note: Please try to apply sol1 or sol2 and let me know if it works. Please share the template and sample data in case these solutions does not work.

Thanks