Looker Connect Training

Help Center

Documentation

Community

Cloud Certifications

Embedding Looks and Dashboards into Salesforce (SFDC)

J
Userlevel 3

Many data savvy companies have teams that live in tools like Salesforce. Some of our customers embed Looker in their Salesforce implementation so people can get a quick view of account activity and lead information from their internal database.



Here is an example of how we embed Looker into Salesforce (at Looker):





Embedding Looker into Salesforce requires that each user have Looker access. Data is embedded as a parameterized iFrame, not passed to the Salesforce platform.



Here are some quick instructions to get you started:



Prerequisites:





  • Looker!


  • Salesforce administrator account


  • Mappable relationship (joinable key) between a SFDC record and an in-database record




Step 1:



Create a VisualForce page (Setup - Develop - Pages). Depending on whether you want to insert a dashboard or a single look/query, the code will look slightly different. You should play with the width and height to appropriately fit the element onto the page.



Dashboard Example



From a dashboard or explore URL, you will simply insert a wildcard that takes advantage of a Salesforce variable to filter a query. Our first example inserts a page’s Salesforce Account ID, {!Account.Id}, is inserted into a salesforce_userid filter for a Looker dashboard. Note that you will need to prepend /embed/ to the typical dashboard URL.



<apex:page standardController="Account">


<apex:iframe src="https://example.looker.com/embed/dashboards/123?salesforce_userid={!Account.Id}"


  width="900px" height="600px" id="account_app_usage" scrolling="true"/>    


</apex:page>


Single Query / Look Example



We can use that same technique to insert the Account ID into a single query. In this case, replace /explore/ with /embed/query/ for the typical query URL.



<apex:page standardController="Account"> 


<apex:iframe src="https://example.looker.com/embed/query/pinger/daily_usage?fields=daily_usage.usage_week,daily_usage.approximate_usage_in_minutes_non_looker&f%5Blicense_users.user_id%5D=NOT+NULL&f%5Blicense_users.user_is_looker%5D=No&sorts=daily_usage.usage_week&limit=500&column_limit=50&vis=%7B%22type%22:%22looker_column%22,%22show_null_labels%22:false,%22stacking%22:%22normal%22,%22x_axis_scale%22:%22auto%22,%22y_axis_labels%22:%5B%22Approximate+Use+in+Minutes%22%5D%7D&filter_config=%7B%22license_users.user_id%22:%5B%7B%22type%22:%22!null%22,%22values%22:%5B%7B%7D,%7B%7D%5D,%22id%22:0%7D%5D,%22license_users.user_is_looker%22:%5B%7B%22type%22:%22is%22,%22values%22:%5B%7B%22constant%22:%22No%22%7D,%7B%7D%5D,%22id%22:0%7D%5D,%22client.salesforce_account_id%22:%5B%7B%22type%22:%22%3D%22,%22values%22:%5B%7B%22constant%22:%22{!Account.Id}%22%7D,%7B%7D%5D,%22id%22:0%7D%5D%7D&show=vis,fields&title=Client+Looker+Use&f%5Bclient.salesforce_account_id%5D=%22{!Account.Id}%22&run=1" width="100%" scrolling="true" id="account_app_usage"/>


</apex:page>


Step 2:



After creating your data frame, add the corresponding VisualForce component to the appropriate page layout (e.g. Setup - Account - Page layouts).



Step 3:



Save and test your changes.



Edit: Thanks to @mschiff and the team at Heroku/Salesforce for doing this and showing me how to do it at Looker!

13 replies

M

For those that haven’t created a Visualforce page before, there are a few details to remember:




  • Security: you have to make the VisualForce page available to the

    profiles that will view them. You do that by going to Develop ->

    Pages -> [Click Security on the Page you want to edit]. You will

    then see Available Profiles on the left and Enabled Profiles on the

    Right. Simply move over the Profiles that should have access and

    Save.




  • Adding the Page to the Layout: You need to do that manually for each

    page layout that will use the page. You do that by going to Customize > [Object] -> Page Layouts -> [Edit a page Layout]. At the top of the layout edit you will see where you can add different “Fields”. Choose VisualForce Pages and the page you created should show up there.




  • Performance: Make sure the look you are embedding is snappy. Otherwise it may cause the entire page to load/refresh slowly. Sometimes it does, sometimes not…doesn’t seem to be a reliable way of figuring that part out.



F

In our case we embedded Looker with a powerful tool called Skuidify that allows you to change the Salesforce interface and turn it into a meaningful set of fields for your SFDC users.

For example, our clients purchase jobs postings.

Thanks to this, our Customer success team can now see where the candidates who applied for this job, for that specific period, came from. Which allows us to check into those sources if everything is okay.



Awesome feature!

R

Can you please help me understand how are you handling authentication. Because without authentication dashboard or looks will not be available.

sam
Rank
Userlevel 5
Badge

Hi there @rinkudaxini - there are actually three methods of embedding dashboards, each with a different method of authentication. You can read more about them here.


In this example, we’re using option 1, private embedded dashboards. This means that when a user goes to Salesforce and sees the Looker iframe, they will only see results there if they are logged into Looker. Otherwise, they will see the Looker login page.

B

Hey there is an additional quotation mark that needs to be deleted

<apex:iframe src="https://example.looker.com/embed/dashboards/123?salesforce_userid="{!Account.Id}"


Just after the ‘salesforce_userid=’


But got it working after this - thanks!

S

Can I integrate looker as a separate tab in salesforce?

will.adams
Rank
Userlevel 3

Hey @sebastian, yeah this should be doable, the crux of it is getting an iframe. Anywhere you can put an iframe, you can hook it up to a Look or Dashboard. Most of the Looker-side docs are linked above, so I’ll include this link, which is a Salesforce-side doc about creating custom tabs.

S

The integration is crushingly slow. Any advice on getting the iframes to load faster?


We’ve got about a 10-second wait time for the iframe to connect with looker and another 10 for looker to load the graph.

S

I got this resolved, I moved it from separate looks into one shared dashboard embed. Thanks!

will.adams
Rank
Userlevel 3

Glad to hear you got it going! That makes sense, If they’re all in the dashboard, they can all share a cache, as opposed to having some of them cached and some not. Let us know if anything else pops up, we’ll be happy to troubleshoot 🙂

Brian_Donaldson
Userlevel 1

Is anyone using Drill Overlays in the SFDC VF page? I’ve added the “see_drill_overlay” permission to the embedded URL, yet it’s still not possible to click on the measure value and drill down to the details.

izzy
Userlevel 7
Badge +1

Hey @Brian_Donaldson,


Is this an SSO embed use case, or is it just a private embed using the /embed url? If the latter, then just adding see_drill_overlay to the URL won’t automatically grant that permission-- You’ll have to grant it to the user in the Admin > Users panel.


If this is a script-generated embed URL, could you provide an example of the URL generated and your script? Happy to help decode it and figure out how to get that working-- You can visit help.looker.com and we can go back and forth on it which might be more efficient than the comments section here!


Best,

Izzy

chris.seymour
Rank
Userlevel 3

For those who want to use SSO embed in Salesforce, you can use Salesforce Apex to write the script to generate your embed URLs. You can retrieve the current Salesforce user’s email address, then use that to create a unique external_user_id from that address and specify permissions, models, user attributes, etc. accordingly. Here is an example script: https://github.com/looker/looker_embed_sso_examples/pull/3/files

Reply


Terms of Service