Report Chart Lightning Components

Introduction: Lightning components are versatile and useful tools Salesforce administrators can leverage to extend the base functionality of Salesforce and make Users more efficient in their daily tasks.  These come in a myriad of shapes and forms, each having their uses and benefits for end Users.

One fantastic way to utilize Lightning components is to embed report charts directly onto records in Salesforce rather than requiring Users to navigate away from the record to analyse data for that record.  In today’s blog, we will walk through the process of creating an embedded Report Chart Lightning component that will help increase the efficiency of our end Users as they view a given Account record in Salesforce.

Challenge: To be able to view Opportunity data for a given Account in Salesforce and determine how much revenue we have in each Stage of our pipeline for that Account.

Solution: Report Chart Lightning Component

Objective: View all Opportunities for an Account segmented by Stage and revenue per Stage.

Step 1: Create Your Report

Our first step is to create the report we want to see on our page layout.  To that end, we navigate to the Report tab in Salesforce and create a new “Opportunities” report type.  We can then add whatever fields we like to the base report; we want to ensure we summarise or “group” our report by the key data points we will want to see in our report chart component.  That means we will at least want to group our data by the Account Name and the Stage of the Opportunity (see screenshot).

We also want to ensure that we have the filters for the report configured so that we are only seeing the data we care about – these can be adjusted as needed based on your goals to reflect whatever subset of data you wish to view in your component when you are ready to add it to your Lightning page layout (see screenshot).  Since our example is relatively straightforward, we will leave our filters largely “open” and not try to view any data subsets.

Step 2: Add a Chart to Your Report

You cannot modify the format of a report chart Lightning component directly in the Lightning page builder interface, you can only do that directly in your report via the “Add Chart” feature (see screenshot).

Once you click the “Add Chart” button, Salesforce will insert a default bar chart into the report, but this can be modified by clicking the “Chart Properties” cog icon to the right of the report itself.  You can also toggle visibility to the chart on your report by clicking on the chart icon in the upper right-hand corner of your report (see screenshot).

Since we wish to view all Opportunities for a given Account by Stage and Amount, we will modify the settings of this chart to be a column chart (instead of the default bar chart), set the X-Axis to be summarized by Account Name and Stage, and set the Y-Axis to summarize by Amount (see screenshot).

When we do this, the report updates the chart to reflect ALL Stages with Amounts for ALL Opportunities for ALL Accounts.  Now, you might become concerned that this report does not reflect the Stages and Amounts of Opportunities for a single Account, but we will take care of that later.  For now, we are finished with our report and are ready to embed it in our Lightning page layout!  Go ahead and save your report with its beautiful new chart and proceed to the next step.

Step 3: Add the Report Chart Lightning Component to Your Layout

To add a report chart Lightning component to your layout, navigate to an Account record in Salesforce, click the setup cog icon in the upper right-hand corner of the screen, and select “Edit Page” (see screenshot).

Once you are in the Lightning page build interface, select the “Report Chart” Lightning component from the Standard components list on the left-hand side of the page before dragging and dropping the component where you want it on the page layout (see screenshot).

Step 4: Configure the Report Chart Lightning Component on Your Layout

There are a few fields we need to complete to properly configure our Report Chart Lightning component and have it display the specific data we need for a given Account.

Label – You can assign a custom label to your report chart component, otherwise it will default to the name of the report you are referencing in the component.  For our example, I will call this “Opportunities by Stage and Amount”

Report – Here is where you select the report you want to display in the component, we can select our constructed report from steps 1 and 2 here or select any other available report we want to display.

Filter By (Most Important) – This is the critical field for narrowing the data in our report, which you may recall had open filters, so that it only displays the data for the Account being viewed by the User.  For our example, we will select “Account Id” from this menu, because we want to see the report data filtered by the Account we are viewing and not every Account in the system, which is the default view in our source report (see screenshots).

NOTE: If you do not select any Id in this field the report on the page layout will continue to display the data using the default filters of your source report, which may cause User confusion and lessen the effectiveness of the component(s).

Show Refresh Button – This is a setting that allows Users to “refresh” the report chart component, which will allow it to retrieve the most recent data for the report.  You can refresh the report to ensure you are looking at the most up-to-date version of the data contained in the report.

(Deprecated) Cache Age (in minutes) – This is a deprecated feature that controls how long the cache of the component maintains its data.  This will default to 1,440 minutes (i.e. 24 hours) and cannot be changed.  Even if you add a new value in this field, it will still retain the cache for only 1,440 minutes, so it’s best to leave it be.

Once we select “Account Id” from the “Filter By” menu, we will be able to see the updated report chart component reflecting only Opportunities for the Account we are viewing by Stage and Amount (see screenshot).

When you are done filtering your report chart component, click the “Save” button to return and then the back arrow in the upper left-hand corner to return to your Account record and see your awesome new chart component live!

Step 5: Profit!

Navigating to any Account in Salesforce, we can now view all the Opportunities for that Account segmented by Stage and Amount, allowing Users to easily discern how much business the organization has closed with a given Account and how much revenue is in the pipeline, all without having to navigate away from the Account record itself!

Note that you can see the last time a report chart component was refreshed by a time stamp in the lower right hand corner.  Clicking the “refresh” icon next to this time stamp allows you to update the report with the most recent data from the system, ensuring it is as accurate as possible (see screenshot).

Conclusion: Using the steps outlined above, you can configure numerous reports and charts to reflect any related data around a record you want.  For example, you could display reports on sales, like we did above, or display report data around related Cases, including close rates and open tickets, etc.

Basically, if there is data related to the record you are viewing, you can create a report to render that data and display it on the record itself.  You can even have multiple embedded report chart components on the same record layout, allowing you to see a tremendous amount of data in a single location.

We hope you enjoyed this demonstration and will use your newfound Salesforce powers only for good.  Thank you for the read and good luck!