D&B Direct APEX Code

Company Info

<apex:page standardController="Account">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://dnbdirectapps-cdn.s3.amazonaws.com/dnbapi.js">{API_BASE:'/apex/dnbdirect?_uri=:uri&_body=:data'}</script>
    <script type="text/javascript" src="https://dnbdirectapps-cdn.s3.amazonaws.com/components/ui/ui.js"></script>
       
    <div style="width:600px">
   
        <div class="search_shell">
            <form onSubmit="return false" class="dnbDemo">
                <input type="text" id="companyname" placeholder="Company Name"  class="dnb-ui-theme-light" style="font-size: 17px;height:34px;width:300px" />
                <button id="show_win" type="submit" value="" class="search_btn"><img src="http://dnbdirectapps.com/microapps/assets/images/magnify.png" width="28" height="28" border="0" alt="Search" /></button>
            </form>
        </div>
        <div class="clear"></div>
        <div class="resultSection" id="results"></div>
        <div id="errors"></div>
    </div>
           
    <script type="text/javascript">
$(function() {
        var as = DNB.Ui.autosuggest('#companyname');
        as.select = function(co)
        {
            var widget = new DNB.Ui.CompanyInfo('#results').loading();
            DNB.Api.getCompany(co.companyId)
                .done(widget.render);
        }
 
        var duns = '{!account.duns_num__c}';
        if (duns){
            $('.search_shell').hide();
            var widget = new DNB.Ui.CompanyInfo('#results').loading();
            DNB.Api.getCompany(duns).done(function(resp){
            if (resp['Error:'])
            {
                $('#errors').text(resp['Error:']);
                $('#results').hide();
            }
            }).done(widget.render);
            }
 
    });
    </script>
</apex:page>

Company Info with Family Tree

<apex:page>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://dnbdirectapps-cdn.s3.amazonaws.com/dnbapi.js">{API_BASE:'/apex/dnbdirect?_uri=:uri&_body=:data'}</script>
    <script type="text/javascript" src="https://dnbdirectapps-cdn.s3.amazonaws.com/components/ui/ui.js"></script>
    <div style="width:800px">
   
        <div class="search_shell">
            <form onSubmit="return false" class="dnbDemo">
                <input type="text" id="companyname" placeholder="Company Name"  class="dnb-ui-theme-light" style="font-size: 17px;height:34px;width:300px" />
                <button id="show_win" type="submit" value="" class="search_btn"><img src="http://dnbdirectapps.com/microapps/assets/images/magnify.png" width="28" height="28" border="0" alt="Search" /></button>
            </form>
        </div>
        <div class="clear"></div>
        <div class="resultSection" id="results"></div>
        <div id="errors"></div>
    </div>
           
<script id="dnb-co-info-ft" type="text/x-jquery-tmpl">
    <div id="tabs_${id}">
        <ul>
            <li style="border-left:none;"><a href="#tabs_${id}_overview">Overview</a></li>
            <li><a href="#tabs_${id}_people">Key People</a></li>
            <li><a href="#tabs_${id}_comp">Competitive</a></li>
            <li><a href="#tabs_${id}_fin">Financials</a></li>
            <li style="border-right:none;"><a href="#tabs_${id}_ft">Family Tree</a></li>
        </ul>
        <div id="tabs_${id}_overview"></div>
        <div id="tabs_${id}_people"></div>
        <div id="tabs_${id}_comp"></div>
        <div id="tabs_${id}_fin"></div>
        <div id="tabs_${id}_ft"><div class="ft-container">xxxx</div></div>
    </div>
</script>
 
    <script type="text/javascript">
 
function renderMain(duns) {
    var widget = new DNB.Ui.CompanyInfo('#results', '#dnb-co-info-ft').loading();
    DNB.Api.getCompany(duns)
        .done(function(resp){
            if (resp['Error:'])
            {
                $('#errors').text(resp['Error:']);
                $('#results').hide();
            }
            })
        .done(widget.render)
        .done(function(){
            var widgetFt = new DNB.Ui.FamilyTree('#results .ft-container').loading();
            DNB.Api.getFamilyTree(duns).done(widgetFt.render);
        })
 
}
 
$(function() {
        var as = DNB.Ui.autosuggest('#companyname');
        as.select = function(co) { renderMain(co.companyId) }
    });
    </script>
</apex:page>

Company Info with Family Tree integrated into Account

<apex:page standardController="Account">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://dnbdirectapps-cdn.s3.amazonaws.com/dnbapi.js">{API_BASE:'/apex/dnbdirect?_uri=:uri&_body=:data'}</script>
    <script type="text/javascript" src="https://dnbdirectapps-cdn.s3.amazonaws.com/components/ui/ui.js"></script>
    <div style="width:800px">
   
        <div class="search_shell">
            <form onSubmit="return false" class="dnbDemo">
                <input type="text" id="companyname" placeholder="Company Name"  class="dnb-ui-theme-light" style="font-size: 17px;height:34px;width:300px" />
                <button id="show_win" type="submit" value="" class="search_btn"><img src="http://dnbdirectapps.com/microapps/assets/images/magnify.png" width="28" height="28" border="0" alt="Search" /></button>
            </form>
        </div>
        <div class="clear"></div>
        <div class="resultSection" id="results"></div>
        <div id="errors"></div>
    </div>
           
<script id="dnb-co-info-ft" type="text/x-jquery-tmpl">
    <div id="tabs_${id}">
        <ul>
            <li style="border-left:none;"><a href="#tabs_${id}_overview">Overview</a></li>
            <li><a href="#tabs_${id}_people">Key People</a></li>
            <li><a href="#tabs_${id}_comp">Competitive</a></li>
            <li><a href="#tabs_${id}_fin">Financials</a></li>
            <li style="border-right:none;"><a href="#tabs_${id}_ft">Family Tree</a></li>
        </ul>
        <div id="tabs_${id}_overview"></div>
        <div id="tabs_${id}_people"></div>
        <div id="tabs_${id}_comp"></div>
        <div id="tabs_${id}_fin"></div>
        <div id="tabs_${id}_ft"><div class="ft-container">xxxx</div></div>
    </div>
</script>
 
    <script type="text/javascript">
 
function renderMain(duns) {
    var widget = new DNB.Ui.CompanyInfo('#results', '#dnb-co-info-ft').loading();
    DNB.Api.getCompany(duns)
        .done(function(resp){
            if (resp['Error:'])
            {
                $('#errors').text(resp['Error:']);
                $('#results').hide();
            }
            })
        .done(widget.render)
        .done(function(){
            var widgetFt = new DNB.Ui.FamilyTree('#results .ft-container').loading();
            DNB.Api.getFamilyTree(duns).done(widgetFt.render);
        })
 
}
 
$(function() {
        var as = DNB.Ui.autosuggest('#companyname');
        as.select = function(co) { renderMain(co.companyId) }
 
        var duns = '{!account.duns_num__c}';
        if (duns){
            $('.search_shell').hide();
            renderMain(duns);
        }
    });
    </script>
</apex:page>

Family Tree Standalone

<apex:page >
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://dnbdirectapps-cdn.s3.amazonaws.com/dnbapi.js">{API_BASE:'/apex/dnbdirect?_uri=:uri&_body=:data'}</script>
    <script type="text/javascript" src="https://dnbdirectapps-cdn.s3.amazonaws.com/components/ui/ui.js"></script>
 
 
    <h1>D&amp;B Direct Family Tree</h1>
    <h2>Enter a DUNS Number Below</h2>
    <div id="dnbform" class="form_shell">
        <form action="" autocomplete="off">
            <input type="text" id="duns" placeholder="DUNS#" value="884114609" class="textinput" />
            <button id="show_win" type="submit" value="" class="search_btn"><img src="http://dnbdirectapps.com/microapps/assets/images/magnify.png" width="28" height="28" border="0" alt="Search" /></button>
        </form>
        <div class="clear"></div>
 
        <div id="results"></div>
    </div>
   
   
    <script type="text/javascript">
    $(function(){
        $('#dnbform').submit(function(event){
            event.preventDefault();
            $('#results').html('<div class="dnb-processing"></div>');
            var duns = $('#duns').val();
 
            var widget = new DNB.Ui.FamilyTree('#results');
            DNB.Api.getFamilyTree(duns).done(widget.render);
        });
    });
    </script>
   
</apex:page>

Untitled

<apex:page standardController="Account">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://dnbdirectapps-cdn.s3.amazonaws.com/dnbapi.js">{API_BASE:'/apex/dnbdirect?_uri=:uri&_body=:data'}</script>
    <script type="text/javascript" src="https://dnbdirectapps-cdn.s3.amazonaws.com/components/ui/ui.js"></script>


    <h1>D&amp;B Direct Family Tree</h1>
    <div id="results"></div>
    
    <script type="text/javascript">
    $(function(){
        var duns = '{!account.duns_num__c}';
        if (duns){
            var widget = new DNB.Ui.FamilyTree('#results').loading();
            DNB.Api.getFamilyTree(duns).done(widget.render);
            }
    });
    </script>
    
</apex:page>