"тнιѕ вℓσg ¢συℓ∂ ѕανє уσυя мσηєу ιƒ тιмє = мσηєу" - ∂.мαηנαℓу

Sunday, 18 March 2012

Facebook with CRM 2011 OR Facebook Image on entity Form in CRM 2011

Ref: MSDN Blogs- ("http://blogs.msdn.com/b/crm/archive/2011/09/28/displaying-a-contact-s-facebook-picture-in-microsoft-dynamics-crm-2011.aspx")


Can you imagine that your contact form is displayed with contact's Facebook image? Well, lets bring this imagination into reality.


Samples:


The interesting thing is that it could be done using simple javascript code. So lets kick off.


Consider the Contact entity. Now the idea is that on the contact form we are going to place a default image. And if the contact could provide the Facebook ID, then it would be replaced by the real profile picture from Facebook.


The default image could be something like this ( Eg: Dimension of 109x108 pixels). And this is saved as a webresource.




Lets have a look at the form design.
As you all know, we need a place holder for the image. And this could be a web resource. Thanks to CRM 2011 !
Lets place a new web resource on the form.




We could choose the default image which we already uploaded to web resources.



Also lets have a quick look at the Formatting tab of Webresource properties. Certainly, you could play around further for the best display results.


Also there would be one custom attribute on the form namely ' Facebook ID' to supply the Facebook ID from the User. Here is the form Design




In our case,
Facebook ID could be supplied in 2 formats
1. As a string ID. For instance, datong, d.manjaly etc
2. As a numeric ID. For instance, 100003583160143
The javascript code will pull the profile picture using the Facebook ID.
As you all know, the javascript code should be saved as webresource and should be triggered at the Form Load event as shown below.




Javascript Code:

function profilePicture_onFormLoad() {
 var profilePictureElement = Xrm.Page.getControl("WebResource_myphoto");
    var facebookAttribute = Xrm.Page.getAttribute("ap_facebookid");
   if (facebookAttribute && facebookAttribute.getValue() != null ) {
        var profileUrl = "http://www.facebook.com/"+facebookAttribute.getValue();
        if (profileUrl) {
            var profilePictureUrl = getProfilePictureUrl(profileUrl);
            if (profilePictureUrl) {
                // set src attribute of default profile picture web resource.
                profilePictureElement.setSrc(profilePictureUrl);
                return;
            }
        }
  }
}


function getProfilePictureUrl(profileUrl) {
    // trim trailing forward slash in url
    profileUrl = profileUrl.replace(/\/*$/, "");


    var patterns = [];
    // Format is http://www.facebook.com/userid
    patterns[0] = /^http:\/\/www\.facebook\.com\/([a-zA-Z0-9\.]+?)$/;
    // Format is  http://www.facebook.com/profile.php?id=987654321
    patterns[1] = /^http:\/\/www\.facebook\.com\/profile\.php\?id=(\d+?)$/;


    for (i in patterns) {
        var matches = patterns[i].exec(profileUrl);
        if (matches) {
            return "http://graph.facebook.com/" + matches[1] + "/picture?type=normal";
        }
    }
    return null;
}



Here we go....
A new contact form would have the default image on it



The new image would be displayed as soon as the user key in the Facebook ID and save the form.  (Refer the samples given at the beginning)





11 comments:

  1. Hi Manjaly ,

    I tried same java script code in one of my custom entity.But I am getting an error after i clicking Save button.
    The error is :
    Unable to get value of the property setSrc object is null or undefined.

    What is the issue for this ?

    ReplyDelete
  2. Hello, Please note that var profilePictureElement = Xrm.Page.getControl("WebResource_myphoto"); Could you pls make sure that the webresource control name is same or Correct. Because this is just trying to set source... profilePictureElement.setSrc(profilePictureUrl);

    ReplyDelete
  3. Is there a way to get the userid from facebook so that the user doesn't have to look up their userid?

    ReplyDelete
  4. Thanks for sharing a nice article....

    Ray Business Technologies, www.raybiztech.com, is a leading IT Services Provider for Microsoft Dynamics CRM implementations. Raybiztech has worked with clients across all business segments to implement Microsoft Dynamics CRM. Whether you are deploying CRM for the first time or you have many years of experience, Raybiztech’s unique insights can help you achieve your objectives. Raybiztech has implemented Microsoft Dynamics CRM projects for a number of small and medium sized businesses on time. Raybiztech is Microsoft Silver Partner and have deep expertise on Microsoft CRM implementations, Microsoft CRM customization, and CRM upgrade. We have deep expertise on CRM 4.0, CRM 2011 and Online CRM.

    ReplyDelete
  5. Hi,Manjaly

    From the last 4 hours m struggling

    Hope you could help me

    I follow the same process to get facebook profile pic.. But m getting error like : "Object doesn't support this property or method."

    I debug my javascript and its working fine till profilePictureUrl...after that m getting above error....

    Help me... Thanks :)

    Here is my code
    function profilePicture_onFormLoad() {
    var profilePictureElement = Xrm.Page.getControl("WebResource_myPhoto");
    var facebookAttribute = Xrm.Page.getAttribute("new_facebookid");
    if (facebookAttribute && facebookAttribute.getValue() != null) {
    var profileUrl = "http://www.facebook.com/" + facebookAttribute.getValue();
    if (profileUrl) {
    var profilePictureUrl = getProfilePictureUrl(profileUrl);
    if (profilePictureUrl) {
    alert('profilePictureUrl ' + profilePictureUrl);
    // set src attribute of default profile picture web resource.
    profilePictureElement.setSrc(profilePictureUrl);
    return;
    }
    }
    }
    }


    function getProfilePictureUrl(profileUrl) {
    // trim trailing forward slash in url
    profileUrl = profileUrl.replace(/\/*$/, "");


    var patterns = [];
    // Format is http://www.facebook.com/userid
    patterns[0] = /^http:\/\/www\.facebook\.com\/([a-zA-Z0-9\.]+?)$/;
    // Format is http://www.facebook.com/profile.php?id=987654321
    patterns[1] = /^http:\/\/www\.facebook\.com\/profile\.php\?id=(\d+?)$/;


    for (i in patterns) {
    var matches = patterns[i].exec(profileUrl);
    if (matches) {
    return "http://graph.facebook.com/" + matches[1] + "/picture?type=normal";
    }
    }
    return null;
    }


    ReplyDelete
    Replies
    1. Do you have Rollup 12/13 installed? We're experiencing the same issue after having installed Rollup 13 on the weekend on our hosted CRM 2011 environment.

      It appears that .setSrc(...) is no longer supported for Image WebResource controls.

      Delete
    2. Yes, I have installed Rollup 12...

      Delete
  6. Hi, Sometimes copy paste cause issue on double quotes. Could you please try to enter the double quotes from your keyboard and try again. Another suggestion to use alert to see what are the values stored in the variables.

    ReplyDelete
    Replies
    1. Thanks For Reply

      I entered double quotes using keyboard.

      Code is working fine till profilePictureUrl and is returing following result.

      http://graph.facebook.com/100004727321486/picture?type=normal

      My FacebookId = 100004727321486

      But still giving same error..

      Delete
  7. Thanks All :) For helping

    Now its working fine... I change my code little...

    I used following

    var img =document.getElementById("WebResource_myPhoto");
    img.src = profilePictureUrl;

    instead of profilePictureElement.setSrc(profilePictureUrl);

    ReplyDelete
  8. Hi,
    I tried all everything but it showing error now "Operation Aborted". I am working in CRM 2015 cloud version. Pls help me with this.
    Thanks

    ReplyDelete