ImageField - XML Data Binding

[Former Community Member]

I am trying to dynamically change the logo on an adobe form using XML data binding. That is, if my XDP form has an ImageField like the following, I would like to pass in various values (ex. logo1.jpg, logo2.jpg) for the 'href' attribute on the 'image' element.



<field name="ImageField1" y="0.2999mm" x="15.1mm" w="81.2102mm" h="20.8802mm">

<ui>

<imageEdit/>

</ui>

<value>

<image href="http://localhost:8080/foo/images/logo.jpg <http://localhost:8080/foo/images/logo.jpg> " contentType="image/jpg"/>

</value>

</field>



We have been successfully binding simple text fields for a while now. I would like to be able to use the same approach to swap in the various logos. Here's a brief overview of how we are currently using XML data binding.



* XML schema snippets (defines some phone number info):



<xs:complexType name="templateType">

<xs:sequence>

<xs:element type="tem:phonesType" name="phones" xmlns:tem="http://foo.com/foo/xmlbeans/template"/ <> >

...

</xs:sequence>

</xs:complexType>



<xs:complexType name="phonesType">

<xs:sequence>

<xs:element type="tem:mobileType" name="mobile" minOccurs="0" xmlns:tem="http://foo.com/foo/xmlbeans/template"/ <> >

...

</xs:sequence>

</xs:complexType>



<xs:complexType name="mobileType">

<xs:simpleContent>

<xs:extension base="xs:string">

<xs:attribute type="xs:string" name="number"/>

<xs:attribute type="xs:string" name="area-code"/>

</xs:extension>

</xs:simpleContent>

</xs:complexType>



* Java code snippet to populate the mobile phone XML for data binding:



MobileType mobileType = ObjectFactory.createMobileType();

mobileType.setNumber(number);

mobileType.setAreaCode(areaCode);



* Example populated XML snippet with mobile phone data:



<mobile number="555-5555" area-code="416"/>



* XDP Adobe form snippet (displays the mobile phone area code):



<field h="0.160in" name="Area_Code1" w="0.481in" x="3.717in" y="4.413in">

<ui>

<textEdit>

<textEdit>

</ui>

<para vAlign="middle"/>

<font size="9.0pt" typeface="Arial"/>

<border>

<edge cap="butt" thickness="0.012in">

<color value="255,255,204"/>

</edge>

<fill>

<color value="255,255,203"/>

</fill>

</border>

<bind match="dataRef" ref="$record.phones.mobile.area-code"/>

</field>



We have tried a number of things - could you please point me in the right direction.



Thank-you for your time.

[Former Community Member]

Kevin,
In order for image fields to bind correctly, they have to be defined in a very specific manner.

First, you need to include the following namespace in your XML schema:
xmlns:xfadata="http://www.xfa.org/schema/xfa-data/1.0/"

Then, define your image element as follows:





Here are some example xml records:




--
Justin Klei
Cardinal Solutions Group
www.cardinalsolutions.com

[Former Community Member]

Hello Justin,

We tried this approach before posting our initial question, but were unable to get it working. It may just be that my limited XSD and namespace knowledge is preventing me from getting it right, and that I need an example to work off of.

We are generating the XSD from an example instance XML, and then using JAXB to generate classes based on the resulting schema. These generated classes are used to populate the XML that will eventually be bound to the XDP to produce a PDF.

I think one of our main hurdles is the fact that we can't find the XFA XSD online anywhere. Do you have a copy of it?

Anyway, if it's not too much of an inconvenience, could you please post an example XDP snippet that you are using to bind an image with. I would imagine that it is a 'field' element with a nested 'image' element that has 'href' and 'contentType' attributes, but I would like to confirm this.


???


Also, could you please post more context for the 'imageData' element in the XSD, so that I can compare it to my solution. More specifically, I guess I'm looking for the XSD snippet showing an element containing an 'imageData' element. The only other thing I can think of that I might be doing wrong in the XSD, is the XFA namespace and XSD import/include, so an example of that would be much appreciated as well.

Thank-you for taking the time to respond to my original post.

--diana (posting as Kevin)

[Former Community Member]

Diana,<br /> Try this out. Cut and paste the following schema into a text file and save it with a .xsd file <br />extension:<br /><br /><xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" <br />xmlns:xfadata="http://www.xfa.org/schema/xfa-data/1.0/"><br /> <xsd:element name="rootNode"><br /> <xsd:complexType><br /> <xsd:sequence><br /> <xsd:element name="imageData" maxOccurs="unbounded"><br /> <xsd:complexType><br /> <xsd:attribute ref="xfadata:contentType" default="image/" /><br /> <xsd:attribute ref="xfadata:href" /><br /> </xsd:complexType><br /> </xsd:element><br /> </xsd:sequence><br /> </xsd:complexType><br /> </xsd:element><br /></xsd:schema><br /><br />Now cut and paste the following XML into a text file and save it with a .xml file extension:<br /><br /><?xml version="1.0" encoding="UTF-8"?><br /><rootNode><br /> <imageData contentType="image/jpg" href="http://www.google.com/intl/en/images/logo.gif"/><br /></rootNode><br /><br />Next, create a brand new, blank form in Designer.<br />Go to your Data View tab and select "New Data Connection".<br />Select 'XML Schema' and click 'Next'.<br />Select the .xsd file you created and click 'Finish'.<br />You should now see an 'imageData' node in your data view. It should have the same icon as the <br />'Image Field' object in the library. Because of the way the schema was defined, Designer <br />automatically identifies this as an image field.<br />Drag and drop the 'imageData' node onto your form. This will automatically create an image field <br />and bind it to your schema.<br />Select 'Form Properties' from the File menu, go to the 'Defaults' tab and select the .xml file you <br />created above as the preview data file.<br />Click on the 'PDF Preview' tab to merge the xml data with the xdp form and render it as PDF. You <br />should see the google logo on the page.<br /><br />Let me know if this works for you.<br /><br />-- <br />Justin Klei<br />Cardinal Solutions Group<br />www.cardinalsolutions.com

[Former Community Member]

I had the same problem and solved it in the following way:



First I added a field "CustomLogoData" in the schema, with type xsd:base64Binary (when populating the form data,it contains the image data in base64).



In the xdp form, I added an ImageField with name CustomLogo to the form (with the option embed image data checked). It is the image field that willl show the logo.



Finally

added the following script in the initialize event (in the server side) of a textfield (or any field that admits the event):



//retrieve the base64 data from the xml data.

var valor = xfa.record.resolveNode("Form.blah.blah.CustomLogoData").value.toString();



//populate the imagefield with the base64 data:

CustomLogo.value.image.value = valor;



Hope it helps you.

[Former Community Member]

Hello Justin,



I apologize for not getting back to you sooner. I was very pregnant when I started this thread, and have since given birth to healthy baby boy and am on maternity leave.



Thank-you again for taking the time to look into this. With your help, we did finally have the eureka moment when Designer automatically identified it as an image field and changed the icon accordingly.



Take care.



--diana

[Former Community Member]

Hi guys,



I found this post about dynamic image loading and i was able to follow the instructions given above. I was able to load the image dynamically in the LiveCycle designer however, when I try publishing the pdf and opening it, I the image does not load properly. Am I doing something incorrectly when I publish the pdf file?



Thanks,



Dan

[Former Community Member]

I am having similar problem. I followed steps above and they work inside Designer Render preview pane. However, if I try to render the XDP via Form Server I am not getting images.