Sunday 25 February 2018

How to set profile picture in CRM Portal



Currently, there is no OOB feature to show portal users profile pictures.

When opening the profile page there is a "blank" picture profile view on the top left with the Users Name next to it.



I have been seen a lot of people are struggling to find a way to achieve that.

Though, I have read few articles where people were able to show CRM Contact Image as Portal User's Profile Pic. I appreciate that logic too but found not that much user-friendly. Because in this case, we are not letting a portal user choose his/her choice of images.

So, today in this article I will show you the best way to achieve the same using OOB configuration:

High-Level Approach

  • Create a page to upload the profile pic first time.
  • Create a page to change/update the profile pic.
  • Add JavaScript to the Profile page.
  • Create a Web File Entity List to perform OData query.
  • Create Entity Permission.

Create a page to upload the profile pic first time.

Create a webpage as per configuration below































Copy below JavaScript code under Custom JavaScript section

Custom JavaScript:

$(window).load(function() {

$('#AttachFile').focus();
  
var userId = '{{user.id}}';
    
var websiteName = '{{ website.adx_name }}';
    
var websiteId = '{{ website.id }}';
    
var PublishedStateName = '{{page["adx_publishingstateid"].Name}}';
    
var PublishedStateId = '{{page["adx_publishingstateid"].Id}}';
    
var ParentPageName = '{{page["adx_parentpageid"].Name}}';
    
var ParentPageId = '{{page["adx_parentpageid"].Id}}';

$('#adx_name').val(userId+'_profilepic')
$('#adx_partialurl').val(userId+'_profilepic')

$('#adx_websiteid_name').val(websiteName);
$('#adx_websiteid').val(websiteId);
$('#adx_websiteid_entityname').val('adx_website');

$('#adx_publishingstateid_name').val(PublishedStateName);
$('#adx_publishingstateid').val(PublishedStateId);
$('#adx_publishingstateid_entityname').val('adx_publishingstate');

$('#adx_parentpageid_name').val(ParentPageName);
$('#adx_parentpageid').val(ParentPageId);
$('#adx_parentpageid_entityname').val('adx_webpage');
});

Custom CSS:

.tab{
    display: none;
}
footer{
  display:none;
}
.footer-bottom{
  display:none;
}
#gethelp{
  display:none;
}
.page-heading{
  display:none;
}
.navbar{
  display:none;
}
body{
  overflow:hidden;
}

























Create a new Entity Form for Webfile Entity as per configuration below and associate it with Webpage











Create a page to change/update the profile pic

Create a webpage as per configuration below


















Copy below CSS under Custom CSS section

footer{
  display:none;
}
#gethelp{
  display:none;
}
.page-heading{
  display:none;
}
.navbar{
  display:none;
}
body{
  overflow:hidden;
}
















Create a new Entity Form for Webfile Entity as per configuration below and associate it with Webpage





















Create a new Entity Form Metadata for Note Configuration









Add JavaScript on Profile page.

$(window).load(function() {
  
 var WFId;
 var userName = '{{user.fullname}}';
 var userId = '{{user.id}}';
 var path = "~/"+userId+"_profilepic";
 var profilePic = userId+"_profilepic";

var GetWebfile = "~/_odata/webfileset/?$filter=adx_name eq '"+profilePic+"'";

$.ajax({
    type: "GET",
    url: GetWebfile,
    dataType: 'json'
}).done(function (json) {

    var WFColl = json.value;

        // Get Webfile Guid
   
         WFId = WFColl[0].adx_webfileid;
    
})
 $('.col-md-4').find("img").removeAttr("src");

$('.col-md-4').find("img").attr("src",path);

$('.col-md-4').find("img").attr("style","height: 60px;width: 60px;");

// Show default Image If user has not uploaded profile pic yet
$('.col-md-4').find("img").attr("onerror","this.onerror=null; this.src='/xrm-adx/images/contact_photo.png';");

$('.col-md-4').find("img").click(function(){
  
  var imagePath = $('.col-md-4').find("img").attr("src");
  
  if (imagePath.indexOf("_profilepic") >= 0) // To Update Profile Pic
  {
     window.open("~/Profile-Image-Update/?id="+WFId+"", "", "top=150,left=300,width=600,height=300");
  }
  else // To Upload Profile Pic first time
  {
    window.open("~/profile-image-page", "", "top=150,left=300,width=400,height=150");
  }
   
});

});









Create a Web File Entity List to perform OData query.



Create Entity Permission for Web File and Note Entity.

For WebFile Entity:











Demonstration


Important Points

While updating the webfile records, Files uploaded in Web file takes time to get reflected on Portal due to Portal own limitations. You can Clear the Cache and Restart the portal to try your luck to get immediate change.

You will not face this issue while creating the web file and attach the file first time.

So, when you upload your Profile Pic first time, it immediately gets reflected on the Portal. But if you update your pic again it may take time to reflect. May take 10 to 15 mins.

Can visit to check this limitation - https://community.dynamics.com/crm/f/117/t/269154


Please share your valuable feedback. Cheers 😎


11 comments:

  1. Does this also set the profile image next to forum/idea posts? Or is further CSS/JScript needed for this

    ReplyDelete
  2. does it update profile picture?

    ReplyDelete
  3. i'm having trouble while updating Picture

    ReplyDelete
  4. Hi, thank you for the tutorial, it is great but as other people mentionned, I'm having trouble updating the picture aswell.

    The first upload works flawlessly but when I try to update an existing picture, the window in which the update form should be is blank.

    Any help would be greatly appreciated.

    ReplyDelete
  5. Hello Arpit. It's missing some step. The Upload button is not showing up.

    ReplyDelete
  6. Hello Arpit, I have tried to do this but it is not working on my side. I have replicate everything that you mentioned above though.

    ReplyDelete
  7. When I click on profile picture option, nothing happens and URL changes from

    https://xyz.microsoftcrmportals.com/profile/ to https://xyz.microsoftcrmportals.com/profile/#

    Any help in this regard would be highly appreciated.

    ReplyDelete
  8. Entity permissions should be created for web file and notes entity then only it shows attach file option in the popup. Thanks arpit it worked for me.

    ReplyDelete
  9. Not working.. what is profile Image Page ... webpage. Do we need to create one more webpage? please suggest.

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete

Blogger Widgets