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.

account360sr

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.

print360sr.gif

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

About the Author Jeroen Burgers

Salesforce Technical Architect | Platform-Addict & Fan | Working & Living in the Netherlands | 's-Hertogenbosch | Kim, Jens & Kris | 4x+ Rowing | No Soliciting - Please

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s