Apex Code Development You need to sign in to do that
Don't have an account?
Tree Diagram Pictorical representation using Aura Component
Hello all
I am New to the Aura Componets, i am trying to Build Tree Structure Pictorical Diagram where related contacts should show
for Parent Account, any help would highly be appriated
My Code
I am New to the Aura Componets, i am trying to Build Tree Structure Pictorical Diagram where related contacts should show
for Parent Account, any help would highly be appriated
Apex code
public class AccountTreeMapClass {
@AuraEnabled
public static account getaccountData(string recId){
return [select id, name, Company_Head__c,Sales_Team__c,SalesManager__c,Department__c,Director__c, HR_Team__c, Manager1__c, Team_Manager1__c,
Manager2__c, Team_Manager2__c From account where id=: recId];
}
}
-----------------------------
Component
<aura:component controller="AccountTreeMapClass" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="acc" type="Account"/>
<aura:attribute name="recordId" type="String" default = "0012w0000085dU4AAI" />
<aura:handler event="force:refreshView" action="{! c.doInit}" />
<aura:handler name="init" value="{! this}" action="{! c.doInit}" />
<lightning:layout>
<div class="slds-scrollable" style="height:24rem;width:50rem;background-color: antiquewhite;">
<body style="margin-top: -19px;">
<div class="tree" style="width:200%">
<aura:if isTrue="{!not(empty(v.acc.Department__c))}">
<ul>
<li>
<p class="bg1"><ui:outputText value="{!v.acc.Department__c}"></ui:outputText> Group</p>
<ul>
<li>
<p class="slds-text-heading--medium" style="background-color: yellow;width: 65px;word-break: break-all;">CEO</p>
<aura:if isTrue="{!not(empty(v.acc.Company_Head__c))}">
<ul>
<li class="testry">
<p class="slds-text-heading--medium" style="background-color: lightblue;width: 65px;word-break: break-all;">{!v.acc.Company_Head__c}</p>
</li>
</ul>
</aura:if>
</li>
<li>
<p class="slds-text-heading--medium" style="background-color: yellow;Width: 65px;word-break: break-all;">Director</p>
<aura:if isTrue="{!not(empty(v.acc.Director__c))}">
<ul>
<li>
<p class="slds-text-heading--medium" style="background-color: lightblue;width: 65px;word-break: break-all;"> {!v.acc.Director__c}</p>
</li>
</ul>
</aura:if>
</li>
<li>
<p class="slds-text-heading--medium" style="background-color: yellow;width: 65px;word-break: break-all;">HR Department</p>
<aura:if isTrue="{!not(empty(v.acc.HR_Team__c))}">
<ul>
<li>
<p class="slds-text-heading--medium" style="background-color: lightblue;width: 65px;word-break: break-all;"> {!v.acc.HR_Team__c}</p>
</li>
</ul>
</aura:if>
</li>
<li>
<p class="slds-text-heading--medium" style="background-color: yellow;width: 65px;word-break: break-all;">Project Manager1</p>
<aura:if isTrue="{!not(empty(v.acc.Manager1__c))}">
<ul>
<li>
<p class="slds-text-heading--medium" style="background-color: lightblue;width: 65px;word-break: break-all;">{!v.acc.Manager1__c}</p>
<ul>
<li>
<p class="slds-text-heading--medium" style="background-color: lightgray;width: 65px;word-break: break-all;">{!v.acc.Team_Manager1__c}</p>
</li>
</ul>
</li>
</ul>
</aura:if>
</li>
<li>
<p class="slds-text-heading--medium" style="background-color: yellow;width: 65px;word-break: break-all;">Project Manager2</p>
<aura:if isTrue="{!not(empty(v.acc.Manager2__c))}">
<ul>
<li style="background-color: antiquewhite;">
<p class="slds-text-heading--medium" style="background-color: lightblue;width: 65px;word-break: break-all;"> {!v.acc.Manager2__c}</p>
<ul>
<li style="background-color: antiquewhite;">
<p class="slds-text-heading--medium" style="background-color: lightgray;width: 65px;word-break: break-all;">Yeshwanth</p><!--{!v.keyResult.Team_Manager2__c}-->
</li>
<li style="background-color: antiquewhite;">
<p class="slds-text-heading--medium" style="background-color: lightgray;width: 65px;word-break: break-all;">Sai</p>
</li>
</ul>
</li>
</ul>
</aura:if>
</li>
<li>
<p class="slds-text-heading--medium" style="background-color: yellow;width: 65px;word-break: break-all;">Sales Department</p>
<aura:if isTrue="{!not(empty(v.acc.Sales_Team__c))}">
<ul>
<li class="test" style="background-color: antiquewhite;">
<p class="slds-text-heading--medium" style="background-color: lightblue;width: 65px;word-break: break-all;">{!v.acc.Sales_Team__c}</p>
</li>
</ul>
</aura:if>
</li>
<li>
<p class="slds-text-heading--medium" style="background-color: yellow;width: 65px;word-break: break-all;">Sales Project Manager</p>
<aura:if isTrue="{!not(empty(v.acc.SalesManager__c))}">
<ul>
<li class="test">
<p class="slds-text-heading--medium" style="background-color: lightblue;width: 65px;word-break: break-all;">{!v.acc.SalesManager__c}</p>
</li>
</ul>
</aura:if>
</li>
</ul>
</li>
</ul>
</aura:if>
</div>
</body>
</div>
</lightning:layout>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div class="tree11" >
<body>
<a style="background-color: lightgreen;font-weight: 300;font-size: 17px;border: 2px solid red;border-radius: 4px;">Account</a>
<img src="{!$Resource.Capture1}" style="margin-left: 126px;margin-top: -43px;width: 80px;margin-left: 0px;height: 38px;margin-top: -10px;border: 2px solid aliceblue;border-radius: 14px;"/>
<ul>
<li>
<a style="background-color: yellow;font-weight: 300;font-size: 17px;border: 2px solid red;border-radius: 4px;">Contact1</a>
<ul>
<li>
<a style="background-color: lightblue;font-weight: 300;font-size: 17px;border: 2px solid red;border-radius: 4px;"> {!v.acc.Company_Head__c}</a>
</li>
</ul>
</li>
<li>
<a style="background-color: yellow;font-weight: 300;font-size: 17px;border: 2px solid red;border-radius: 4px;">Contact2</a>
<ul>
<li>
<a style="background-color: lightblue;font-weight: 300;font-size: 17px;border: 2px solid red;border-radius: 4px;"> {!v.acc.Director__c}</a>
</li>
</ul>
</li>
<li>
<a style="background-color: yellow;font-weight: 300;font-size: 17px;border: 2px solid red;border-radius: 4px;">Contact3</a>
<ul>
<li>
<a style="background-color: lightblue;font-weight: 300;font-size: 17px;border: 2px solid red;border-radius: 4px;"> {!v.acc.HR_Team__c}</a>
</li>
</ul>
</li>
<li>
<a style="background-color: yellow;font-weight: 300;font-size: 17px;border: 2px solid red;border-radius: 4px;">Contact4</a>
<ul>
<li>
<a style="background-color: lightblue;font-weight: 300;font-size: 17px;border: 2px solid red;border-radius: 4px;">Contact5</a>
<ul>
<li>
<a style="background-color: lightgray;font-weight: 300;font-size: 17px;border: 2px solid red;border-radius: 4px;">Contact6</a><!--{!v.keyResult.Team_Manager1__c}-->
</li>
<li>
<a style="background-color: lightgray;font-weight: 300;font-size: 17px;border: 2px solid red;border-radius: 4px;">Contact7</a>
</li>
<li>
<a style="background-color: lightgray;font-weight: 300;font-size: 17px;border: 2px solid red;border-radius: 4px;">Contact8</a>
</li>
<li>
<a style="background-color: lightgray;font-weight: 300;font-size: 17px;border: 2px solid red;border-radius: 4px;">Contact9</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a style="background-color: yellow;font-weight: 300;font-size: 17px;border: 2px solid red;border-radius: 4px;">Project Manager2</a>
<ul>
<li>
<a style="background-color: lightblue;font-weight: 300;font-size: 17px;border: 2px solid red;border-radius: 4px;"> {!v.acc.Manager2__c}</a>
<ul>
<li>
<a style="background-color: lightgray;font-weight: 300;font-size: 17px;border: 2px solid red;border-radius: 4px;">Yeshwanth</a><!--{!v.keyResult.Team_Manager2__c}-->
</li>
<li>
<a style="background-color: lightgray;font-weight: 300;font-size: 17px;border: 2px solid red;border-radius: 4px;">Sai</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a style="background-color: yellow;font-weight: 300;font-size: 17px;border: 2px solid red;border-radius: 4px;">Sales Department</a>
<ul>
<li>
<a style="background-color: lightblue;font-weight: 300;font-size: 17px;border: 2px solid red;border-radius: 4px;">Ila, Nikhil</a>
</li>
</ul>
</li>
<li>
<a style="background-color: yellow;font-weight: 300;font-size: 17px;border: 2px solid red;border-radius: 4px;">Sales Project Manager</a>
<ul>
<li>
<a style="background-color: lightblue;font-weight: 300;font-size: 17px;border: 2px solid red;border-radius: 4px;">Haider</a>
</li>
</ul>
</li>
</ul>
</body>
</div>
</aura:component>
----------------------------
J.s code
({
doInit: function (component, event, helper) {
var action= component.get("c.getaccountData");
action.setParams({
recId: component.get("v.recordId")
});
action.setCallback(this, function(res) {
var state=res.getState();
var r = res.getReturnValue();
if(state==="SUCCESS"){
component.set("v.acc", r);
}
});
$A.enqueueAction(action);
},
recordUpdate: function (component, event, helper) {
var accountFields = component.get("v.keyResult");
var items = [{
"label": "Department Of Proseraa",
"name": "1",
"expanded": true,
"items": [{
"label": "CEO",
"name": "2",
"expanded": true,
"items" :[{
"label": accountFields.Company_Head__c,
"name": "3",
"expanded": true,
}]
},{
"label": "Director",
"name": "4",
"expanded": true,
"items" :[{
"label": accountFields.Director__c,
"name": "3",
"expanded": true,
}]
},{
"label": "HR Team",
"name": "5",
"expanded": true,
"items" :[{
"label": accountFields.HR_Team__c,
"name": "3",
"expanded": true,
}]
},{
"label": "Project Manager",
"name": "6",
"expanded": true,
"items" :[{
"label": accountFields.Manager1__c,
"name": "7",
"expanded": true,
"items" :[{
"label": accountFields.Team_Manager1__c,
"name": "8",
"expanded": true,
}]
},{
"label": accountFields.Manager2__c,
"name": "9",
"expanded": true,
"items" :[{
"label": accountFields.Team_Manager2__c,
"name": "10",
"expanded": true,
'tag': 'button',
}]
}]
}],
}];
component.set('v.items', items);
},
})
----------------------
css
.THIS .tree ul {
padding-top: 20px; position: relative;
transition: all 0.5s;
}
.THIS .tree li {
float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 40px 0px 0 3px;
transition: all 0.5s;
margin-left: -1px;
}
.THIS .tree li::before, .THIS .tree li::after{
content: '';
position: absolute; top: 0; right: 50%;
border-top: 2px solid blue;
width: 55%; height: 40px;
}
.THIS .tree li::after{
right: auto; left: 50%;
border-left: 2px solid blue;
}
/*We need to remove left-right connectors from elements without
any siblings*/
.THIS .tree li:only-child::after, .THIS .tree li:only-child::before {
display: none;
}
/*Remove space from the top of single children*/
.THIS .tree li:only-child{ padding-top: 0;}
/*Remove left connector from first child and
right connector from last child*/
.THIS .tree li:first-child::before, .THIS .tree li:last-child::after{
border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.THIS .tree li:last-child::before{
border-right: 2px solid blue;
border-radius: 0 5px 0 0;}
.THIS .tree li:first-child::after{
border-radius: 10px 0 0 0;
}
/*Time to add downward connectors from parents*/
.THIS .tree ul ul::before{
content: '';
position: absolute; top: 0; left: 49%;
border-left: 3px solid blue;
width: 0; height: 20px;
}
.THIS .test{
position: absolute; top: 0;
}
.THIS .bg1{
background-color: lightgreen;
}
.THIS .tree ul ul:empty::before{
display: none;
}
.THIS .tree li p{
border: 1px solid red;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 10px;
display: inline-block;
border-radius: 5px;
transition: all 0.5s;
border-right: 2px solid red;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.THIS .tree li p:hover, .THIS .tree li p:hover+ul li p {
background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.THIS .tree li p:hover+ul li::after,
.THIS .tree li p:hover+ul li::before,
.THIS .tree li p:hover+ul::before,
.THIS .tree li p:hover+ul ul::before{
border-color: #94a0b4;
}
.THIS.tree11{
margin:0 auto;
width: 100%;
}
.THIS.tree11 ul{
padding: 10px 5px 0 5px;
position: relative;
z-index: 1;
}
.THIS.tree11 li{
margin-left: 28px;
list-style-type: none;
position: relative;
padding: 5px 5px 0 5px;
}
.THIS.tree11 li::after{
content: '';
position: absolute;
border-bottom: 3px solid #c61f1f;
border-left: 3px solid #c61f1f;
height: 33px;
width: 15px;
right: auto;
left: -10px;
top: -11px;
padding: -2px 10px;
border-radius:2px;
}
-----------------------------------------------------
<aura:application extends="Force:slds">
<c:TreePicture />
</aura:application>
Please feel to reach out to the accelerator team who can give you the idea of how you can implement according to your business requirement if you have the premier success plan.
Please find the details on how to request for an accelerator:https://help.salesforce.com/articleView?id=000337601&type=1&mode=1
Otherwise, I would request you to reach out to your Account Executive If you wish to upgrade to Premier Support please contact your Account Executive.
Thanks.
https://github.com/bumbeishvili/d3-organization-chart
https://observablehq.com/@bumbeishvili/d3-v5-organization-chart
In theory, it is as simple as the code below:
const TreeChart = require ('https://bundle.run/d3-org-chart@1.0.4'); new TreeChart() .container(<myDOMElement>) .data(<myData>) .svgWidth(700) .initialZoom(0.4) .onNodeClick(d=> console.log(d+' node clicked')) .render()... but <myData> is the complicated part to build based on your hierarchical data.
1) LWC - that works for sure: This code is the LibsD3 component from the Lightning Web Components recipes app. It uses the D3 JavaScript library to create an interactive data visualization.
https://lwc.dev/guide/javascript_third_party_library
2) With Aura, I will try because the locker service version + d3.js version can be mutually exclusive (changing frequently).
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_libs_platform.htm
d3.js works finally with Aura but it is often unclear (read all the article and it is Aura or/and LWC) must be tried:
https://developer.salesforce.com/blogs/2019/05/lightning-platform-developer-conversations-locker-security.html
myData = [{ name: "Ian Devling" imageUrl: "https://raw.githubusercontent.com/bumbeishvili/Ass…s/master/Projects/D3/Organization%20Chart/cto.jpg" area: "Corporate" office: "CTO office" unit: Object {type: "business", value: "Business first"} positionName: "Cheaf Executive Officer " id: "O-1" parentId: null }, { name: "Davolio Nancy" imageUrl: "https://raw.githubusercontent.com/bumbeishvili/Ass…ster/Projects/D3/Organization%20Chart/general.jpg" office: "CEO office" unit: Object {type: "business", value: "Business one"} positionName: "CTO " id: "O-2" parentId: "O-1" }]https://github.com/bumbeishvili/d3-organization-chart/wiki/Data-Generation
The problem is still the locker service (use strict ?)
The body of a class is executed in strict mode (prerequisite for the locker service).
D3.js by itself in the other hand is fully compatible with Lightning Aura but that is not sufficient without the class TreeChart.
http://sfcure.com/2018/05/14/how-to-create-charts-using-d3-library-in-lightning-components/
Thanks for Suggestion, My God those look little sacry, can you plz guide me like from do i start, I would be very greatful to you
The D3.js (v5) can be imported into an Aura component (test ok)
Javascript classes can be also used (test ok) with Aura component ... but the class TreeChart itself (the most important, a big JS class) even if it is declared into an Aura component (no locker problem) has a problem of structure for the parameters attrs that doesn't work directly as it is.
I am reading the documentation and I am doing tests because I would like to use TreeChart myself but there is still a problem.
D3.js is intensively used for charts (bar charts and so on) but a simple class or hierarchical diagram is rarer with D3 on github.
David Bumbeishvili solved this complicated problem recently with amazing animations. Very nicely done and easy to use.
That could be easier with LWC instead of Aura and there are perhaps also other D3 hierarchical modules on github (David Bumbeishvili's one is the best code that I found).
The other idea is to convert the class TreeChart in functions like the main D3.js but it is a long difficult work manually.
There are tools that can help (webpack and so on) for the merge of d3.js with index.js (treechart class) but I never use it before.
There are several errors in your code, In the Apex class you are not fetching the
the BindingNode functionality, try adding this functionality
You can;t use scrollable functionality since all the data is getting feteched from JSON parser, Check on that
public static BindNodes.NodeIcon getNodeIcon() { BindNodes.NodeIcon currentAccountNodeIcon = new BindNodes.NodeIcon(); currentAccountNodeIcon.icon=''; currentAccountNodeIcon.size=0; return currentAccountNodeIcon; } public static BindNodes.BorderColor getBorderColorMain() { BindNodes.BorderColor currentAccBorderColorMain = new BindNodes.BorderColor(); currentAccBorderColorMain.red =15; currentAccBorderColorMain.green =140; currentAccBorderColorMain.blue =121; currentAccBorderColorMain.alpha =1; return currentAccBorderColorMain; } public static BindNodes.BorderColor getBorderColorNodeImage() { BindNodes.BorderColor currentAccBorderColorNodeImage = new BindNodes.BorderColor(); currentAccBorderColorNodeImage.red =19; currentAccBorderColorNodeImage.green =123; currentAccBorderColorNodeImage.blue =128; currentAccBorderColorNodeImage.alpha =1; return currentAccBorderColorNodeImage; } public static BindNodes.BorderColor getBorderColorconnector() { BindNodes.BorderColor currentAccBorderColorconnector = new BindNodes.BorderColor(); currentAccBorderColorconnector.red =220; currentAccBorderColorconnector.green =189; currentAccBorderColorconnector.blue =207; currentAccBorderColorconnector.alpha =1; return currentAccBorderColorconnector; } public static BindNodes.BorderColor getAccountBGColor() { BindNodes.BorderColor currentAccbgColor = new BindNodes.BorderColor(); currentAccbgColor.red =235; currentAccbgColor.green =143; currentAccbgColor.blue =70; currentAccbgColor.alpha =1; return currentAccbgColor; } public static BindNodes.BorderColor getContactBGColor() { BindNodes.BorderColor currentContactbgColor = new BindNodes.BorderColor(); currentContactbgColor.red =160; //160, 148, 237 currentContactbgColor.green =148; currentContactbgColor.blue =237; currentContactbgColor.alpha =1; return currentContactbgColor; } public static BindNodes.NodeImage getNodeImage(BindNodes.BorderColor currentAccBorderColorNodeImage) { BindNodes.NodeImage bindNodeImage = new BindNodes.NodeImage(); bindNodeImage.url = ''; bindNodeImage.width = 100; bindNodeImage.height = 100; bindNodeImage.centerTopDistance = 0; bindNodeImage.centerLeftDistance = 0; bindNodeImage.cornerShape = 'CIRCLE'; bindNodeImage.shadow = false; bindNodeImage.borderWidth = 0; bindNodeImage.borderColor = currentAccBorderColorNodeImage; return bindNodeImage; } public static BindNodes getNode(BindNodes.NodeIcon currentAccountNodeIcon,BindNodes.BorderColor currentAccBorderColorMain,BindNodes.BorderColor currentAccBorderColorNodeImage,BindNodes.BorderColor currentAccBorderColorconnector,BindNodes.BorderColor currentAccbgColor,BindNodes.NodeImage bindNodeImage) { BindNodes currentAccount = new BindNodes(); // currentAccount.nodeId = 'O-1'; // currentAccount.parentNodeId = null; currentAccount.width = 342; currentAccount.height= 146; currentAccount.borderWidth= 1; currentAccount.borderRadius= 5; currentAccount.connectorLineWidth=5; currentAccount.dashArray=''; currentAccount.expanded= false; currentAccount.directSubordinates=1; currentAccount.totalSubordinates=1; currentAccount.borderColor = currentAccBorderColorMain; currentAccount.backgroundColor=currentAccbgColor; currentAccount.nodeImage = bindNodeImage; currentAccount.nodeIcon = currentAccountNodeIcon; // currentAccount.template ='<div>\n<div style=\"margin-left:70px;\n margin-top:10px;\n font-size:20px;\n font-weight:bold;\n\">'+AccountName+' </div>\n<div style=\"margin-left:70px;\n margin-top:10px;\n font-size:20px;\n font-weight:bold;\n\">'+phone+' </div>\n</div>'; currentAccount.connectorLineColor = currentAccBorderColorconnector; return currentAccount; } public static BindNodes getMasterAccount(String AccountName,String phone) { BindNodes.NodeIcon currentAccountNodeIcon = getNodeIcon(); BindNodes.BorderColor currentAccBorderColorMain =getBorderColorMain(); BindNodes.BorderColor currentAccBorderColorNodeImage = getBorderColorNodeImage(); BindNodes.BorderColor currentAccBorderColorconnector = getBorderColorconnector(); BindNodes.BorderColor currentAccbgColor = getAccountBGColor(); BindNodes.NodeImage bindNodeImage = getNodeImage(currentAccBorderColorNodeImage); BindNodes currentAccount = getNode(currentAccountNodeIcon,currentAccBorderColorMain,currentAccBorderColorNodeImage,currentAccBorderColorconnector,currentAccbgColor,bindNodeImage); currentAccount.nodeId = 'O-1'; currentAccount.parentNodeId = null; currentAccount.template ='<div>\n<div style=\"margin-left:70px;\n margin-top:10px;\n font-size:20px;\n font-weight:bold;\n\">'+AccountName+' </div>\n<div style=\"margin-left:70px;\n margin-top:10px;\n font-size:20px;\n font-weight:bold;\n\">'+phone+' </div>\n</div>'; return currentAccount; } public static List<BindNodes> getBindNodesContact(List<Contact> contactList) { List<BindNodes> BindNodesList = new List<BindNodes>(); BindNodes.NodeIcon currentAccountNodeIcon = getNodeIcon(); BindNodes.BorderColor currentAccBorderColorMain =getBorderColorMain(); BindNodes.BorderColor currentAccBorderColorNodeImage = getBorderColorNodeImage(); BindNodes.BorderColor currentAccBorderColorconnector = getBorderColorconnector(); BindNodes.BorderColor currentAccbgColor = getAccountBGColor(); BindNodes.NodeImage bindNodeImage = getNodeImage(currentAccBorderColorNodeImage); BindNodes.BorderColor currentContactbgColor = getContactBGColor(); Integer i = 2; String baseUrl = URL.getSalesforceBaseUrl().toExternalForm(); baseUrl = baseUrl + '/lightning/r/Contact/'; system.debug('===> baseUrl '+ baseUrl); for(Contact con : contactList) { String contactfirstname =''; String contactlastname =''; String contactemail =''; String contactphone=''; if(con.FirstName!=null) { contactfirstname = con.FirstName; } if(con.LastName!=null) { contactlastname = con.LastName; } if(con.Email!=null) { contactemail = con.Email; } if(con.Phone!=null) { contactphone = String.valueOf(con.Phone); } BindNodes currentContact = getNode(currentAccountNodeIcon,currentAccBorderColorMain,currentAccBorderColorNodeImage,currentAccBorderColorconnector,currentContactbgColor,bindNodeImage); currentContact.nodeId = 'O-'+String.valueOf(i); currentContact.parentNodeId='O-1'; currentContact.template ='<div>\n<div style=\"margin-left:70px;\n margin-top:10px;\n font-size:20px;\n font-weight:bold;\n\"><a target=\"_blank\" href=\"'+ baseUrl + con.Id + '/view\">'+contactfirstname+' '+contactlastname+'</a></div>\n<div style=\"margin-left:70px;\n margin-top:10px;\n font-size:20px;\n font-weight:bold;\n\">'+contactphone+' </div>\n<div style=\"margin-left:70px;\n margin-top:10px;\n font-size:20px;\n font-weight:bold;\n\">'+contactemail+' </div>\n</div>'; BindNodesList.add(currentContact); i++; } return BindNodesList; }