Displaying Summary and Matrix Reports with Lightning Components

Guest Post: Daniel Peter is a Lead Applications Engineer at Kenandy, Inc. You can reach him on Twitter @danieljpeter or www.linkedin.com/in/danieljpeter.

Daniel Peter - Lightning Components Example Thus far, this series on building Lightning Components has walked you through building Lightning Components that work with tabular reports. To this point, the Apex code provided isn’t designed to handle summary and matrix reports. Let’s fix that.

Determining the Report Type in Apex

In order to process the ReportResult properly, we need to find out what type of report it is. Depending on if it is tabular, summary, or matrix we will want to represent the data in a different user defined data type as well.

Here’s some simple code to figure this out:

The code looks at the number of groupings down and groupings across to make a quick and dirty determination as to the report type and which method needs to be called to build the report and return it in the expected format. Since we may be returning different data types I put everything in one wrapper to rule them all:

This wrapper will either have one or the other response type populated, with an additional “reportType” attibute which will let us know which report type it is, and which object we should be using. As you will see, all 3 report types can be represented with 2 data structures: tabular and summary. Of course this will only support one level of grouping for tabular and matrix, but that will buy us quite a bit of functionality on a mobile device.

Handling Summary Reports

Since summary data is grouped, it needs to be stored in a different data structure. Here is what I came up with:

The summaryReportResponse type contains the same reportFields as the tabular report, but instead of a big two dimensional array of data, it has a list of summaryReportGroups. summaryReport contains some info about the group itself, then contains a similar, smaller two dimensional array as the tabular report, with just the data for that group.

Let’s look at how we build up the summary report in Apex:

You can see we loop over the groupings down, and use those grouping keys to get the fact map by a key we construct. Then we loop over the rows and cells in that group, in the same way we would do for a tabular report.

Creating a Lightning Component to Render a Summary Report

How do we use this data to render a summary report? With another component, of course! To get started, create a new component and name it reportGroupComponent.cmp, then enter the following:

This component is called once for each group in the summary report, and gives a grouping row that spans the whole table, and then iterates over the rest of the rows in the group.

Next, change the main component to conditionally call the correct subcomponent depending on whether it is a tabular / matrix or summary report. Use the renderIf and set/else tags again to accomplish the conditional behavior:

To view the result, navigate to a summary report and check it out.

Here is what the summary salesforce desktop report looks like.

And here is the Lightning / jQuery Mobile version with groupings.

The grouping levels even have hyperlinks, awesome!

Matrix Reports

After looking at a matrix report with one grouping in each dimension, I realized it could be shoehorned into the tabular data structure relatively easy, so I went with that approach. Here is code that can accomplish this:

To get at the core numeric data at the intersections of the matrix, we have to build up lists of our groupings down and groupings across. Then we do a nested loop, build a composite key, and get the numeric value at that location from the fact map. If you are interested in matrix report data, I would recommend doing a system.debug(JSON.serialize(ReportResult)) as I showed in my first article in the series to look more at the data. The structure is very similar to tabular and summary, but the fact map has more complex keys and more of them. For each group down we build one row to represent all the cells in the group across. One of the other tricks to fit the matrix into the tabular format is to create the report fields, which ultimately display as the header, from the grouping down and the grouping across fields. A bit of a hack, but it gets the job done.

Let’s see what the matrix report looks like.

Here is what the matrix salesforce desktop report looks like.

Standard Salesforce Matrix Report

And here is the Lightning / jQuery Mobile version.

Salesforce Lightning Matrix Report

I took some liberties in the presentation of the data, as you can see, but it is still a useful matrix report on the go when you are already familiar with the report and just need a quick view while away from the office.

There is still some room for improvement. In the next post we’ll look at some styling enhancements we can make.