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.

Daniel Peter - Lightning Components Examples Now that we have the basics of the displaying reports and navigating around, there are a couple of styling tweaks we can do to improve the appearance.

Component bundles in the Salesforce1 Lightning framework contain their own CSS. The CSS in these bundles is enforced to be unique to that component:

Component Bundle CSS

All of the CSS selectors need to include “.THIS”:

Component Bundle CSS

“.THIS” will get converted to the component name automatically by the framework. If you are already familiar with CSS, this is pretty much the only thing new to learn for styling lightning components.

Hiding the “Columns…” button

As I mentioned in part 4 of this series, the column toggle button relies on a hyperlink to a fragment identifier. You can get away with this if you are embedding VisualForce in Salesforce1, but it isn’t compatible with the lightning framework. There are some crazy workarounds for this that go against the grain of the way jQuery mobile was written. One workaround is using jQuery to edit the hyperlink to instead toggle the css and styles of DOM elements to achieve a similar effect to clicking on the original fragment hyperlink. You can contact me if you want more details on that route, but I’m hoping there will be a more native way to do this in the future with Lightning.  So instead we will just hide the button for now.

The screenshots above show how we do this, it is pretty straightforward:

reportComponent.css

That frees up the real estate by cleaning up the button that used to live in the area inside the red box:

Lightning Reports Button Hidden

Making Summary Reports Easier to Read

Remember the summary report from a previous article?

Standard Salesforce Summary Report Salesforce Lightning Summary Report

The salesforce standard report uses a darker color to denote the grouping levels. Let’s add something similar to our lightning version of the summary report.

We will add the css class “group” to the grouping header cell in reportGroupComponent.cmp:

Lightning CSS

Then in the component bundle we add this entry to reportGroupComponent.css:

reportGroupComponent.css

Refreshing the report shows that now summary reports are now easier to read:

Lightning Summary Report Styling

A little bit of CSS goes a long way!

Demo Video and Source Code

Check out a demo video of lightning reports in action:
https://www.youtube.com/watch?v=bsLTy35W8xo
The complete code for this series is available here:

https://github.com/danieljpeter/lightningReports

Get the latest Salesforce Developer blog posts and podcast episodes via Slack or RSS.

Add to Slack Subscribe to RSS