Hello Guys,

In this post I am going to share a lightning component that displays the company profile/social profile based on the website (URL). This lightning component uses “FullContact API” to display the company profile.

This lightning component can be used on the Account detail page : It will display the company logo, overview, founded year, number of employees, phone, email, social media profile, addresses, ranking, etc. These information can be used by sales and marketing people for their operations.

FullContact REST API used to fetch the company information based on the website(domain).

Find the component code below OR here:

companyProfile

<aura:component controller="FullContactAccountDetailsContrl" implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId" Access="global" >
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="recordId" type="Id" />
<aura:attribute name="photo" type="string"/>
<aura:attribute name="details" type="object"/>
<aura:attribute name="err" type="string"/>
<div id="content">
<div class="slds">
<center>
<aura:if isTrue="{!v.err !=''}">
{!v.err}
<aura:set attribute="else">
<table class="slds-table slds-table--bordered" style="table-layout: fixed; width: 100%; ">
<tr>
<td><img src="{!v.details.logo}" width="110" height="110" style=" "></img></td>
<td> <b>{!v.details.organization.name}</b></td>
</tr>
<tr>
<td>Employee:</td>
<td>{!v.details.organization.approxEmployees}</td>
</tr>
<tr>
<td>Founded</td>
<td>{!v.details.organization.founded}</td>
</tr>
<tr>
<td>Overview</td>
<td id="overview">
{!v.details.organization.overview}
</td>
</tr>
<aura:iteration items="{!v.details.organization.contactInfo.phoneNumbers}" var="c">
<tr>
<td>Phone:</td>
<td>{!c.number}</td>
</tr>
</aura:iteration>
<aura:iteration items="{!v.details.organization.contactInfo.emailAddresses}" var="c">
<tr>
<td>Email:</td>
<td>{!c.value}</td>
</tr>
</aura:iteration>
<aura:iteration items="{!v.details.socialProfiles}" var="s">
<tr>
<td >{!s.typeName}</td>
<td> <a href="{!s.url}" target="_blank" > {!s.typeName} Profile</a>
</td>
</tr>
</aura:iteration>
<tr>
<td>Addresses:</td>
<td id="Addresses">{!v.details.organization.contactInfo.addresses[0].addressLine1},
{!v.details.organization.contactInfo.addresses[0].addressLine2},
{!v.details.organization.contactInfo.addresses[0].locality},
{!v.details.organization.contactInfo.addresses[0].country.name},
{!v.details.organization.contactInfo.addresses[0].postalCode}
</td>
</tr>
<tr>
<td>Ranking: </td>
<td>{!v.details.traffic.ranking[0].rank} ({!v.details.traffic.ranking[0].locale})</td>
</tr>
</table>
</aura:set>
</aura:if>
</center>
</div>
</div>
</aura:component>
view raw companyProfile hosted with ❤ by GitHub

companyProfileController

({
doInit : function(component, event, helper) {
helper.fetchCompanyProfile(component,event,helper);
}
})

companyProfileHelper

({
fetchCompanyProfile : function(component,event,helper) {
var action=component.get("c.getAccountDetails");
action.setParams({
"rec_id": component.get("v.recordId")
});
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
if(response.getReturnValue() == 'Enter website to see the company profile'){
component.set("v.err",'Enter website to see the company profile');
}else{
var data = JSON.parse(response.getReturnValue());
component.set("v.details",data);
component.set("v.err",'');
}
}
});
$A.enqueueAction(action);
}
})
view raw companyProfileHelper hosted with ❤ by GitHub

companyProfileCSS

.THIS #overview{
word-wrap: break-word;
white-space: pre-wrap;
}
.THIS #Addresses{
word-wrap: break-word;
white-space: inherit;
}
view raw companyProfileCSS hosted with ❤ by GitHub

FullContactAccountDetailsContrl

public class FullContactAccountDetailsContrl {
@AuraEnabled
public static string getAccountDetails(string rec_id){
String msg = '';
try{
Account acc=[select Website from account where id=:rec_id ];
system.debug('domain : '+ acc.Website);
if(acc.Website != null && acc.Website != ''){
string baseURL = 'https://api.fullcontact.com/v2/company/lookup.json?domain&#39;;
string apikey = '9e340d31aXXXXXXX'; // Your API Key (Register on https://dashboard.fullcontact.com/register to get API Key)
string url = baseURL +'='+ acc.Website + '&apiKey=' + apikey;
HttpRequest req = new HttpRequest();
Http http = new Http();
req.setMethod('GET');
req.setEndpoint(url);
HttpResponse res = http.send(req);
system.debug('response status code: '+res.getStatusCode());
system.debug(''+res.getBody());
string body=res.getBody();
system.debug('Retured Body: '+body);
if (res.getStatusCode() == 200) {
return res.getBody();
}
else{
return null;
}
}
else{
return 'Enter website to see the company profile';
}
}
catch(Exception e){
return null;
}
}
}

Now add this component on the Account detail page and make sure the website field is not blank.

References:

http://docs.fullcontact.com/#company-api-v2

Register here and get API KEY: https://dashboard.fullcontact.com/register

Thanks

Arun Kumar