top of page
Search

Wait, what? Displaying Analytics Dashboards outside Salesforce?

Writer: goldenstateservicesj
goldenstateservicesj
Aug 20, 2019
3 min read

Yes, you heard it right! You can host your beautiful Analytics Dashboards outside Salesforce without much fuss(okay, maybe a little)!

With the wave:waveDashboard base Aura component and Lightning Out, we can quite easily host our Analytics dashboards outside Salesforce.

How do we make this happen?

Let’s try keeping it very simple. Broadly classified, we can have two divisions to start with; Inside Salesforce & Outside Salesforce.

Inside Salesforce: First we gotta create a Connected App for authentication set up with the external app. In addition, we will have to create an Aura component containing the dashboard and a Lightning app containing the component to host it outside of Salesforce.

AnalyticsDashboardCMP.cmp

<aura:component access="global" > <wave:waveDashboard dashboardId="PUT_ID_OF_YOUR_ANALYTICS_DASHBOARD_HERE" height="650" /></aura:component>

EADashboardApp.app

<aura:application access="Global" extends="ltng:outApp" > <aura:dependency resource="c:AnalyticsDashboardCMP" type="COMPONENT"/></aura:application>

That’s pretty much it on the Salesforce end.

Outside Salesforce: To begin with, I created a very simple app and deployed it on Heroku. An app?? I know, I know, you must be thinking how will you create this “app” now. Well the app contains nothing but an HTML page with some JavaScript, as simple as that. In the page, we simply need to do an authentication with Salesforce and then use the Lightning Out to create the Lightning App and the Aura component.

Heroku App components: A php file(with just one line of code) and an HTML file.

Index.php

<?php header( 'Location: /Dashboard.html'); ?>

Dashboard.html

<!DOCTYPE html><html> <body> <div class="headerContainer"> <div style="background-color:white;margin: 1rem;padding: 0.5rem;width:10%" id="heroku"> <div style="float:left;width: 24%;"> <svg class="slds-align_absolute-center" width="27" style="fill: #9E7CC1;padding-top: 4px;margin-left: 0px;" height="30" viewBox="0 0 27 30" xmlns="http://www.w3.org/2000/svg"> <title>heroku-logo</title> <path d="M3 0C1.13 0 0 1.11 0 2.903v24.194C0 28.883 1.13 30 3 30h21c1.863 0 3-1.11 3-2.903V2.903C26.994 1.11 25.863 0 24 0H3zm21.042 2c.508.006.958.448.958.929V27.07c0 .487-.45.929-.958.929H2.958C2.45 28 2 27.558 2 27.071V2.93c0-.488.45-.93.958-.93h21.084zM20 25h-2.781v-8.506c0-.774-.237-1.048-.468-1.208-1.396-.959-5.414-.042-7.834.916L7 17.012 7.006 5h2.816v7.917a20.99 20.99 0 0 1 1.882-.482c2.988-.643 5.184-.47 6.616.505.787.536 1.68 1.59 1.68 3.554V25zm-6-15h3.293A16.109 16.109 0 0 0 20 5h-3.287c-.49 1.188-1.385 3.188-2.713 5zM7 25v-7l3 3.5L7 25z" fill="%239E7CC1" fill-rule="evenodd"/> </svg> </div> <div style="float:right;width: 76%;"> <span class="herokuPreTextLogo">Hosted on</span> <br/> <strong class="herokuTextLogo"> H E R O K U</strong> </div> </div> <div class="slds-align_absolute-center" style="margin-left: 25%;"> <span class="header"> <img style="padding-right: 1rem;" height="100%" width="65px" src="https://lh3.googleusercontent.com/KPYpOWP0sUMHto2MENvvPErFOxk-ZRObA8Nzd4wnaDBRQGtGSjiAqHpXY0ASoLPMMj8"/> Analytics Studio </span> </div> </div> <div style="margin-top:2rem" class="slds-align_absolute-center"> <!-- Use Lightning Out to create the Dashboard app and component --> <button onclick="initializeApp();" class="slds-button">Run Dashboard</button> </div> <div id="spinner" style="display:none" class="spinner-border slds-align_absolute-center"></div> <!-- Dashboard Embed Container --> <div id="dashboard"></div> </body> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <style> .herokuPreTextLogo{ font-size: 15px; color: #9E7CC1; font-family: salesforce-sans,"Helvetica Neue",helvetica,arial,sans-serif; } .herokuTextLogo{ font-size: 15px; font-weight: 800; color: #9E7CC1; font-family: salesforce-sans,"Helvetica Neue",helvetica,arial,sans-serif; } .heroku{ background: url('data:image/svg+xml;utf8, <svg width="27" height="30" viewBox="0 0 27 30" xmlns="http://www.w3.org/2000/svg"> <title>heroku-logo</title> <path d="M3 0C1.13 0 0 1.11 0 2.903v24.194C0 28.883 1.13 30 3 30h21c1.863 0 3-1.11 3-2.903V2.903C26.994 1.11 25.863 0 24 0H3zm21.042 2c.508.006.958.448.958.929V27.07c0 .487-.45.929-.958.929H2.958C2.45 28 2 27.558 2 27.071V2.93c0-.488.45-.93.958-.93h21.084zM20 25h-2.781v-8.506c0-.774-.237-1.048-.468-1.208-1.396-.959-5.414-.042-7.834.916L7 17.012 7.006 5h2.816v7.917a20.99 20.99 0 0 1 1.882-.482c2.988-.643 5.184-.47 6.616.505.787.536 1.68 1.59 1.68 3.554V25zm-6-15h3.293A16.109 16.109 0 0 0 20 5h-3.287c-.49 1.188-1.385 3.188-2.713 5zM7 25v-7l3 3.5L7 25z" fill="%239E7CC1" fill-rule="evenodd"/> </svg> '); background-repeat: no-repeat; background-size: contain; width: 40px; height: 35px; display: inline-block; position: relative; opacity: 1; } .headerContainer{ width: 100%; top: 0; left: 0; z-index: 100; position: relative; display: flex; background: #16325c; color: #fff; } .header{ padding:1rem; font-family: 'Salesforce Sans',Arial,sans-serif; line-height: 1.5; display: flex; align-content: center; align-items: stretch; white-space: nowrap; position: relative; font-size: 35px; transition: background-color .25s cubic-bezier(0.39, 0.575, 0.565, 1); } .slds-align_absolute-center { display: flex; justify-content: center; align-content: center; align-items: center; margin: auto; } .slds-button{ padding: 1rem; font-family: 'Salesforce Sans',Arial,sans-serif; font-size: 30px; text-align: center; vertical-align: middle; border: 1px solid #dddbda; transition: border .15s linear; background-color: #0070d2; border-color: #0070d2; color: #fff; position: relative; display: inline-block; background-clip: border-box; border-radius: .25rem; } </style> <script src="https://YOUR_DOMAIN_URL.lightning.force.com/lightning/lightning.out.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> var token; var clientID='Put Your Connected App Client Id'; var clientSecret = 'Put Your Connected App Client Secret'; var OAuthURL='https://login.salesforce.com/services/oauth2/authorize?client_id='+clientID+'&client_secret='+clientSecret+'&response_type=token&redirect_uri=https://sf-ai-dashboards-app.herokuapp.com/Dashboard.html' $(document).ready(function(){ var decodedUrl= decodeURIComponent(window.location.href); var tokenLiteral='access_token='; if(decodedUrl.includes(tokenLiteral)){ var start = decodedUrl.indexOf(tokenLiteral) + tokenLiteral.length; var stringEnd = decodedUrl.indexOf('&'); token = decodedUrl.substring(start,stringEnd); console.log(token); } else alert('Starting Authentication'); if(token) alert('Authentication Complete! :)');//('We got the token! :D *hopefully the right one!*'); else window.location = OAuthURL; }); function initializeApp(){ document.getElementById("spinner").style.display = "block"; var url='Put_Your_Org_Custom_Domain_URL'; var appName='c:EADashboardApp'; $Lightning.use(appName, function() { document.getElementById("spinner").style.display = "none"; createComponent(); }, url, token); } function createComponent(){ $Lightning.createComponent( "c:AnalyticsDashboardCMP", { accessToken: token }, "dashboard" ); } </script> </head></html>

Changes you need to make in the code:

  • While importing lightning out JS script, make sure to use your org’s domain URL.

  • Use the Client Id and Secret generated by your Connected App.

  • Make sure to use the exact redirect URI you supplied to your Connected App.

  • In ‘initializeApp’ method, use your org’s domain URL.

Note: Make sure to add the URL where your app is hosted to the Analytics Whitelist, CORS & CSP Trusted Sites in Salesforce Setup.

Let’s see it action!

Resources:

Thank you for being an awesome reader! Subscribe to this blog for receiving all the latest updates straight to your inbox. 🙂

 
 
 

Comments

bottom of page