skybow Modern Forms - How to print a form properly

If you try to print your form by pressing CTRL+P in the browser it might not look like you would expect. Especially when it is opened in a modern panel you can not just print it.

Using skybow Modern Forms you can do the following steps to get your form printed nicely.

1. Add a command bar action
   
   
   
2. Give it a Display name "Print" and a nice print icon
   
   
   
3. Configure an action type "Open Web Page" and open the Display Form of the current list (in this scenario the Expenses list) by passing the ID and an action=print as additional query string parameter
   
   Url: [[@Web.Url]]/Lists/Expenses/DispForm.aspx
   Additional Query String: ID=[[ID]]&action=print
   Open in: New window
   
   
4. Add an After-Form Load action of type "Execute Script" on the same display form.
   
   
   
5. It should just be executed there is an url parameter "action=print", therefore we add the condition on the action.
   The script itself is plain javascript (that could be extended with skybow placeholders, but we don't need them here)
   With the first 2 lines we are going to add some CSS styles which are using for print only to hide the command action bar on the printout. The following 2 lines will print the content of the form and the last line will close 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
   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();

The result should look like this:

Print view: