The picture displayed in your contact form after this exercise is coming from the attached image in the notes entity associated with contact.
You have to specify a static name for the picture you wanted to display as contact profile picture. In my example, I've used, "mypic" file name with file extension of "jpg".
1. Customize the contact form by inserting an IFRAME, in my example the name of the IFRAME is "IFRAME_Picture", for the url, I've used [url]http://about:blank[/url], but any url will do.
2. Save and Publish your form.
3. Add a new web resource.(example: crm_attachedimage.js)
4. Paste the below code in the js file:
Code: Select all
// *********************************************************
// To fetch the picture file from the Notes Entity
// *********************************************************
function attachPic() {
var id = Xrm.Page.data.entity.getId();
var serverUrl = Xrm.Page.context.getServerUrl();
var odataPath = serverUrl + "/XRMServices/2011/OrganizationData.svc";
var retrieveReq = new XMLHttpRequest();
// you need to put the contact's guid in place of the hard-coded guid below
retrieveReq.open("GET", odataPath + "/ContactSet(guid'"+ id +"')/Contact_Annotation", true);
retrieveReq.setRequestHeader("Accept", "application/json");
retrieveReq.setRequestHeader("Content-Type", "application/json; charset=utf-8");
retrieveReq.onreadystatechange = function () {
retrieveReqCallBack(this);
};
retrieveReq.send();
}
function retrieveReqCallBack(retrieveReq) {
if (retrieveReq.readyState == 4) {
if (retrieveReq.status == 200) {
var entity = JSON.parse(retrieveReq.responseText).d;
for (var i = 0; i < entity.results.length; i++) {
var fileName = entity.results[i].FileName;
if (fileName == "mypic.jpg") {
//var fileContents = "data:image/jpg;base64," + entity.results[i].DocumentBody;
var image = "<img alt='', src= 'data:image/jpeg;base64," + entity.results[i].DocumentBody +"'> </img>";
// you need an "image" web resource on the form to act as a placeholder for the next line
iframe = document.getElementById("IFRAME_Picture");
iframe.contentWindow.document.write(image);
}
}
}
}
}5. Save the new web resource and publish.
6. Go back to contact form.
7. Click on form properties in the ribbon
8. Add the javascript you've created in the libraries.
9. In the Event Handlers, in OnLoad event of the Form, click on Add button
10. Select the javascript you've created in the Library dropdown
11. Type the name of the function, in my example the name of the function is "attachPic"
12. Click Ok. Save and Publish the form.
13. Create a new contact record
14. Attached an image in the note. Example (mypic.jpg)
15. Refresh the page. The image you've attached must now visible in the IFRAME you've added.