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

Enable Attach File Option

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:

For Note 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 😎