Company Profile Lightning Component using FullContact API

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

One comment

  1. Thank you for so much Arun for this Blog. I have the same scenario and used your code. I have created an account on https://dashboard.fullcontact.com/ as well. When I am trying to execute the code I am getting error: “message”:”Passing API key in request URL not allowed”.

    Please help on this issue if you also face any thing like this.

    Looking forward to your response.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s