Sightfull in Salesforce

Follow these steps to create a Sightfull page in Salesforce and add it to your desired location.

note

This will require admin permissions or similar to salesforce.

The entire process should take approximately 15 minutes to complete.

Create Sightfull Page

1. Access Salesforce Setup

   • Click the Settings button (Gear icon) on the top right menu
   • Select "Setup"

2. Navigate to Visualforce Pages

   • In the top left "Quick find" textbox, search for "Visualforce"
   • Select "Visualforce Pages"

3. Create a New Visualforce Page

   • Click "New" at the top of the page list
   • Add a name and label
   • Check the box "Available for Lightning Experience ..."

4. Add the Sightfull iFrame Code

   • Insert the following code:

     <apex:page>
       <apex:iframe src="https://app.sightfull.com" scrolling="true" id="theIframe"/>
     </apex:page>
   • Adjust the code as needed, referring to the Apex guide

5. Save and Preview

   • Click "Save"
   • Click on the preview to ensure it works (opens the iframe in full window)
   • Log in to verify functionality

Add the New Page to Desired Location

1. Open Lightning App Builder

   • Search for "Lightning App Builder" in the quick find box

2. Create a New App Page

   • Click "New"
   • Select "App Page"
   • Choose a name and select one region

3. Add Visualforce Component

   • On the left, search for "visualforce"
   • Add a Visualforce component

4. Configure the Component

   • Select the Visualforce component you created earlier
   • Set the desired height (e.g., 900)

5. Finalize

   • Click "Save"
   • Click "Activate"

Embed a Sightfull Dashboard with Dynamic Filter to an Object Page

To embed a Sightfull dashboard with a dynamic filter that corresponds to an object page in Salesforce, such as an Account page, use the following HTML code:

<apex:page standardController="Account">
  <apex:variable var="id" value="{!Account.id}" />
  <apex:variable
    var="dashboardId"
    value="707a04a8-d83e-4599-9946-db319db3802d"
  />
  <apex:variable
    var="embedUrl"
    value="https://app.sightfull.com/dashboard/{!dashboardId}?_embed=widget"
  />
  <apex:variable
    var="embedUrl"
    value="{!embedUrl}&globalFilters=%5B%7B%22l%22:%22$id%22,%22k%22:%22$id%22,%22v%22:%5B%22{!id}%22%5D%7D%5D"
  />
  <apex:iframe
    id="sightfull"
    src="{!embedUrl}"
    scrolling="false"
    width="100%"
    height="860"
  />
</apex:page>

Key Customizations:

• Object Name: Ensure the standardController attribute matches the name of the Salesforce object you want to associate with, e.g., "Account" in the example above.
• Dashboard ID: Replace the dashboardId value (707a04a8-d83e-4599-9946-db319db3802d) with your specific Sightfull dashboard ID, which can be found in the URL when viewing the dashboard in Sightfull.

This example filters the dashboard to display data dynamically related to the Account ID. Adjust the object name and dashboard ID accordingly to use it for other Salesforce objects or different dashboards.

Conclusion

By following these steps, you can successfully create a Sightfull page in Salesforce and add it to your desired location within the Salesforce interface.