Modifying Profile Page In Dynamics 365 Portal

This article is about customizing Dynamics 365 portal profile page. In this article, we are going to discuss how we can customize Dynamics 365 portal profile page.

Introduction

In this article, we are going to discuss how we can customize Dynamics 365 portal profile page.

Requirement

Let’s say we got the following requirements to change a profile page

  1. Hide Parent account
  2. Hide Manage access
  3. Change Text to “Please make sure your personal information is up to date”
  4. Hide Email confirmation
  5. Hide Preferred Language
  6. Hide How can we contact you
  7. Add a Cancel button to redirect to the portal home page.

    Modifying Profile Page in Dynamics 365 Portal
Solution

We can implement 1, 2, 3, 4, 5 and 7 requirements by writing a simple Jquery on the profile page and 4 and 6 can be handled by the portal site setting. Let’s first disable 4 and 6.
  1. Navigate to Portals->Site Settings
  2. Add following site settings, if not available otherwise, make sure they are set to false.

    Modifying Profile Page in Dynamics 365 Portal

    Modifying Profile Page in Dynamics 365 Portal
Now, we need to find out IDs of the fields that we want to hide. To know the ID of the control, we can open profile page and right-click on the control that we want to hide and select Inspect. For example, here is the ID of language lookup.
 
Modifying Profile Page in Dynamics 365 Portal 
 
Some of the controls won’t have it so we need to hide them using other attributes.

To change the text, we can navigate to the Profile page content page and do changes under the HTML tab.
 
Modifying Profile Page in Dynamics 365 Portal 
 
To hide 1, 2 links we can use the following jQuery code.
  1. $('a[title="Parent account"]').hide();  
  2. $('a[title="Manage access"]').hide();  
To hide language lookup we can use the following jQuery
  1. $('#adx_preferredlanguageid').closest('td').hide()  
Now, we need to add a cancel button. First check the Update button ID so that we can put our button next to it. After that we can use the following code to add a Cancel button
  1. $('#ContentContainer_MainContent_MainContent_ContentBottom_SubmitButton').after('<input type="button" value="Cancel" onclick="OnCancelClick()" id="CancelButton" class="btn btn-primary"/>')  
After all the steps are complete, jQuery code should look like below
  1. $(document ).ready(function() {  
  2. //hide language lookup based on lookup id  
  3. $('#adx_preferredlanguageid').closest('td').hide()  
  4. //hide Parent account and Manage access links  
  5. $('a[title="Parent account"]').hide();  
  6. $('a[title="Manage access"]').hide();  
  7. //Add cancel button next to update button  
  8. $('#ContentContainer_MainContent_MainContent_ContentBottom_SubmitButton').after('<input type="button" value="Cancel" onclick="OnCancelClick()" id="CancelButton" class="btn btn-primary"/>')  
  9. });  
  10. //Navigate to home page on Cancel Click  
  11. function OnCancelClick()  
  12. {  
  13.     window.location.href="/";  
  14. }  

We need to place this code under Custom Javascript section under Advanced like below,

 Modifying Profile Page in Dynamics 365 Portal
 
Finally, save your changes and check the profile page in the portal and it should look like below,

Modifying Profile Page in Dynamics 365 Portal 
Stay tuned for more Dynamics 365 Contents.