So this can clearly be labelled as a “Lightning Lesson from the Field”. As you start to develop more complicated Salesforce Lightning applications – and why wouldn’t you – you as I have done start seeing great power in hidden components. By hidden components I mean components that contribute code or does “something” but which does not have a UI. Thes are very easy to do but have a big drawback as they are also invisible at design time making them near impossible to find the Lightning AppBuilder. To work around this I’ve come up with a hack that has proven itself very useful.
The video below goes more in depth and illustrates the concept. Happy coding.
Since Winter 17 we have had the option of using a Using Lightning Component as a Quick Action. In the Lightning Experience in a desktop browser the component is shown as a popup (actually a lightbox) in the UI and in Salesforce1 (the Salesforce mobile app) it’s more of a modal fullscreen dialog. All this is great. Only thing you have to do is to make your component implement force:lightningQuickAction (all declaratively) and it can be added as a Quick Action. The resulting lightbox / dialog will have a header with the action name and a default Cancel button to close the dialog. Again great but what if you want to name the button something else? Or if you need a custom header? Well there is another interface for this called force:lightningQuickActionWithoutHeader. So far so good. The issue is that while this removes the default header and buttons it doesn’t quite cut it in Salesforce1 as the container will still add a default margin around the component. Bummer…
The only way I found to fix this in the component I’m doing now is to add a negative martin on the component itself thereby hacking the UI. The added style is in bold – there is a negative margin to push the UI out of bounds to appear at 0,0 and a width and a height to make sure the header bar looks correctly. I’ve reported this internally and I hope someone will come up with a fix e.g. a new interface to add this explicitly.