Lighting Out + Visualforce = Lightning Printing

Ever needed to print from within Lightning Experience? Recently we developed for our customer an Account summary page consisting of a number of filterable related lists. For that purpose I tried-out and successfully implemented a solution using the CMDT Enhanced Related List package managed package. Developed by my colleague and peer Denny Chandra from Down-under. It’s a terrific solution, extremely easy and super versatile. With little code, only Lightning markup and a tiny bit of Lightning controller code, a I was able to create a nice dynamic user-experience. The purpose of this post isn’t to explain this particular solution, I got the request to have printable version of the data presented. Which factually is just a bunch of related lists.

The next challenge came around the corner, when the customer asked to create a printable page of the presented data. Since the Account Summary is just a single self-contained Lightning Component I questioned myself whether it be feasible to create a Visualforce page? And yes, the merits of Lightning is that Lightning applications can also be exposed externally. That is what Lightning Out brings us. Fuse Lightning Out and Visualforce, and you got yourself a potential solution. Fusing both is really simple. And you could read more documentation here. But beware, speaking today, Lightning Out is still a beta feature, so its implementation might change before getting the general available stamp.

That said… The hosting Lightning app needs to be extended.

<aura:application
        extends="ltng:outApp"
        access="global"
        description="AccountSummaryApp"
/>

The Visualforce page, in this case only has to include a single component. Important to include the directive. Other than that, it pretty much boiler plate as per documentation.

<apex:page sidebar="false" showHeader="false" standardStylesheets="true" controller="AccountSummaryController" >

    <apex:includeLightning />

    <div id="AccountSummaryAppDiv"/>

    <script>
        $Lightning.use("c:AccountSummaryApp", function() {
            $Lightning.createComponent("c:AccountSummaryComp"
                , {"recordId" : "{!accountId}", "numrows" : "{!numrows}"}
                , "AccountSummaryAppDiv"
                , function(cmp) {
                    console.log('[Account360Page] Printable Account 360 initialized');
                });
            });
    </script>

</apex:page>

The button to launch the Visualforce page in a separate tab, consists of nothing more than this.

printPageAction: function(component, event, helper) {
	var url = location.origin + '/apex/Account360Page?id=' + component.get("v.recordId");
	window.open(url, '_blank');
}

Bringing up the Print dialog is a one-liner.

printAction: function(component, event, helper) {
	window.print();
}

And to be honest, I was pretty surprised how well the end-result looked in printed form. I did take some small additional measures, most important one to set the number of lines the CMTD Enhanced Related List components would display to be maximum 50. That is, without the user having to click ‘Show more’ before hitting the ‘Print’ button.

Summarizing, Visualforce + Lightning is a happy marriage if you’re looking to print it.