davidbeayon

Print custom Form Data from O365 right from the Form? Yes you can with JavaScript and HTML

Discussion created by davidbeayon on Mar 25, 2015

It has been maddening trying to get Form data to print using Nintex Forms for Office 365.  We all know that this is currently not supported by the current version of the product.  You can print the form as it is displayed using the instructions that are listed here:

Print Button - Nintex Forms

 

This may work for some of you, but it really becomes a problem if your form scrolls outside of the frame that shows in the browser.  I was finding that if I had a long form that required scrolling, I would only get what was displayed in the browser, but nothing below.  I could not get the entire frame to print.  I also needed a way for the users to be able to print just the data they needed, regardless of where it existed on the form.

 

With that in mind, I created a JavaScript function that not only allowed me to pull the data from the form, but to assemble it in any manner that I needed.   In order to do this you really need to be up to speed with coding in JavaScript and HTML. Also it would help if you are familiar with working with the "Store Client ID in JavaScript variable".   What I did was to create a JavaScript function that takes the forms JavaScript ID values and insert them into a good old fashion HTML document.  Below is what I created using the JavaScript ID's from my specific Form.  You will need to use your brain to figure out how to implement your data.

 

Create a button on your form

 

 

 

 

 

Some caution when doing this - Creating the html variable can be maddening.  Start with your very basic stuff to test that it is going to work.

 

In your form Settings add the function

 

function displayFormInfo() {
      var html = "<!DOCTYPE html>";
      html += "<html>";
      html += "<head>";
      html += "<title>Form Data</title>";
      html += "</head>";
      html += "</html>";

     var printWin = window.open('', '', 'left=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status  =0');
      printWin.document.write(html);
      printWin.document.close();
      printWin.focus();
      printWin.print();
      printWin.close();
}

 

Once you have this working, start to add the rest of the HTML goodies.  For me I did something like this:

 

 

function displayFormInfo() {
     var html = "<!DOCTYPE html>";
      html += "<html>";
      html += "<head>";
      html += "<title>Form Data</title>";
      html += "</head>";
      html += "<table border='1px'>";
      html += "<tr>";
      html += "<th>Hours</th>";
      html += "<th>Mon</th>";
      html += "<th>Tue</th>";
      html += "<th>Wed</th>";
      html += "<th>Thu</th>";
      html += "<th>Fri</th>";
      html += "<th>Sat</th>";
      html += "</tr>";
      html += "<tr>";
      html += "<th>Open</th>";
      html += "<td>" + NWF$("#" + txtMonStart).val() + "</td>";
      html += "<td>" + NWF$("#" + txtTueStart).val() + "</td>";
      html += "<td>" + NWF$("#" + txtWedStart).val() + "</td>";
      html += "<td>" + NWF$("#" + txtThuStart).val() + "</td>";
      html += "<td>" + NWF$("#" + txtFriStart).val() + "</td>";
      html += "<td>" + NWF$("#" + txtSatStart).val() + "</td>";
      html += "</tr>";
      html += "<tr>";
      html += "<th>Close</th>";
      html += "<td>" + NWF$("#" + txtMonEnd).val() + "</td>";
      html += "<td>" + NWF$("#" + txtTueEnd).val() + "</td>";
      html += "<td>" + NWF$("#" + txtWedEnd).val() + "</td>";
      html += "<td>" + NWF$("#" + txtThuEnd).val() + "</td>";
      html += "<td>" + NWF$("#" + txtFriEnd).val() + "</td>";
      html += "<td>" + NWF$("#" + txtSatEnd).val() + "</td>";
      html += "</tr>";
      html += "</table>";
      html += "<br>";
      html += "<table border='1px'>";
      html += "<th>Hours</th>";
      html += "<th>Mon</th>";
      html += "<th>Tue</th>";
      html += "<th>Wed</th>";
      html += "<th>Thu</th>";
      html += "<th>Fri</th>";
      html += "<th>Sat</th>";
      html += "</tr>";
      html += "<tr>";
      html += "<th>Open</th>";
      html += "<td>" + NWF$("#" + txtMMTMonStart).val() + "</td>";
      html += "<td>" + NWF$("#" + txtMMTTueStart).val() + "</td>";
      html += "<td>" + NWF$("#" + txtMMTWedStart).val() + "</td>";
      html += "<td>" + NWF$("#" + txtMMTThuStart).val() + "</td>";
      html += "<td>" + NWF$("#" + txtMMTFriStart).val() + "</td>";
      html += "<td>" + NWF$("#" + txtMMTSatStart).val() + "</td>";
      html += "</tr>";
      html += "<tr>";
      html += "<th>Close</th>";
      html += "<td>" + NWF$("#" + txtMMTMonEnd).val() + "</td>";
      html += "<td>" + NWF$("#" + txtMMTTueEnd).val() + "</td>";
      html += "<td>" + NWF$("#" + txtMMTWedEnd).val() + "</td>";
      html += "<td>" + NWF$("#" + txtMMTThuEnd).val() + "</td>";
      html += "<td>" + NWF$("#" + txtMMTFriEnd).val() + "</td>";
      html += "<td>" + NWF$("#" + txtMMTSatEnd).val() + "</td>";
      html += "</tr>";
      html += "</table>";
      html += "</html>";

 

     //Here is where the magic happens!
      var printWin = window.open('', '', 'left=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status  =0');
     printWin.document.write(html);
     printWin.document.close();
     printWin.focus();
     printWin.print();
     printWin.close();
}

 

My suggestion is to work in small chunks. This process can be mind boggling and is easily broken with something as simple as a missing quote or closing tag. Based on what I was able to do here, there is no reason that someone could not create elaborate HTML documents to display the form data.

Outcomes