This website uses Cookies. Click Accept to agree to our website's cookie use as described in our Cookie Policy. Click Preferences to customize your cookie settings.
Putting the right insights and actions side by side within workflows is the key to boosting analytics adoption and productivity. It also makes your and your colleagues’ lives much simpler. If you or your team/company uses Salesforce, then a lightning web component (LWC) can be a great way to make valuable insights accessible while you work in Salesforce, eliminating the need to jump into a separate dashboard.
Exploring how to develop and deploy a simple LWC can seem like a daunting prospect when digging into the documentation and trying to make things work your way. Like every new dev environment, there is a learning curve, so a good idea is to start with simple projects and move on to bigger and more advanced ones down the road.
In this tutorial, we’ll embed a Sisense dashboard as a lightning webforce component into a Salesforce object (account, opportunity, etc.) page. The Sisense dashboard lives in an iFrame and is invoked through a URL. We’ll also see how we can dynamically pass on the object ID to the dashboard as a parameter, in order to show only metrics for the specific object being viewed.
Infusing insights into Salesforce: Getting started
Salesforce gives users the ability to create new components and add them to our deployment, so salespeople access them within Salesforce pages instead of opening a separate program. These LWC components can easily spiral out of control in scope; we’ll keep this one simple so that we can learn and deliver!
Embedding Sisense into your Salesforce record screen allows you to infuse the right insights in the right place without leaving your workflow. Here’s a quick video explaining a bit more about it:
Before you can start building, you need to take the following actions to lay the groundwork:
- Sign up for Salesforce Trailhead — Trailhead is a Salesforce dev learning environment; you’ll find lots of useful training exercises and examples there
- Start a Trailhead Playground like this — a Playground is a Salesforce instance that is free and easy to deploy your new code on
- Download and install the Salesforce CLI from here
- Download and install Visual Studio Code from here
- Install the Salesforce VSCode extension pack by searching “Salesforce Extension Pack” in the extensions page. Download the PACK and not individual components!
After running through these steps, we should be able to create a new project following these steps:
- In Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS).
- Type SFDX.
- Select SFDX: Create Lightning Web Component. Don’t use SFDX: Create Lightning Component. (This creates an Aura component.)
- Name your new component.
- Keep it in the default path when created.
Using meta.xml to add component settings
In your meta.xml file, you’ll need to add the settings for the component, including some names and targets. Targets will define the pages and areas of Salesforce where this component will be available:
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>For example, adding targets of “App page,” “Record page,” and “Home page” will allow users with edit-access to these pages’ layout and components to add this new component to them.
Using target config to specify URLs and other settings
Adding target config gives you the ability to edit the right side panel of the element, which is the user accessible configuration. This is where we’ll specify which URL to use and some other settings like taking the “recordId” into account or not, etc.
Here’s a brief example:
<targetConfigs>
<targetConfig targets="lightning__AppPage, lightning__HomePage">
<property name="DashboardURL" type="String" required="true" label="Dashboard URL" description="Automatically bind the DashboardURL to the component variable" default="" />
<property name="componentHeight" type="Integer" label="Component Height" description="The component height" default="500" />
<property name="isShowFiltersBar" type="Boolean" label="Show Sisense's Filters Bar" description="Display Sisense's native filter bar" default="false" />
</targetConfig>
<targetConfig targets="lightning__RecordPage">
<property name="DashboardURL" type="String" required="true" label="Dashboard URL" description="Automatically bind the DashboardURL to the component variable" default="" />
<property name="componentHeight" type="Integer" label="Component Height" description="The component height" default="500" />
<property name="isShowFiltersBar" type="Boolean" label="Show Sisense's Filters Bar" description="Display Sisense's native filter bar" default="false" />
<property name="isFilterOnRecordID" type="Boolean" label="Filter Sisense on current Salesforce Record ID" description="Automatically Apply Salesforce record ID to Sisnese's dashboard" default="false" />
</targetConfig>
</targetConfigs>As you can see, each target can have its own configuration, which means that we can allow for some settings and configurations in a certain page (like a Record’s page), but not have them take effect universally.
Using .html
Since we’re keeping this how-to simple, we’ll just go ahead and add the component (in this case an iFrame) to the template. This would be more involved if we wanted to create a more dynamic page by adding and removing elements, etc. (Salesforce does not allow regular DOM access; you can read more about it here.)
<template>
<iframe height={componentHeight} width="100%" frameborder="0" src={embedString}></iframe>
</template>The component height and src will be taken from the user settings we configured in the xml page. We will handle these now with our .js file.
Creating logic in .js
In the .js file, we’ll create the logic we need, but first we will need to grab some data.
- Add API to the LWC import
- Call all of the objects we need
- recordId
- objectApiName
- DashboardURL
- componentHeight
- isShowFiltersBar
- isFilterOnRecordID
(Note: Some of these objects are native to Salesforce, like recordId and objectApiName.)
With these objects, we can determine where we are on the app and pass the filters we would need to the dashboard we are using. The rest of the objects the API grabs are actually our configuration objects: user settings with the dash URL, etc. Every time there’s a change in this configuration, the component will be refreshed and rendered again.
connectedCallback will store all of our logic. Using the dashboard URL and settings, we will determine how to generate the embed string to use in the iFrame, generating the filter using the recordId and object API name.
import { LightningElement, api } from 'lwc';
export default class SisenseInfused extends LightningElement {
@api recordId;
@api objectApiName;
@api DashboardURL;
@api componentHeight = 300;
@api isShowFiltersBar = false;
@api isFilterOnRecordID = false;
connectedCallback() {
let iframeStringToUse = this.DashboardURL + '?embed=true&r=' + this.isShowFiltersBar;
if (this.isFilterOnRecordID && this.objectApiName) {
let filter = {
"dim": "[" + this.objectApiName + ".Id]",
"merged": true,
"filter": {
"explicit": true,
"multiSelection": true,
"members": [
this.recordId
]
},
"collapsed": true,
"title": "Id",
}
// Filters need to be in an array
let filtersArray = [{
jaql: filter
}];
// Serialize the filters array into a string
let filterString = JSON.stringify(filtersArray);
// Encode the string for use in a URI
let uriEncoded = encodeURIComponent(filterString);
iframeStringToUse += '&filter=' + uriEncoded;
}
this.embedString = iframeStringToUse;
}
}After adding this code to your files, you can use the Salesforce CLI again to authenticate into your playground environment and deploy the new component. When starting an edit page, you should be able to see your new component under “Custom,” like so:
Infusing insights into workflows: A new frontier
These are the basics to creating a LWC! You can deploy yours directly into your Salesforce instance to put the right insights in the right place to help you make better, data-driven decisions more easily. Or go ahead and publish this to the AppExchange store (which will require you to take more steps such as becoming a partner and going through a security review, etc.) to allow other users to deploy it within their own workflows. (Learn more about that here.)
This is just the beginning of your Salesforce LWC journey! Infusing analytics into workflows is a rapidly growing field, changing the way people work. Build boldly and see where else you can combine the right insights with the right actions in the right spot.
