One request we regularly get from clients is to build out reporting dashboards — and to do that is a complex process. By sourcing multiple objects and metrics, we have to choose to build custom or use the out-of-the-box functionality of Einstein Analytics.
While there are tradeoffs for each, we’re going to explore how you can build your own analytics-driven custom community that is powered by Einstein Analytics.
Technologies
Salesforce has a number of technologies that allow you to build a community. While we’re primarily going to be focused on Einstein Analytics, I think it is important to understand the other options available to you and how they can work together.
Salesforce Community Cloud is a quick and easy way to build a portal/web application with a custom domain. You could have internal employees or customers logging into this portal for a specific use. In this blog, we have leveraged community cloud for building an independent portal where internal users will log in and see analytics related to Sales.
Lightning Community Builder gives you the power to build a community with ease using the Lightning framework. You can leverage standard components built by Salesforce or custom components built by you, accessible in the CUSTOM COMPONENTS section. For this blog, we’ll show you how to use custom-built Lightning Components to provide a unique theme for our community. We start with a Custom Theme Layout for each community page. Each of these will serve as the ultimate parent branching out to several Lightning Components for that particular page.
Einstein Analytics (previously Wave Analytics) overhauls many of the capabilities of Salesforce Dashboards. Where you were once limited to surfacing 4 measures, this number is greatly increased, and you can use up to 5 datasets. Einstein Analytics also allows you to access the datasets using SAQL (Salesforce Analytics Query Language). This helps in transforming the datasets and create usable buckets before we generate Dashboards. An Einstein Analytics Org comes with a built-in data transformation app, Data Manager, and an app for designing dashboards and widgets called Analytics Studio.
Using Data Manager, we have defined a Flow from the Dataflow & Recipes tab on the left. Once a flow for each dataset is defined, we run the workflow. This populates data for widgets to use.
Now, we switch over to Analytics Studio. We created multiple dashboards, for each of the Sales metrics, all grouped by an App. To build each widget, you can use either Wave UI or custom SAQL queries. These SAQL queries allow us to perform certain transformations before the widget can visualize it. This gives us extra power to create buckets of transformed data stored in variables, which then again can be combined for dashboards. An example of this process is as shown in the screenshot below.
Build Process
Now that you have an idea of all the technologies involved, we’ll show you how to put it all together.
1. Define a Custom Theme Layout: It’s very important to implement forceCommunity:themeLayout interface. In this layout, you could also define an area for child components to be dropped. You could define that as the newBody attribute shown below and place {!v.newBody} anywhere you would like to create the dropping zone.
<aura:component description="LeaderBoardThemeLayout" implements="forceCommunity:themeLayout" access="global"> <!-- attributes --> <aura:attribute name="newBody" type="Aura.Component[]" required="false" /> <aura:attribute type="String" name="pictureSrc" default="" />
To use the newly created theme layout, click on the gear icon next to the Theme Layout Component of the page you would like to change and choose the Custom Theme Layout you just created.
2. Once you have the Layout, let’s create a Lightning Component for building a Wave (Einstein Analytics) dashboard widget dynamically. I have defined an attribute, dashboardName, that would get passed into this component upon creation. Using this variable, we will load the respective widget in the {!v.body} section of the component. This component can be reused to add as many components onto the community page as you like.
<aura:component description="WaveContainer"
implements="forceCommunity:availableForAllPageTypes"
access="global">
<!-- attributes -->
<aura:attribute name="dashboadName"
type="String"
access="GLOBAL"
default="SC_Dashboard_3"/>
<!-- handlers -->
<aura:handler name="init"
value="{!this}"
action="{!c.doInit}"/>
<aura:handler event="wave:selectionChanged"
action="{!c.handleSelectionChanged}"/>
<img src="{!$Resource.PanoramaResources}"/>
<!-- body -->
{!v.body}
</aura:component>
3. Once we have the above markup completed and saved, let’s write our doInit function. As stated above, we only want to display the dashboard by finding it using the passed in name. The below function shows how we can achieve that using dashboardName attribute. Einstein gives us the power to pass in filters as well; however, I have commented that part in the below code. The only part we don’t get to do via code is to build a wave widget from scratch. A widget always has to be defined in the Analytics Studio for this to work.
doInit: function(component, event, helper) {
var config = {
"developerName": component.get("v.dashboadName"),
"showHeader": false,
"showTitle": false,
"height": 400
};
$A.createComponent("wave:waveDashboard", config,
function(dashboard, status, err) {
if (status === "SUCCESS") {
dashboard.set("v.rendered", true);
dashboard.set("v.showHeader", false);
//dashboard.set("v.filter", "{'datasets':{'SalesCapacity_Report':
//[{'fields':['Segment__c'], 'filter':{'operator': 'matches',
//'values':['B2C']}}]}}");
component.set("v.body", dashboard);
} else if (status === "INCOMPLETE") {
console.log("No response from server or client is offline.")
} else if (status === "ERROR") {
console.log("Error: " + err);
}
}
);
}
4. In situations where you would like to perform a particular action when users click on a graph coordinate, Einstein provides a SelectionChanged event to listen to, which is one of the four events in Analytics Web SDK. In this example, we will use the SelectionChanged event to listen to a click event on any dashboard widget coordinates. So, the below function fires when the click is detected, and it will print the selected record in Developer Console of your browser. In the picture on (2), we have defined the handler for listening to the wave:selectionChanged event. For more information on wave events, please refer here.
handleSelectionChanged: function(component, event, helper) {
var params = event.getParams();
var payload = params.payload;
if (payload) {
var data = payload.data;
data.forEach(function(obj) {
console.log(obj)
});
}
}
5. Complete the build with the right dashboards and additional components that are required.
Once you finish up, you’ll have your very own community and dashboard all built with the Einstein Analytics Platform.
Is your app using the full power of the Salesforce ecosystem? If you aren’t sure, get in touch. We’ve launched over 220+ products and know what it takes to help partners thrive.
