Use this link to share with your colleagues:
Adding a Report Chart Component to Page Layouts: https://help.pm.leapevent.tech/a/1155143
Visuals can help tell a story. One way to accomplish that is by using a lightning component called Report Chart on page layouts. Imagine looking at an Account or Contact and seeing their year-over-year giving history displayed as a chart right there! Or what about showing the value of tickets purchased by year? There are lots of possibilities.
For this article we are going to create a year-over-year giving history component for Accounts, but feel free to get creative!
In this article, we'll look at:
- How to create and edit a report so it can be used within a Report Chart component
- Add and format a Report Chart component to the page layout
Setting up a Report Chart component should take ~20 minutes, less time if the report you need is already built.
The Finished Product: Report chart component on the page layout
In this article, we'll look at building a summary of donations by fiscal year on the Account Page, which is a great way to see changes in giving over time for a business or household. This is what our Accounts will look like when we're all done here:
While this is the specific example we'll go through in this article, you can get creative and use different reports to display the information you want and need on your page layouts!
1. First, create the report
The report above, which we'll build in this example, is intended to look at your donation data from all time, and might be a useful tool in and of itself. When you get to the page layout portion, you'll be doing some extra magic to show only the data related to each Account.
If you already have a donations report you like or if you want to build a different report to show other data, like ticket purchases, you can create a different report instead. If you do so, make sure to check out the report chart specifications so that you can add your Report Chart to your page layout.
1.1. Start with the All Donations report
- Select the Reports tab
- Before searching, make sure you're viewing All Reports
- Search for All Donations
- Locate and select All Donations
1.2. Save As to create a copy
1.3. Save report as a new report
- Report Name: Give this report a descriptive name. For this example, we'll call it Donations FY Comparison.
- Report Description: Use this to let people know this report's purpose. In this case, this is being used on the Account page layout. Changes to this report could impact what would appear on an Account.
- Save
1.4. Edit the report
1.5. Select the Filters tab and add any filters you might want
In this example, we've filtered out any donation record types that are not explicitly donations - like Group Sale, Group Sale Payment, and Pledge, along with a custom record type called Rental Payment.
You want donations from All Time, so make sure not to restrict any date range.
1.6. Go to Outline and add a new grouping by Close Date
1.7. Now let's make that grouping easier to digest
Once you select Group Date By, you will see lots of options. Select whatever works best for you! Fiscal Year is what we're using for this example.
1.8. Save & Run the Report
1.9. Click Add Chart
1.10. Click the gear to format the chart to fit your needs
The format you use here will be the same format which displays on the page layout. Think about how you want to see this information for a single record.
For this example, we're going to use a Bar chart and have each Fiscal Year display horizontally when we add this Report Chart to our Account page layouts.
2. Next, let's add the lightning component to the page layout
This step adds the component to your page layout which will reference that report you just built. Then we'll filter that component so it only shows the results related to the record being viewed.
In this example, we'll be adding the component to our Account pages.
2.1. Open any Account record
Doesn't matter which one.
If you're trying to add the component to another object, like a Contact, open a record of that object instead!
2.2. Click on the gear at the top of the page and select Edit Page from the menu
2.3. From the Lightning App Builder page, locate Report Chart from the Lightning Components list. Drag Report Chart onto the page layout wherever you wish
2.4. Click on the Report Chart component to show the available parameters on the right.
2.5. Set parameters for that component
- Label: Give the chart a name. For this example, we'll call it Donations by FY
- Report: Select the Report you created earlier. For this example, it was Donations FY Comparison
- Filter By: Select Account ID in the Filter By menu; this is the magic filter!
- Show Refresh Button: Check the box to allow you to refresh the report from the Account page
2.6. Under Set Component Visibility, select Add Filter (optional)
For this example, we only want to see this chart on the Account if they have donation history with us. So we've added a Filter where the Lifetime Donation History (Amount) field is greater than 0.
2.7. Save the updated page layout
2.8. Did you get a message to Activate it first?
2.9. Go Back to the Account
If you are prompted to Save again, go ahead and do that. Depending on what you've edited before on this page, the order of activating and saving can sometimes be different.
3. Admire your work!
Back on the Account page, you'll see the chart, and it's only showing the Donations received from that Account.
You may need to refresh your browser page, or log out and then back in, to reflect your changes.
