When it comes to displaying images on your web portal powered by ADX studio, ADX recommends the use of attachment notes as a storage for images. This approach comes with a lot of benefits since it allows the storage of images with various sizes and aspect ratios. The disadvantage of this approach is that it’s rather cumbersome in CRM directly. It provides a rather detached experience when assigning images to entities that in one way or the other will be used as visual assets on the portal. Even though CRM can be configured to smoothen this initially unintuitive connection, there is still room for confusion and possibilities to break the portal experience by tampering with the notes.
A more straight forward approach is to use CRM native entity images directly. It has a strong support on the CRM UI and can easily be related to the image that represents the entity record (on both the portal and the CRM side). However, this approach comes with its own set of limitations. CRM only allows one image to be associated with an entity record. This restriction can become tricky if the portal requires multiple images to be displayed for one record. However it can be overcome by using child entities with a one-to-many relationship. Regardless, the need of a separate entity in this particular scenario needs to be acknowledged and may not be fitting for every scenario. Another more severe limitation is the fixed size/aspect ratio of entity images. Those images are squares and CRM has the tendency to crop parts of images that are not perfect squares. This is most likely a deal breaker for many scenarios. However if the business can accept those limitations, the usage of entity images is a very convenient alternative to the attachment-based approach advocated by ADX.
The easiest way to integrate those images into the portal is by encoding them into a base64 string and embedding them directly into webpage. All modern browsers know how to interpret base64, so browser compatibility post IE 8 should not be an issue.
The image data is stored in the entityimage field on a CRM entity that supports images. The data is returned as a byte array. A statement, such as the following, will give us the data:
byte imageData = entity.GetAttributeValue<byte>("entityimage")
We can easily convert the byte array into a base 64 encoded string:
string base64 = Convert.ToBase64String(imageData);
In order for the browser to understand the content of the resulting string we have to prefix it with some metadata:
string source = "data:image/png;base64," + base64;
All we have to do at this point is to place the result into the src attribute of an img element in the DOM and the browser will render the image correctly on the webpage. Example:
<img src=”@Model.Source” alt=”CRM Entity Image” />
About the Author:
TopLine Strategies delivers the complete integration and development of sales, marketing and customer service technologies that enable corporate clientele to improve revenue streams and strengthen customer interactions. Our project management and consulting is designed to achieve timely delivery, 100 percent user adoption of the technologies we implement and deliver measurable returns on investments for our clients.