Embedding Sisense Dashboards In Salesforce

[intapiuser]

Embedding Sisense content into the applications where end users spend most of their time is one of the best ways to leverage your analytics investment. In this post, we'll go over embedding a Sisense dashboard in Salesforce, using Salesforce objects to filter the dashboard to the right context.

1. Create a new VisualForce page

• From the Setup menu, select the Developer Console option
• The Developer Console will open, select File -> New -> Visualforce Page

2. Add an iFrame to embed the Sisense dashboard

• Add a standardController to specify the desired page where the Sisense dashboard will be added. In this example, we'll use the Account record page:

<apex:page standardController="Account"> 
    <apex:iframe src="https://<Sisense Server URL>/app/main#/dashboards/<dashboardID>?embed=true&h=f&t=f&r=f&l=f" width="100%" height="1024px" scrolling="true" id="sisenseIframe"/> 
</apex:page>

• Use the embed=true parameter to remove the headers, and also pass which page components you want displayed (toolbars, filters, navigation, etcetera). Documentation.

3. Make it dynamic

• Salesforce allows you to pass object values down to the embedded content. In this case, we will pass the Account ID to filter the dashboard to the account record. NOTE: The field you are passing as filter needs to exist in your Sisense data model.
• First, filter the dashboard by the column that contains the Salesforce object values, and get the encoded filter JAQL using the following post: passing dashboard filters by URL parameters.
• Find the part of the encoded JAQL that contains the dimensional value (in this example the Account ID), and replace it with the Salesforce placeholder: {!Account.Id}:

filter=%5B%7B%22jaql%22%3A%7B%22table%22%3A%22Customers%22%2C%22column%22%3A%22SFDCAccountID%22%2C%22dim%22%3A%22%5BCustomers.SFDCAccountID%5D%22%2C%22datatype%22%3A%22text%22%2C%22merged%22%3Atrue%2C%22title%22%3A%22SFDCAccountID%22%2C%22filter%22%3A%7B%22explicit%22%3Atrue%2C%22multiSelection%22%3Atrue%2C%22members%22%3A%5B%22{!Account.Id}%22%5D%7D%2C%22collapsed%22%3Afalse%2C%22datasource%22%3A%7B%22title%22%3A%22MW%22%2C%22fullname%22%3A%22LocalHost%2FMW%22%2C%22id%22%3A%22aLOCALHOST_aMW%22%2C%22address%22%3A%22LocalHost%22%2C%22database%22%3A%22aMW%22%2C%22lastBuildTime%22%3A%222020-09-30T14%3A53%3A50.547Z%22%7D%7D%2C%22%24%24events%22%3A%7B%7D%2C%22instanceid%22%3A%22DC3F2-74F4-1C%22%2C%22%24filter%22%3A%7B%7D%2C%22%24permissionsService%22%3A%7B%22sourceToGlobalObjects%22%3A%7B%22dashboard%22%3A%22prism.activeDashboard.userAuth%22%2C%22widget%22%3A%22prism.activeWidget.dashboard.userAuth%22%7D%7D%2C%22isCascading%22%3Afalse%2C%22%24%24guid%22%3A%22B7684-3347-E875-9BBB%22%2C%22%24%24hashKey%22%3A%22object%3A2661%22%7D%5D

• Append it to the URL in the Visualforce page by adding &filter=<encoded jaql>
• Save the Visualforce page

4. Make the Visualforce Page Available

• In Salesforce, under Setup, search for Visualforce pages and edit the newly created page
• Check the "Available for Lighting Experience, Lighting Communities, and the mobile app" check box.
• Save the page

5. Add the Visualforce Page

• In Salesforce, under Setup, search for the page where the Sisense dashboard will be displayed. In this example, it's the Account Record Page.
• Click the Edit button

• The page layout will be opened. Choose Visualforce from the left side bar and drag it to the desired location in the layout.
• Select the new component, the settings will open in the right side. Select the newly created Visualforce page, add a label, and enter the desired height (in pixels) for the component. 

• Save the page layout. Now the page will contain the Sisense dashboard, filtered down by the Salesforce object:

Other Considerations:

• SSO must be set up for a seamless experience, otherwise users may get the Sisense login page when they don't have an active session in Sisense.
• Visualforce lets you use CSS and Javascript to customize height, width and other styling aspects of the iFrame.
• Make sure to line up the height of the iFrame with the height of the Lighting component containing the Visualforce page in the layout, so that users don't get multiple scrollbars.