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 😎

Send an Email to the user who is not associated with any record in Dynamics CRM

I have been seen a lot of people were asking for sending emails to an external user, who is not associated with either Contacts, Account, Queue, Lead, User or any CRM entity record.

Usually, If you put any email address in 'To' field, you see an error in the email address (see below):

CRM System Setting: Allow messages with unresolved email recipients to be sent

Output:

Now, you can send email to the external email address as well.

Cheers 😎

Show Custom Error Message in CRM Portal

While working on Dynamics 365 Portal, We all have observed an error message is displayed like below when an error occurred in Portal Add-on.

"We're sorry, but something went wrong. Error ID #[<GUID>]"

"An unknown failure has occurred. Error ID # [<GUID>]"

But they're quite unclear, so users cannot take any action based on this message. GUID doesn't help.

If there's certain contact such as e-mail address of Portal admin, the error message should contain this information and suggest to contact to admin.

These type of errors usually comes when any CRM Plugins/Workflows throw the Server-Side error while processing the Portal requests.

Currently, Microsoft has not provided any direct way to customize this error message. Though a lot of people submitted their ideas on Microsoft Idea Portal to addon this feature in upcoming portal releases.

https://ideas.dynamics.com/ideas/dynamics-crm/ID0000538

Solution:

Though we do not have any direct way to achieve this, so I have written 2-3 lines of script. Using that you can show the user-friendly error message to the portal users.

$(window).load(function()
{
      // You just need to Change the error message only

      var errorMessage = "We're experiencing an internal server problem. Please try again later or contact support@help.com";
     
      $('.text-danger').html('<span class="fa fa-exclamation-triangle" aria-hidden="true"></span>&nbsp'+errorMessage);

});

In the above code, you just need to change the error message and paste the whole code inside Custom JavaScript section of the Web page.

Demo:

Cheers 😎 

Compare Two Date Field Values in Dynamics CRM using JavaScript

Compare CRM Date Field's Value from Today's Date:

function compareDateFromTodaysDate()
{
var startDate = Xrm.Page.getAttribute('birthdate').getValue();

var todayDate = new Date(); 
todayDate.setHours(0,0,0);

if(String(startDate) == String(todayDate)) 
{
alert("DOB is equal to today's date");
Xrm.Page.getAttribute('birthdate').setValue(null);
return;
}

if (startDate < todayDate) 
{
alert("DOB is less than today's date");
return;
}
if (startDate > todayDate) 
{
alert("DOB is greater than today's date");
Xrm.Page.getAttribute('birthdate').setValue(null);
return;
}
}


Compare CRM Two Date Field's Values:

function compareTwoDates()
{
        var DOB = Xrm.Page.getAttribute('birthdate').getValue();

var Anniversary = Xrm.Page.getAttribute('anniversary').getValue();

var DOBDate = new Date(DOB); 
 
        var AnniversaryDate = new Date(Anniversary);
       
if(String(DOBDate) == String(AnniversaryDate))
        {
            alert("DOB is equal to Anniversary Date ");
    return;
        }
   
if (DOBDate > AnniversaryDate) 
        {
            alert("DOB is greater then Anniversary Date ");
    return;
        }

        if (DOBDate < AnniversaryDate) 
        {
            alert("DOB is Less then Anniversary Date");
    return;
        }
        
}

Note: I have run both the functions on OnChange event of birthdate field of Contact Entity.


Cheers 😎

Dynamically Change the Portal Logo based on Logged In User's Account

Hello Everyone,

There might be a requirement for your client to change the Portal Logo based on the different user's account.

For Example - If the Logged In User's Account is Twitter, He/she should be able to see the Twitter logo on the Portal, same for Chrome and Android Account's Users.

Here is the code, I have written for above example:

Before writing this code, I have already been uploaded the images in web files.

<p><strong><img alt="" id="logoId" style="width: 60px; height: 40px;" src="/Handshake_Emoji_Icon_ios10.png" />&nbsp;Arpit's Dynamics CRM Blog</strong></p><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>

  changeLogo();

  function changeLogo() {

    // get Logged In User's account name
    var loggedInuseraccount = '{{user.parentcustomerid.Name}}';

     // can get Logged In User's name, if you want to change logo based on user name
    var loggedInuseraccount = '{{user.fullname}}';


    if (loggedInuseraccount == 'Chrome') {

      $("#logoId").attr("src", "/chrome");

    }

    if (loggedInuseraccount == 'Twitter') {

      $("#logoId").attr("src", "/twitter");

    }
    if (loggedInuseraccount == 'Android') {

      $("#logoId").attr("src", "/android");

    }

  }
</script>


Paste this code inside 'Navbar Left' Content Snippet.

Navigate to- Portals > Open 'Navbar Left' Content Snippet > Paste above code under 'Value(HTML)'

Demo :

For Android Account's Portal Users

For Chrome Account's Portal Users

For Twitter Account's Portal Users

Cheers 😎

Enable +New button in the Lookup view of the Dynamics 365 portal.

Hello Everyone,

I have been seen a lot of people were finding a way or solution to add a custom button or 'New' button inside Lookup dialog in order to create a new record directly from Portal if not found in lookup Search result.

Here are the few links where it has been asked:

https://community.dynamics.com/crm/f/117/t/244076

https://community.dynamics.com/crm/f/117/t/246265


Here is the code I have written to achieve the same:

// Calling of Function

AddNewButton_InLookupDiaog('customerid','Select','customeridNewBtnId','Add New','~/create-account','Authenticated');

// lookupfieldScehmaName = schema name of lookup field
// NewButtonPosition = Position, where you want to place the 'New' Button inside Lookup Window
// NewButtonId = Id of New Button, Make sure this should be unique
// NewButtonText = text to display of New Button
// NewButtonActionURL = Provide webpage partial URL or the page where you want to redirect the user in order to create new record
// Webrole = Role to which 'New' button should be visible. If passed 'Authenticated' then 'New' would be visible to Authenticated Users only.

// Function Definition

function AddNewButton_InLookupDiaog(lookupfieldScehmaName,NewButtonPosition, NewButtonId,NewButtonText,NewButtonActionURL,Webrole)
{
var loggedInUserRole = '{{user.roles}}';

if(loggedInUserRole.indexOf(Webrole) == -1){
    return;
}
var elementId = lookupfieldScehmaName+"_lookupmodal";

$("#"+elementId).closest('table').on("loaded", function ()
{
var IsAddNewButtonAdded = $("#"+NewButtonId).length;

// If button is not added then add the button
if(IsAddNewButtonAdded == 0)
{
$("#"+elementId).find('button:contains("'+NewButtonPosition+'")').before('<button id="'+NewButtonId+'" aria-label="New" class="primary btn btn-primary" tabindex="0" title="New" type="button" onclick="NewButtonAction('+"'"+NewButtonActionURL+"'"+')">'+NewButtonText+'</button>');
}
});
}

function NewButtonAction(redirectionURL)
{
window.open(redirectionURL,'_blank');
}

Demo:

Log in to CRM Portal :

We are going to add a 'Add New' button in 'Customer' Lookup Dialog:

Press F12 or Inspect to get the Schema name of the lookup field. You can check the schema name of the field from CRM also from Form Customization :

Add code to Add Add 'New' button in Customer Lookup Dialog :

Open Web page > Go to Advanced Tab > Custom Javascript and paste the given code as mentioned below:

Output :

Once clicked on 'Add New'

Let's have a look all the Parameters one by one:

Parameter 1 - lookupfieldScehmaName:

For Example, It's value =  'customerid'

Parameter 2 - NewButtonPosition:

For Example, It's value =  'Select'

Parameter 3 - NewButtonId:

For Example, It's value =  'customeridNewBtnId'

Parameter 4 - NewButtonText:

For Example, It's value  = 'Add New'

Parameter 5 - NewButtonActionURL:

For Example, It's value =  '~/create-account'

Parameter 6 - Webrole:

For Example, It's value = 'Authenticated'

Note - 

• To add 'New' button in multiple lookups on the form, you just need to call the function again with required parameters of each lookup. The Function definition will remain same.

• Make sure you are providing the unique Id for each button ('New') for every lookup dialog.

Please do not forget to share your feedback:

Cheers 😎