Dynamics CRM features a new way to visualize relationships that exists between connected records.
Hierarchy Visualizations provide a clear display of these structures by helping CRM users to navigate and understand each level.
CRM has long enabled users to define parent and child account relationships but these lacked any inbuilt views that provide a graphical overlay. From
CRM 2015, Dynamics enables tree view structure to be easily configured between parent and child records.
In one of my previous Dynamics CRM implementation, customer were looking for
hierarchy visualizations of Parent Contact of an Account on Account form.
Before going to start actual implementation, we need to first understand the
limitations of
Hierarchy Visualizations.
- Hierarchy functions and visualizations are currently only supported within a single entity (self referential) on a 1:N basis.
- Each hierarchy member must be of the same type, example for a Contact entity, a CRM hierarchy can involve multiple Contacts but it is not possible to bring an Account, or any other related CRM entity into hierarchy structure.
- The CRM hierarchy view will only fit a maximum of 4 tiles horizontally into the view, and these are shown in alphabetical order by default.
- If a hierarchy level has more than 4 records then the view will show the number of additional records either side of the present window enabling users to scroll left or right to browse other tiles.
Let's get started with implementation part;
- Go to Customizations > Customize the System > Contact Entity (expand) > Fields > New.
- Create a new self-referential lookup field named 'Parent Contact' or ' Manager' and place it on the Contact main form.
- Go to Customizations > Customize the System > Contact Entity (expand) > Forms > New
- Create a new Quick View Form to show as Contact Tile.
- Now, go to Hierarchy Settings of Contact entity and create new settings as below.
- Name - Type the name for your hierarchy settings in my case 'new_hierarchy_contact'.
- Default Quick View Form - Select quick view form which you have created as above.
- Hierarchical Relationship - We previously created a self-referential field called 'Parent Contact' or 'Manager' as created above that will look-up other records specific to contact entity so this has been selected for the hierarchy relationship setting.
- To ensure the relationship is enabled for hierarchies click the link 'Mark a relationship as enabled for hierarchies', select the self-referential field and click on 'Mark hierarchical' and Done.
- Publish the customization.
Now, its time to test the changes:
On the Contact form we've added a new self-referential field named 'Manager' that will determine the hierarchy structure between parent and child records.
For the above contact record, Thomas Andersen (sample) have manager set as Jim Glynn (sample).
Only one parent can be set so in this case no additional manager can be defined for this contact. However, as this is a 1:N relationship multiple child contacts can have same parent contact or manager in the system as below;
An existing hierarchy visualization can be opened from any record by clicking 'View Hierarchy' ribbon button or from view.
Now, we are able to see the contact hierarchy available in the CRM. But, as I said earlier the actual requirement was to show this contact hierarchy at Account level or say on Account form.
On Account form, we will be having Primary Contact and associate contacts as below;
To give the contact hierarchy visualization on Account form, we will add new web-resource and pass primary contact id to it and show the hierarchy in section on the form.
- Go to Customizations > Customize the System.
- Under Components, select Web Resources > New.
- Create new HTML web-resource and add below given code snippets;
<html>
<head>
<meta charset="utf-8">
<style>
html, body{
height:100%;
font-family: Arial, Helvetica, sans-serif;
}
.button {
background-color: #161515;
border: none;
color: #fff;
font-weight:600;
padding: 1% 1%;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin: 4px 2px;
cursor: pointer;
border: none;
border-radius: 10px;
}
.button:hover {background-color: #5C5959}
.button:focus {box-shadow:none;}
* {box-sizing: border-box;}
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 1% 1%;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header-right {
float: none;
}
</style>
<script type="text/javascript">
function loadiFrame() {
var parentContact = window.parent.Xrm.Page.data.entity.attributes.get('primarycontactid').getValue();
if(parentContact != null){
var parentContactId = parentContact[0].id.replace("{", "").replace("}", "");
var srcVal = "https://<OrganizationName>.crm11.dynamics.com/_root/hierarchy.aspx?oId=%7b"+parentContactId+"%7d&etc=2&sitemappath=SFA%7cCustomers%7cnav_conts&pagemode=iframe";
document.getElementById("contactFrame").src = srcVal;
}
}
</script>
<meta></head>
<body onfocusout="parent.setEmailRange();" style="overflow-wrap: break-word;">
<div>
<div class="header">
<a href="#default" class="logo">Parent Contact Hierarchy</a>
<div class="header-right">
<button class="button" onclick="loadiFrame()">Generate Hierarchy</button>
</div>
</div>
<iframe id="contactFrame" src="" name="Parent Contact hierarchy" scrolling="auto" width="100%" height="100%" frameborder="0"></iframe>
</div>
</body>
</html>
In above code we can see that we have placed one button control 'Generate Hierarchy' and on click of that we are loading iFrame which calls below URL by passing Primary Contact id which we have fetched in JavaScript function.
https://<OrganizationName>.crm11.dynamics.com/_root/hierarchy.aspx?oId=%7b"+parentContactId+"%7d&etc=2&sitemappath=SFA%7cCustomers%7cnav_conts&pagemode=iframe"
- Go to Customizations > Customize the System.
- Under Components, select Entity > Account > Forms > Account Form.
- Insert new tab on the form and add web-resource which we have created above.
- Publish the customization.
Now, finally its time to check contact hierarchy visualization on account form.
Hope it helps you to understand the hierarchy visualization and to play around it.
Happy learning!!
