Embedding Looker Content in Salesforce

[LookerExperts]

Looker will not be updating this content, nor guarantees that everything is up-to-date. 

In order to embed content in Salesforce, you will need to have Visualforce development permissions and the ability to edit pages and objects in SFDC.

This post covers an advanced topic that assumes a familiarity with embedding Looker content.

Embedding dashboards and Looks in the applications and platforms where your users spend their time is one of the most powerful ways to leverage Looker. This Help Center article expands upon the concepts addressed in How to Quickly Embed Looker in the Tools and Apps You Use, to provide guidance on embedding content within Salesforce.

Adding a New Visualforce Page

The examples below use the private embed method, which requires each user to be signed into Looker to be able to view content. Alternatively, you can make content available to all users regardless of Looker access by using the public embed method for Looks.

The first step to embedding content in Salesforce is to create a new Visualforce page. A Visualforce page is where you create an iframe for embedding Looker content, as well as include any desired styling.

Content is embedded in Salesforce with Apex, an object-oriented programming language. Apex, in conjunction with JavaScript and HTML, allows you to customize how iframes appear and how they interact with the web page or browser in which they exist. Use the examples below as guides, adding JavaScript or HTML styling as needed.

First, select the Developer Console option from the downward-facing arrow drop-down menu in the upper right-hand corner:

Next, select File, New, and Visualforce Page from the Developer Console menu bar. This will open a blank Visualforce page editor in which you will add the iframe and styling specifications.

Embedding a Dashboard on a Visualforce Page

Before adding an iframe to the new Visualforce page, you will need to know where the content will be embedded within Salesforce, as there are some restrictors that may need to be included depending on the desired location.

To add a dashboard to a default Salesforce page, a standardController restrictor will need to be added to specify the desired page. The example below indicates the desired location as the Accounts page. If you would like to embed content in a default page other than Accounts, such as Contacts, replace Account in the standardController page restrictor below with the name of the desired page:

</p> <apex:page standardController="Account">

  <apex:iframe src="https://metanew.looker.com/embed/dashboards/456" width="100%" scrolling="true" id="theIframe"/>

</apex:page>

Specifying a page with standardController makes content available to existing Salesforce pages. Without a standardController restriction, content will only be available to embed on pages that are not default Salesforce objects, such as added pages, or the Home page.

If you do not need to include Looker content in default Salesforce pages, omit the standardController restrictor:

<apex:page sidebar="false">

  <apex:iframe src="https://metanew.looker.com/embed/dashboards/456" id="theIframe"/>

  <script>document.getElementById('theFrame').height = window.innerHeight - 220;</script>

<apex:page>

The example above includes more examples of JavaScript and HTML styling to manipulate the page. You can add or omit styling specifications as needed.

 

Adding a Dynamic Dashboard

A dashboard can also be filtered by a field on a Salesforce page, if the field is mappable to your data in Looker:

<apex:page standardController="Account">

  <apex:iframe src="https://metanew.looker.com/embed/dashboards/456?salesforce_userid={!Account.Id}" width="100%" scrolling="true" id="theIframe"/>

</apex:page>

The example above passes a Salesforce account ID, captured with the variable {!Account.Id}, into a Looker dashboard filter for salesforce_userid, an equivalent field in this example Looker instance.

Passing fields between Salesforce and Looker is useful in cases that may require limiting embedded data by an individual page component (for example, when a user clicks the name of a client to view their individual record). To pass a different Salesforce field as a filter value, place the name of the field within the {! } delimiter.

Now that we have a Visualforce page for the embedded content, we can add the Visualforce page to existing pages, or create a new custom tab.

Adding Dashboards to Pages

Embedding dashboards into Salesforce pages is a great way to let users consume Looker content from the Salesforce pages they use most frequently. To embed content into pages, navigate to the Salesforce page you want to add Looker content to and select Edit Layout:

In the Page Layout menu bar at the top of the page (labeled System Admin Account Layout in the example below), you can select objects such as a Blank Space or Section to drag and drop into the page layout below. Visualforce pages can also be dragged and dropped into the page layout.

In the left side of the Page Layout menu, scroll and click the Visualforce Pages option. Search for the name of the desired Visualforce page (containing the embedded dashboard):

Next, drag and drop the Visualforce page object into the desired part of the page. In the example below, a new section was added for displaying the content:

Click Save to save the changes. Make sure to view the page to make sure the content appears as desired:

For additional information about editing Salesforce page layouts, see Salesforce's page layout documentation.

Adding a Dashboard to a New Custom Page

To embed content on a new Salesforce page, the Visualforce page cannot have a standardController restrictor. Visualforce pages with a standardController will only load content on the specified page (such as the Accounts page).

In addition to embedding content on an existing page, you can choose to embed your content on its own standalone page by creating a new custom page. This is useful in cases where users need to consume Looker content that may not be relevant to an existing page.

To create a new page, select Setup from the upper right-hand corner drop-down menu:

In the left-side menu, navigate to the Build section and select Create, then Tabs:

Scroll down to Visualforce Tabs in the main body of the page, and click New:

Select the desired Visualforce page from the Visualforce Page drop-down, and fill in the remaining fields as necessary:

Complete the remaining steps (selecting the appropriate user profiles and custom apps for which the new custom page will be available), and Save.

Double-check that the page and dashboard look as expected:

Now your content is ready to go in Salesforce!

[charlottemalt]

This doesn’t seem to work anymore. I believe due to x-frame options on Chrome, but any other workarounds to have Looker visible within Salesforce?

[Andres3]

This doesn’t seem to work anymore. I believe due to x-frame options on Chrome, but any other workarounds to have Looker visible within Salesforce?

I had the same issue but fixed it by adding ‘/embed/’ in the middle of the url like in the example described above.

[charlottemalt]

This doesn’t seem to work anymore. I believe due to x-frame options on Chrome, but any other workarounds to have Looker visible within Salesforce?

I had the same issue but fixed it by adding ‘/embed/’ in the middle of the url like in the example described above.

Thank you so much Andres!

[charlottemalt]

Do you know if there’s a way to make the iframe longer (If I make the VF larger, the Looker dashboard doesn’t fill it in)?