Last Updated on June 17, 2024 by Rakesh Gupta

Big Idea or Enduring Question:

• How Do You Create a Lightning Web Component for Use with CRM Analytics Dashboards?

Objectives:

After reading this blog, you’ll be able to:

1. Create and embed a custom Lightning Web Component in CRM Analytics Dashboards.
2. Display data in a Lightning Datatable, including handling blank fields.
3. Add a Lightning Web Component to a CRM Analytics Dashboard.
4. and much more

In the past, I’ve written a few articles on Lightning Web Component. Why not check them out while you are at it?!

1. Send Email as a Quick Action Using Lightning Web Component
2. Add Popup Overlay Modal in Lightning Web Component

Business Use case

Janel Parrish is working as a Junior Developer at Gurukul on Cloud (GoC). Janel is passionate about continuous learning and spends his free time acquiring new skills to enhance his development toolkit. Recently, Janel has embarked on a journey into CRM Analytics and is keen to understand how to create a Lightning Web Component (LWC) that can be embedded into CRM Analytics Dashboards.

Janel’s goal is to create a component that displays account counts categorized by industry. He envisions a solution where, if an account does not have an industry specified, the component will display ‘NO Industry on Record’.

Automation Champion Approach (I-do):

In this blog post, I will guide you through the process of building this Lightning Web Component, deploying it, and integrating it seamlessly into a CRM Analytics Dashboard. By the end, you’ll have the skills to create a similar component for your own Salesforce environment, enhancing your ability to visualize key business metrics.

Lightning Web Components used in CRM Analytics dashboards leverage the same file structure and XML metadata format used by other LWCs on the Salesforce platform. Here are few additions to this metadata specific for CRM Analytics.

Step 1: Write an Apex Class to Retrieve Account Data

In this step, I will create an Apex class that retrieves account counts categorized by industry from Salesforce and makes this data available to Lightning Web Components (LWC). This class will aggregate the data in a way that allows for clear visualization on CRM Analytics Dashboards. Specifically, the class will:

1. Query Account Data: I will execute a SOQL query to fetch account counts grouped by industry.
2. Expose Data to LWCs: I will use the @AuraEnabled annotation to make the data accessible to Lightning Web Components.
3. Optimize Performance: I will enable caching to improve the performance of data retrieval and reduce server load.

By implementing this Apex class, we will create a backend logic layer that efficiently processes and delivers the necessary data for our Lightning Web Component, ensuring accurate and real-time analytics within our CRM dashboards.

public with sharing class AccountController {
    @AuraEnabled(cacheable=true)
    public static List<AggregateResult> getAccountCountByIndustry() {
        return [SELECT Industry, COUNT(Id) cnt
            FROM Account
            GROUP BY Industry];
    }
}

Step 2: Create a Lightning Web Component to Display Account Data 

In this step, I will create a Lightning Web Component that displays the account counts by industry retrieved from the Apex class. This component will be designed for clear visualization on CRM Analytics Dashboards.

industryAccountCount.html

This template file is responsible for defining the structure and appearance of the component. In this specific case, the component is designed to display account counts by industry in a Lightning Datatable.

The lightning-datatable component is used to display the account counts by industry in a tabular format, with columns for Industry and Account Count. The checkbox column is hidden to make it a view-only table.

<template>
    <lightning-card title="Account Count by Industry" icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <template if:true={data}>
                <lightning-datatable
                    key-field="id"
                    data={data}
                    columns={columns}
                    hide-checkbox-column="true">
                </lightning-datatable>
            </template>
            <template if:true={error}>
                <div class="slds-text-align_center">
                    No data available. Please check.
                </div>
            </template>
        </div>
    </lightning-card>
</template>

industryAccountCount.js

This JavaScript file for the industryAccountCount Lightning Web Component handles the retrieval of account counts by industry from the Apex class and the display of this data in a Lightning Datatable. It manages data fetching, error handling, and ensures the component is seamlessly integrated into CRM Analytics Dashboards.

import { LightningElement, wire } from 'lwc';
import getAccountCountByIndustry from '@salesforce/apex/AccountController.getAccountCountByIndustry';

const columns = [
    { label: 'Industry', fieldName: 'Industry' },
    { label: 'Account Count', fieldName: 'cnt', type: 'number' }
];

export default class IndustryAccountCount extends LightningElement {
    data;
    error;

    columns = columns;

    @wire(getAccountCountByIndustry)
    wiredAccounts({ error, data }) {
        if (data) {
            // Map data to make it compatible with the datatable
            this.data = data.map(record => {
                return {
                    Industry: record.Industry ? record.Industry : 'NO Industry on Record',
                    cnt: record.cnt
                };
            });
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.data = undefined;
        }
    }
}

industryAccountCount.js-meta.xml

This XML configuration file marks the component as exposed, making it available for use. Adding this target to the list of analytics__Dashboard target for your component allows it to be used in CRM Analytics dashboards, provided that your component is public. You can also add a <targetConfig> for the new target to further customize how your component appears in dashboards.

In an analyticsDashboard target config, you can choose to include a <hasStep>true</hasStep> tag to indicate that your component requires an attached step to function as expected. With this tag, the dashboard builder UI prompts you to attach an existing step or create a new step when creating an instance of your component. 

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="industryAccountCount">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>analytics__Dashboard</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="analytics__Dashboard">
            <hasStep>true</hasStep>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Step 3: Adding a Lightning Web Component to CRM Analytics Dashboard 

In this step, I will guide you through adding the industryAccountCount Lightning Web Component to your CRM Analytics Dashboard. This process involves making the component available for use in the dashboard and then embedding it within the dashboard for data visualization.

1. Navigate to your CRM Analytics Dashboard in Salesforce.
2. Click on the dashboard where you want to add the industryAccountCount component, click the Edit button.
3. Drag and drop the Component onto the desired location within the dashboard layout.
4. In the component search box, type industryAccountCount to find your LWC.
5. Save the changes to your dashboard by clicking the Save button.

Formative Assessment:

I want to hear from you!

What is one thing you learned from this post? How do you envision applying this new knowledge in the real world? Feel free to share in the comments below.