How to render PDF which displays picture from the image attachment of your custom BO

[JerryWang]

 

My series of Cloud Application Studio Blogs

• How to detect EditMode in an Embedded Component


• Step by step to enable your custom BO with attachment upload functionality


• Step by step to create an Adobe Print form in Cloud application Studio


• How to render PDF which displays picture from the image attachment of your custom BO


• How to get current logged on business user’s employee information and assigned organization unit via...


• How to implement dynamic access control based on custom BO using OWL


• How to make Code List Restriction work when control field and restricted field are not on the same B...


• How to implement custom number range using custom business object


• Two approaches to create Code List in Cloud Studio


• Create Dynamic Code List via Custom Business Object Association


• Step by step to develop Thing Type based navigation and BO Object based navigation


• Put Extension field into embedded component and make it visible in Standard UI


• One possible cause that embedded component fails to display in UI


• Step by step to create HTML Mashup and make it visible in UI


• Step by step to enable Text Collection for your custom BO


• Automatically send an Email notification to line manager via Workflow in Account application


• Step by step to create Object Value Selector in Cloud Application Studio


• Two approaches to fill an UI field with dedicated logic implemented in Cloud Application Studio


• How to execute BO action on multiple selected BO instances in AdvancedListPane

Requirement

You have created your custom BO with attachment upload functionality available via this blog Step by step to enable your custom BO with attachment upload functionality.

And now you have successfully uploaded two images as attachment to a given BO instance：

You would like that once preview button is pressed, the PDF will be generated which display these two images from uploaded attachment.

The rendered PDF looks as below:

This requirement just needs a few enhancement on the form template itself, whose development is already introduced in blog Step by Step to create an Adobe Print form in Cloud application Studio.

1. Open the form template via Adobe Form Designer, menu File -> Form Property:

Set PDF Render Format as Dynamic XML Form:

2. Select your body page and set the Content property as "Flowed" instead of "Positioned":

3. Drag a table control from control toolbox, select table header node and DO NOT bind any BO nodes to it.

Select table row node, bind it to path: $.TestBO.Attachment.DocumentList[*] and mark the checkbox "Repeat Row for Each Data Item":

Select the last column field in table row, change its type for Text Field to Image Field:

And use relative binding to bind its path to the corresponding BO field BinaryObject which stores the binary data of an attachment.

After that in the runtime when the PDF is rendered, the table row will automatically be created based on the number of uploaded images as attachment, this behavior is called as "Data Driven Layout process".