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, found year, number of employees, phone, email, social media profile, addresses, ranking, etc. This information can be used by sales and marketing people for their operations.
FullContact REST API is used to fetch the company information based on the website(domain).
Find the component code below OR here:
companyProfile
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
companyProfileController
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ({ | |
| doInit : function(component, event, helper) { | |
| helper.fetchCompanyProfile(component,event,helper); | |
| } | |
| }) |
companyProfileHelper
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ({ | |
| 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); | |
| } | |
| }) |
companyProfileCSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .THIS #overview{ | |
| word-wrap: break-word; | |
| white-space: pre-wrap; | |
| } | |
| .THIS #Addresses{ | |
| word-wrap: break-word; | |
| white-space: inherit; | |
| } |
FullContactAccountDetailsContrl
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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'; | |
| 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
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.