Print an Item in a Customized Form

Learn how to print your customized Lightning Form as it appears on the form.



Add a command bar action.





Set the Display name to "Print" and give it a nice print icon.





Configure an action type. 

Configure the "Open Web Page" action to open the Display Form of the current list (in this example, “Expenses” is the list) by passing the ID & action=print as an additional query string parameter.



Url: [[@Web.Url]]/Lists/Expenses/DispForm.aspx 
Additional Query String: ID=[[ID]]&action=print 
Open in: New window



Go to the Display Form customization and add an After-Form Load action of type "Execute Script" 




The URL parameter from the Open Web Page action was "action=print," so we added this condition to the Execute Script action. 

The script itself is plain JavaScript. The first two lines add some CSS styles which will hide the command action bar on the printout. The following 2 lines print the content of the form, and the last line closes the additional tab that has been opened by the command bar action.








 

Title: Print form if action = print 
Condition: [[@Page.GetQueryString('action')]]=="print" 
Type: Execute Script


var style = "@media print { .ms-CommandBar { display:none;} }"
jQuery('head').append("<style type='text/css'>"+style+"</style>");
 
document.body.innerHTML = 
jQuery("div[class*='skyFormsContainerWrapper']").first().html(); 
window.print(); 
window.close();

 

You should now have a Print icon at the top of your customized form. Upon clicking the icon, a new tab with a printing pane will open.

 

For forms with sublists or fields placed horizontally, a great alternative would be the Document Generator, which allows you to place each field where you want it and supports sublist items in a table.

Was this article helpful?

Can’t find what you’re looking for?

Our world-class Customer Success team is here for you.

Contact Support