Guest Post: Daniel Peter is a Lead Applications Engineer at Kenandy, Inc., building the next generation of ERP on the Salesforce Cloud. You can reach him on Twitter @danieljpeter or www.linkedin.com/in/danieljpeter.
In my previous article I introduced Lightning Components and the Reporting API for Apex. Now let’s start using them to build an app!
I’m going to start as close to the data as possible, and work my way back up the stack. The first step is to construct a utility or service class that can access and transform the data for a given report. The AnalyticsUtils class will have a method in it that takes in a tabular report ID, and returns a two-dimensional string array with all the data in it. As you saw in the previous article, the ReportResult object is fairly complex. We just want to extract a simple grid of data out of it, like an Excel spreadsheet. In Salesforce speak, we are going to represent it as a list of string lists (List<List>).
Here is the code to do this:
Now we need to build an Apex controller to connect our lightning component bundle to this method, which extracts and transforms the report data:
On to the Lightning Component Bundles
reportComponentController.js contains a handler for the init event that is fired when the component initializes. This calls the action in the helper we just saw. There are also a couple of functions that toggle a spinner UI on when the component is waiting, and off when it is done waiting.
Lightning Component (reportComponent.cmp)
This is the top of the stack of our application. It is the closest thing to a Visualforce page in Lightning. LIGHTNINGREPORT.LightningReportsController is referring to our Apex controller with a LIGHTNINGREPORT namespace that we created in our org. implements=”force:appHostable” means that we can create a tab for this component and add it to our navigation. Components included in this component don’t need to implement force:appHostable. This calls a subcomponent that renders the row of data.
Lightning Component (reportRowComponent.cmp)
This component takes in a row of data, iterates over the cells, and properly displays it, depending on if it is a header or not.
Trying it out
In order to test the reporting app, we need to make a Lightning Component Tab for it. Navigate to Setup->Create->Tabs and create a new Lightning Component Tab for our Lightning Component:
Then add it under Setup->Mobile Administration->Mobile Navigation:
Fire up Salesforce1 and you can now see the report loaded!
Resources for Lightning Components
For a quick overview and introduction to Lightning Components, visit the Lightning Components page on Salesforce Developers. If you’re ready to learn hands-on while earning badges to demonstrate your skills, start the Lightning Components module in Trailhead. For detailed information on the Lightning Component Framework, refer to the Lightning Component Developer’s Guide.