In this article we improve the appearance of our reports with some CSS tweaks in the lightning components.
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.
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:
All of the CSS selectors need to include “.THIS”:
“.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: