This article demonstrates how to display an image alongside UI fields in Constellation, allowing business users to verify information side by side to ensure details are captured correctly.

Steps:

• Create a new property named DynamicImage and set its type to URL.
• Ensure the property length can accommodate the image’s Base64 content.
• In Dev Studio, open the DynamicImage property, go to the Advanced tab, and remove the pxIsValidURL validation.
• Configure the Pre Data transform and configure the DynamicImage to base 64 data for the attachment with the help of below snippet of code. 

• "data: image/png;base64, "+D_AttachmentContent[AttachInsKey:.ExtractClaimsData.pxAttachmentKey,PopulateAttachStream:"true"]. pyAttachStream

   

• Create a new partial view with two columns.
• Add the relevant fields to the one column so users can compare and verify the results side by side.
• Add the DynamicImage property to 2nd column and set its display to Image (instead of URL).

Final View:

Credits goes to @robotvinay  and @G. jagadish  for their help!

Constellation 101 Series

Enjoyed this article? See more similar articles in Constellation 101 series.